diff --git a/package.json b/package.json index c98a8ca..8333b94 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@bd/core", - "version": "1.9.2", + "version": "1.9.3", "type": "module", "description": "百搭UI组件库的核心", "main": "dist/index.js", diff --git a/src/index.js b/src/index.js index f5bdd25..8b3ff1e 100644 --- a/src/index.js +++ b/src/index.js @@ -17,9 +17,10 @@ import { import { css, adoptStyles } from './css.js' import { render, html, svg, raw } from './html.js' import { animate, MODES } from './anim.js' -import { nextTick, fire, bind, unbind, hyphen } from './utils.js' +import { nextTick, fire, bind, unbind, hyphen, camelize } from './utils.js' + export { $, $$, offset, outsideClick, clearOutsideClick } from './utils.js' -export { html, raw, css, svg, bind, unbind, nextTick, fire } +export { html, raw, css, svg, bind, unbind, nextTick, fire, hyphen, camelize } // 简单的类名解析 export function classMap(data = {}) { @@ -54,7 +55,7 @@ export class Component extends HTMLElement { this.parseAnim() this[__props__].forEach((options, prop) => { - list.push(prop.toLowerCase()) + list.push(options.attrName) }) return list } @@ -112,8 +113,14 @@ export class Component extends HTMLElement { if (this.hasOwnProperty('props')) { for (let k in this.props) { let options = parsePropsDeclaration(this.props[k]) - if (boolMap[k] && k !== boolMap[k]) { - k = boolMap[k] + let attrName = k.toLowerCase() + + options.attrName = attrName + + if (boolMap[attrName]) { + k = boolMap[attrName] + } else { + options.attrName = hyphen(k) } this.createProperty(k, options) } @@ -211,9 +218,10 @@ export class Component extends HTMLElement { */ #prop2attr(name, value) { let options = this.#getPropOptions(name) + let attrName = options.attrName if (options.attribute === false) { - this.removeAttribute(name) + this.removeAttribute(attrName) return } @@ -221,17 +229,17 @@ export class Component extends HTMLElement { case Number: case String: if (value === null) { - this.removeAttribute(name) + this.removeAttribute(attrName) } else { - this.setAttribute(name, value) + this.setAttribute(attrName, value) } break case Boolean: if (value === null || value === false) { - this.removeAttribute(name) + this.removeAttribute(attrName) } else { - this.setAttribute(name, '') + this.setAttribute(attrName, '') } break } @@ -243,25 +251,28 @@ export class Component extends HTMLElement { * @param value */ #attr2prop(name, value, old) { - let _name = boolMap[name], - options + let _name = boolMap[name] + let options, propName + if (_name) { name = _name } - options = this.#getPropOptions(name) + propName = camelize(name) + + options = this.#getPropOptions(propName) value = fixedValue(value, options) if (options.attribute === false) { if (value === null) { return } - if (value === this[name]) { + if (value === this[propName]) { this.removeAttribute(name) return } } - this[name] = value + this[propName] = value } // 请求更新 diff --git a/src/utils.js b/src/utils.js index ca1bec1..3fbf0d3 100644 --- a/src/utils.js +++ b/src/utils.js @@ -47,6 +47,15 @@ export function hyphen(target) { return target.replace(/([a-z\d])([A-Z]+)/g, '$1-$2').toLowerCase() } +//连字符转换为驼峰风格 +export function camelize(target) { + //提前判断,提高效率 + if (target.indexOf('-') < 0) { + return target + } + return target.replace(/\-([a-z])/g, (m, s) => s.toUpperCase()) +} + //取得距离页面左上角的坐标 export function offset(node) { try {