TASK: #105604-add indicator-page-point componet
This commit is contained in:
wangchangqi
parent
46e9129ec3
commit
6853c10a89
|
|
@ -0,0 +1,121 @@
|
|||
import {html, css, LitElement} from 'lit'
|
||||
import {customElement, property} from 'lit/decorators.js'
|
||||
import {classMap} from 'lit/directives/class-map.js'
|
||||
|
||||
@customElement('indicator-page-point')
|
||||
export class IndicatorPagePoint extends LitElement {
|
||||
@property({type: Number, reflect: true}) total = 1
|
||||
@property({type: Number, reflect: true}) index = 1
|
||||
@property({type: Boolean, reflect: true}) edit = false
|
||||
@property({type: Boolean, reflect: true}) column = false
|
||||
|
||||
updated() {
|
||||
this.checkProperties()
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始值及修改后的值检查
|
||||
*
|
||||
* hasChange 无法影响标签上的属性值显示，且无法访问 this
|
||||
*/
|
||||
checkProperties(): void {
|
||||
if (this.total < 1) {
|
||||
console.error(
|
||||
'indicator total setted a error num: ',
|
||||
this.total,
|
||||
' will be resetted 1'
|
||||
)
|
||||
this.total = 1
|
||||
} else if (this.total > 15) {
|
||||
console.error(
|
||||
'indicator total setted a error num: ',
|
||||
this.total,
|
||||
' will be resetted 15'
|
||||
)
|
||||
this.total = 15
|
||||
}
|
||||
|
||||
if (this.index < 1) {
|
||||
console.error(
|
||||
'indicator index setted a error num: ',
|
||||
this.index,
|
||||
' will be resetted 1'
|
||||
)
|
||||
this.index = 1
|
||||
} else if (this.index > this.total) {
|
||||
console.error(
|
||||
'indicator index setted a error num: ',
|
||||
this.index,
|
||||
' will be resetted',
|
||||
this.total
|
||||
)
|
||||
this.index = this.total
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const all = []
|
||||
const classes = {
|
||||
edit: this.edit,
|
||||
column: this.column,
|
||||
}
|
||||
|
||||
for (let i = 0; i < this.total; i++) {
|
||||
all.push(html`
|
||||
<div class=${this.index - 1 === i ? 'active' : 'inactive'}></div>
|
||||
`)
|
||||
}
|
||||
|
||||
return html`
|
||||
<section class=${classMap(classes)}>${all}</section>
|
||||
`
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
:host {
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
margin: auto;
|
||||
}
|
||||
:host([column]) {
|
||||
display: inline-flex;
|
||||
width: auto;
|
||||
}
|
||||
section {
|
||||
display: flex;
|
||||
margin: auto;
|
||||
border-radius: 10px;
|
||||
padding: 0px 5px;
|
||||
margin: 3px auto;
|
||||
}
|
||||
section.edit {
|
||||
background: #ddd;
|
||||
}
|
||||
div {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #aaaaaaaa;
|
||||
margin: 8px 6px 8px 6px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
div.active {
|
||||
background: #fff;
|
||||
}
|
||||
section.column {
|
||||
flex-direction: column;
|
||||
margin: auto 3px;
|
||||
padding: 3px 0px;
|
||||
}
|
||||
section.column div {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
margin: 4px 4px;
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'indicator-page-point': IndicatorPagePoint
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
import {html, css, LitElement, CSSResultArray} from 'lit'
|
||||
import {customElement, queryAll, state} from 'lit/decorators.js'
|
||||
import {sharedStyles} from '../shared-styles'
|
||||
import '../../../components/indicator/indicator-page-point'
|
||||
import { IndicatorPagePoint } from '../../../components/indicator/indicator-page-point'
|
||||
|
||||
@customElement('panel-indicators')
|
||||
export class PanelIndicators extends LitElement {
|
||||
@state() total = 1
|
||||
@state() index = 1
|
||||
@state() edit = false
|
||||
|
||||
updated() {
|
||||
this.total = this.total < 1
|
||||
? 1
|
||||
: this.total > 15
|
||||
? 15
|
||||
: this.total
|
||||
this.index = this.index < 1
|
||||
? 1
|
||||
: this.index > this.total
|
||||
? this.total
|
||||
: this.index
|
||||
}
|
||||
|
||||
@queryAll('.myindicator')private myindicators!: IndicatorPagePoint
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<h3>基本展示</h3>
|
||||
<indicator-page-point total=3 index=-1 edit></indicator-page-point>
|
||||
<div>
|
||||
<div>
|
||||
<indicator-page-point total=3 index=-1 edit column></indicator-page-point>
|
||||
<indicator-page-point total=5 index=2 column></indicator-page-point>
|
||||
</div>
|
||||
</div>
|
||||
<indicator-page-point total=5 index=2></indicator-page-point>
|
||||
<indicator-page-point total=15 index=2></indicator-page-point>
|
||||
<h3>编辑状态</h3>
|
||||
<indicator-page-point total=3 index=1 edit></indicator-page-point>
|
||||
<indicator-page-point total=5 index=2 edit></indicator-page-point>
|
||||
<indicator-page-point total=15 index=2 edit></indicator-page-point>
|
||||
<h3>切换状态</h3>
|
||||
<div>
|
||||
<div>
|
||||
<button @click=${()=>this.total++}>total++</button>
|
||||
<button @click=${()=>this.total--}>total--</button>
|
||||
<button @click=${()=>this.index++}>index++</button>
|
||||
<button @click=${()=>this.index--}>index--</button>
|
||||
<button @click=${()=>
|
||||
Array.prototype.forEach.call(
|
||||
this.myindicators,
|
||||
e => e.setAttribute('edit', ''))
|
||||
}>add edit</button>
|
||||
<button @click=${()=>
|
||||
Array.prototype.forEach.call(
|
||||
this.myindicators,
|
||||
e => e.removeAttribute('edit'))
|
||||
}>remove edit</button>
|
||||
</div>
|
||||
</div>
|
||||
<indicator-page-point class='myindicator' total=${this.total} index=${this.index}></indicator-page-point>
|
||||
<div>
|
||||
<div>
|
||||
<indicator-page-point class='myindicator' total=${this.total} index=${this.index} column></indicator-page-point>
|
||||
<indicator-page-point class='myindicator' total=${this.total} index=${this.index} column></indicator-page-point>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
public static override get styles(): CSSResultArray {
|
||||
return [
|
||||
sharedStyles,
|
||||
css`
|
||||
h3 {
|
||||
text-align: center;
|
||||
}
|
||||
div {
|
||||
display: flex;
|
||||
margin: auto;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
button {
|
||||
margin: auto;
|
||||
}
|
||||
`
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'panel-indicators': PanelIndicators
|
||||
}
|
||||
}
|
||||
|
|
@ -6,6 +6,7 @@ import {sharedStyles} from './shared-styles'
|
|||
import './about/about'
|
||||
import './icon/icon'
|
||||
import './general/general'
|
||||
import './indicators/indicators'
|
||||
|
||||
type SEID = String
|
||||
|
||||
|
|
@ -105,10 +106,10 @@ export class PanelRoot extends LitElement {
|
|||
<hr />
|
||||
<star-li
|
||||
type=${LiType.ICON_LABEL}
|
||||
label="辅助"
|
||||
label="页面圆点指示器"
|
||||
icon="accessibility"
|
||||
iconcolor="blue"
|
||||
href="#about"
|
||||
href="#indicators"
|
||||
></star-li>
|
||||
<hr />
|
||||
<star-li
|
||||
|
|
|
|||
Loading…
Reference in New Issue