增加节点ref标识的支持

pull/1/head 1.5.0
yutent 2023-03-17 10:18:40 +08:00
parent 195f3b1828
commit 8cebdd1994
3 changed files with 21 additions and 7 deletions

View File

@ -1,6 +1,6 @@
{
"name": "@bd/core",
"version": "1.4.1",
"version": "1.5.0",
"type": "module",
"description": "百搭UI组件库的核心",
"main": "dist/index.js",

View File

@ -134,7 +134,7 @@ function getTemplateHtml(strings, type) {
return [htmlResult, attrNames]
}
class Template {
constructor({ strings, ['__dom_type__']: type }, options) {
constructor({ strings, values, ['__dom_type__']: type }, options) {
this.parts = []
let node
let nodeIndex = 0
@ -150,11 +150,19 @@ class Template {
svgElement.remove()
content.append(...svgElement.childNodes)
}
while ((node = walker.nextNode()) !== null && parts.length < partCount) {
if (node.nodeType === 1) {
if (node.hasAttributes()) {
let attrsToRemove = []
for (let name of node.getAttributeNames()) {
if (name === 'ref') {
options.host.$refs[node.getAttribute('ref')] = node
node.removeAttribute('ref')
continue
}
if (
name.endsWith(boundAttributeSuffix) ||
name.startsWith(marker)
@ -423,7 +431,7 @@ class ChildPart {
let { values, ['__dom_type__']: type } = result
let template =
typeof type === 'number'
? this._$getTemplate(result)
? this.#getTemplate(result)
: (type.el === void 0 && (type.el = Template.createElement(type.h)),
type)
@ -439,7 +447,7 @@ class ChildPart {
this._$committedValue = instance
}
}
_$getTemplate(result) {
#getTemplate(result) {
let template = templateCache.get(result.strings)
if (template === void 0) {
template = new Template(result, this.options)
@ -558,6 +566,11 @@ class AttributePart {
#commitValue(value) {
let isBoolAttr = boolMap[this.name]
// ref属性不渲染到节点上
if (this.name === 'ref') {
this.options.host.$refs[value] = this.element
return
}
if (isBoolAttr) {
this.element[isBoolAttr] = !(value === false || value === null)

View File

@ -95,6 +95,10 @@ export class Component extends HTMLElement {
this[__pending__] = false
this[__mounted__] = false
this[__init__]()
Object.defineProperty(this, '$refs', {
value: Object.create(null),
enumerable: false
})
this.created()
}
@ -149,9 +153,6 @@ export class Component extends HTMLElement {
return
}
// name === 'icon' &&
// console.log(name, '>>>', options.default, ':::', this[name])
switch (options.type) {
case Number:
case String: