diff --git a/src/components/indicator/indicator-page-point.ts b/src/components/indicator/indicator-page-point.ts index 9cdbc80..d1ba3d5 100644 --- a/src/components/indicator/indicator-page-point.ts +++ b/src/components/indicator/indicator-page-point.ts @@ -1,4 +1,4 @@ -import {html, css, LitElement} from 'lit' +import {html, css, LitElement, PropertyValueMap} from 'lit' import {customElement, property} from 'lit/decorators.js' import {classMap} from 'lit/directives/class-map.js' @@ -9,16 +9,13 @@ export class IndicatorPagePoint extends LitElement { @property({type: Boolean, reflect: true}) edit = false @property({type: Boolean, reflect: true}) column = false - updated() { - this.checkProperties() - } + #firstRender = true + + protected shouldUpdate( + _changedProperties: PropertyValueMap | Map + ): boolean { + let isShouldUpdate = true - /** - * 初始值及修改后的值检查 - * - * hasChange 无法影响标签上的属性值显示,且无法访问 this - */ - checkProperties(): void { if (this.total < 1) { console.warn( 'indicator total setted a error num: ', @@ -26,6 +23,7 @@ export class IndicatorPagePoint extends LitElement { ' will be resetted 1' ) this.total = 1 + isShouldUpdate = false } else if (this.total > 15) { console.warn( 'indicator total setted a error num: ', @@ -33,6 +31,7 @@ export class IndicatorPagePoint extends LitElement { ' will be resetted 15' ) this.total = 15 + isShouldUpdate = false } if (this.index < 1) { @@ -42,6 +41,7 @@ export class IndicatorPagePoint extends LitElement { ' will be resetted 1' ) this.index = 1 + isShouldUpdate = false } else if (this.index > this.total) { console.warn( 'indicator index setted a error num: ', @@ -50,7 +50,14 @@ export class IndicatorPagePoint extends LitElement { this.total ) this.index = this.total + isShouldUpdate = false } + + if (this.#firstRender === true) { + this.#firstRender = false + return true + } + return isShouldUpdate } render() { diff --git a/src/test/panels/indicators/indicators.ts b/src/test/panels/indicators/indicators.ts index 675547b..a3b0c12 100644 --- a/src/test/panels/indicators/indicators.ts +++ b/src/test/panels/indicators/indicators.ts @@ -35,15 +35,8 @@ export class PanelIndicators extends LitElement { case 'index--': this.index-- break - case 'edit-add': - Array.prototype.forEach.call(this.myindicators, (e) => - e.setAttribute('edit', '') - ) - break - case 'edit-remove': - Array.prototype.forEach.call(this.myindicators, (e) => - e.removeAttribute('edit') - ) + case 'toggle-edit': + this.edit = !this.edit break } } @@ -81,14 +74,14 @@ export class PanelIndicators extends LitElement { - - +
@@ -96,12 +89,14 @@ export class PanelIndicators extends LitElement { class="myindicator" total=${this.total} index=${this.index} + ?edit=${this.edit} column >