parent
310e2bff1e
commit
886829f44d
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@bd/core",
|
||||
"version": "1.5.7",
|
||||
"version": "1.5.8",
|
||||
"type": "module",
|
||||
"description": "百搭UI组件库的核心",
|
||||
"main": "dist/index.js",
|
||||
|
|
|
@ -51,6 +51,7 @@ export const __attr2prop__ = Symbol('attr2prop')
|
|||
export const __clear_update__ = Symbol('clearupdate')
|
||||
export const __children__ = Symbol('children')
|
||||
export const __updated__ = Symbol('updated')
|
||||
export const __in_tree__ = Symbol('intree')
|
||||
|
||||
export const RESET_CSS_STYLE = `* {box-sizing: border-box;margin: 0;padding: 0;}::before,::after {box-sizing: border-box;}`
|
||||
|
||||
|
|
19
src/index.js
19
src/index.js
|
@ -19,7 +19,8 @@ import {
|
|||
__attr2prop__,
|
||||
__clear_update__,
|
||||
__children__,
|
||||
__updated__
|
||||
__updated__,
|
||||
__in_tree__
|
||||
} from './constants.js'
|
||||
import { css, adoptStyles } from './css.js'
|
||||
import { render, html, svg } from './html.js'
|
||||
|
@ -102,6 +103,7 @@ export class Component extends HTMLElement {
|
|||
super()
|
||||
this[__pending__] = false
|
||||
this[__mounted__] = false
|
||||
this[__in_tree__] = false
|
||||
// 这里提前定义一次, 是为了在connectedCallback之前, 就已有赋值时报错的bug
|
||||
this[__changed_props__] = new Map() // 记录一次渲染周期内变化的属性
|
||||
this.root = this.shadowRoot || this.attachShadow({ mode: 'open' })
|
||||
|
@ -215,22 +217,24 @@ export class Component extends HTMLElement {
|
|||
|
||||
// 确认更新到视图
|
||||
[__updated__]() {
|
||||
if (this[__in_tree__] === false) {
|
||||
this[__in_tree__] = document.body.contains(this)
|
||||
}
|
||||
|
||||
if (this[__in_tree__]) {
|
||||
if (this[__pending__]) {
|
||||
try {
|
||||
let props = this[__changed_props__]
|
||||
this[__render__]()
|
||||
this[__feedback__](props)
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
}
|
||||
this[__clear_update__]()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 更新回调反馈
|
||||
[__feedback__](props) {
|
||||
// 初始化时不触发updated回调
|
||||
if (!this[__mounted__]) {
|
||||
if (this[__mounted__] === false) {
|
||||
this[__mounted__] = true
|
||||
this.mounted()
|
||||
} else {
|
||||
|
@ -257,6 +261,9 @@ export class Component extends HTMLElement {
|
|||
mounted() {}
|
||||
unmounted() {}
|
||||
updated() {}
|
||||
render() {
|
||||
return html`<slot></slot>`
|
||||
}
|
||||
|
||||
$on(type, callback, options) {
|
||||
return bind(this, type, callback, options)
|
||||
|
|
Loading…
Reference in New Issue