From 289c7142efb887d2ab3fedb4602e1291ec1eca6a Mon Sep 17 00:00:00 2001 From: yutent Date: Fri, 11 Aug 2023 14:16:13 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=8A=A8=E7=94=BB=E9=85=8D?= =?UTF-8?q?=E7=BD=AE,=20=E5=A2=9E=E5=8A=A0=E7=AB=8B=E5=88=BB=E6=89=A7?= =?UTF-8?q?=E8=A1=8C=E8=AE=BE=E5=AE=9A;=20=E4=BF=AE=E5=A4=8Dprops=E5=A3=B0?= =?UTF-8?q?=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/html.js | 9 +++++---- src/index.js | 26 +++++++++++++++++--------- 2 files changed, 22 insertions(+), 13 deletions(-) diff --git a/src/html.js b/src/html.js index ee217a9..533db1a 100644 --- a/src/html.js +++ b/src/html.js @@ -584,7 +584,7 @@ class AnimPart extends AttributePart { super(...args) } - commitValue({ type = 'fade', duration, custom } = {}) { + commitValue({ type = 'fade', duration, custom, immediate = false } = {}) { let fromto = MODES[type] || MODES.fade if (custom) { @@ -593,6 +593,7 @@ class AnimPart extends AttributePart { this.element.$animate = function (out = false) { return animate.call(this, duration, fromto, out) } + this.element.$animate.immediate = immediate } } @@ -719,10 +720,10 @@ export function html(strings, ...values) { values } } -export function raw(str) { - let strings = [str] +export function raw(str, ...args) { + let strings = args.length ? str.split('%s') : [str] strings.raw = strings - return html(strings) + return html(strings, ...args) } export function svg(strings, ...values) { return { diff --git a/src/index.js b/src/index.js index 1a5b9e8..a3f373f 100644 --- a/src/index.js +++ b/src/index.js @@ -62,15 +62,25 @@ export class Component extends HTMLElement { static parseAnim() { if (this.hasOwnProperty('animation')) { - let { type = 'fade', duration } = this.animation + let { + type = 'fade', + duration, + custom, + immediate = false + } = this.animation + let fromto = MODES[type] || MODES.fade + if (custom) { + fromto = custom + } Object.defineProperty(this.prototype, '$animate', { value(out) { if (this[__mounted__]) { - return animate.call(this, duration, MODES[type], out) + return animate.call(this, duration, fromto, out) } }, enumerable: false }) + this.prototype.$animate.immediate = immediate delete this.animation } } @@ -98,7 +108,6 @@ export class Component extends HTMLElement { k = camelize(k) } this[__props__].set(k, options) - // this.createProperty(k, options) } } @@ -133,6 +142,7 @@ export class Component extends HTMLElement { for (let [prop, options] of this.constructor[__props__]) { this.createProperty(prop, options) + this.$requestUpdate(prop) } this.created() @@ -200,12 +210,7 @@ export class Component extends HTMLElement { #init() { // 这里重新赋值一次, 用于清除掉因为 observer 修正产生的变化 this[__changed_props__] = new Map() - - // 若无定义props时, 手动执行一次渲染 - if (this[__pending__] === false) { - this[__pending__] = true - nextTick(_ => this.#confirmUpdate()) - } + this.$requestUpdate() } #getPropOptions(name) { @@ -336,6 +341,9 @@ export class Component extends HTMLElement { // 初始化时不触发updated回调 if (this[__mounted__] === false) { this[__mounted__] = true + if (this.$animate?.immediate) { + this.$animate() + } this.mounted() } else { this.updated(props)