优化props定义

pull/1/head 1.9.3
yutent 2023-05-06 11:59:58 +08:00
parent 5e1a5d7ebd
commit 134e465dd0
3 changed files with 36 additions and 16 deletions

View File

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

View File

@ -17,9 +17,10 @@ import {
import { css, adoptStyles } from './css.js' import { css, adoptStyles } from './css.js'
import { render, html, svg, raw } from './html.js' import { render, html, svg, raw } from './html.js'
import { animate, MODES } from './anim.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 { $, $$, 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 = {}) { export function classMap(data = {}) {
@ -54,7 +55,7 @@ export class Component extends HTMLElement {
this.parseAnim() this.parseAnim()
this[__props__].forEach((options, prop) => { this[__props__].forEach((options, prop) => {
list.push(prop.toLowerCase()) list.push(options.attrName)
}) })
return list return list
} }
@ -112,8 +113,14 @@ export class Component extends HTMLElement {
if (this.hasOwnProperty('props')) { if (this.hasOwnProperty('props')) {
for (let k in this.props) { for (let k in this.props) {
let options = parsePropsDeclaration(this.props[k]) let options = parsePropsDeclaration(this.props[k])
if (boolMap[k] && k !== boolMap[k]) { let attrName = k.toLowerCase()
k = boolMap[k]
options.attrName = attrName
if (boolMap[attrName]) {
k = boolMap[attrName]
} else {
options.attrName = hyphen(k)
} }
this.createProperty(k, options) this.createProperty(k, options)
} }
@ -211,9 +218,10 @@ export class Component extends HTMLElement {
*/ */
#prop2attr(name, value) { #prop2attr(name, value) {
let options = this.#getPropOptions(name) let options = this.#getPropOptions(name)
let attrName = options.attrName
if (options.attribute === false) { if (options.attribute === false) {
this.removeAttribute(name) this.removeAttribute(attrName)
return return
} }
@ -221,17 +229,17 @@ export class Component extends HTMLElement {
case Number: case Number:
case String: case String:
if (value === null) { if (value === null) {
this.removeAttribute(name) this.removeAttribute(attrName)
} else { } else {
this.setAttribute(name, value) this.setAttribute(attrName, value)
} }
break break
case Boolean: case Boolean:
if (value === null || value === false) { if (value === null || value === false) {
this.removeAttribute(name) this.removeAttribute(attrName)
} else { } else {
this.setAttribute(name, '') this.setAttribute(attrName, '')
} }
break break
} }
@ -243,25 +251,28 @@ export class Component extends HTMLElement {
* @param value<String|Boolean|Number> * @param value<String|Boolean|Number>
*/ */
#attr2prop(name, value, old) { #attr2prop(name, value, old) {
let _name = boolMap[name], let _name = boolMap[name]
options let options, propName
if (_name) { if (_name) {
name = _name name = _name
} }
options = this.#getPropOptions(name) propName = camelize(name)
options = this.#getPropOptions(propName)
value = fixedValue(value, options) value = fixedValue(value, options)
if (options.attribute === false) { if (options.attribute === false) {
if (value === null) { if (value === null) {
return return
} }
if (value === this[name]) { if (value === this[propName]) {
this.removeAttribute(name) this.removeAttribute(name)
return return
} }
} }
this[name] = value this[propName] = value
} }
// 请求更新 // 请求更新

View File

@ -47,6 +47,15 @@ export function hyphen(target) {
return target.replace(/([a-z\d])([A-Z]+)/g, '$1-$2').toLowerCase() 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) { export function offset(node) {
try { try {