openkylin
/
ura-components
mirror of https://gitee.com/openkylin/ura-components.git
9
0
Fork 0
Code Issues Projects Releases Wiki Activity

TASK: #124025 slider优化

This commit is contained in:
duanzhijiang 2022-11-26 18:53:51 +08:00
parent 5914cd5965
commit 6f17d54a7c
4 changed files with 79 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/base/auto-px-style.ts
View File

@ -75,6 +75,7 @@ export const autoPxStyle: CSSResult = css`
--auto-112px: calc(112px / var(--hostDevicePixelRatio));
--auto-116px: calc(116px / var(--hostDevicePixelRatio));
--auto-118px: calc(118px / var(--hostDevicePixelRatio));
--auto-120px: calc(120px / var(--hostDevicePixelRatio));
--auto-124px: calc(124px / var(--hostDevicePixelRatio));
--auto-128px: calc(128px / var(--hostDevicePixelRatio));
--auto-129px: calc(129px / var(--hostDevicePixelRatio));
@ -93,6 +94,7 @@ export const autoPxStyle: CSSResult = css`
--auto-202px: calc(202px / var(--hostDevicePixelRatio));
--auto-206px: calc(206px / var(--hostDevicePixelRatio));
--auto-208px: calc(208px / var(--hostDevicePixelRatio));
--auto-220px: calc(220px / var(--hostDevicePixelRatio));
--auto-222px: calc(222px / var(--hostDevicePixelRatio));
--auto-254px: calc(254px / var(--hostDevicePixelRatio));
--auto-260px: calc(260px / var(--hostDevicePixelRatio));

63
src/components/slider/slider-styles.ts
View File

@ -1,19 +1,18 @@
import {css, CSSResult} from 'lit'
export const sharedStyles: CSSResult = css`
:host {
--cover-width: 0px;
--dot-move: 0px;
--vWidth: 8px;
--vHeight: 200px;
--cover-width: 0;
--dot-move: 0;
--vWidth: var(--auto-8px);
--vHeight: var(--auto-200px);
}
.content {
height: 2px;
margin: 0px 50px;
height: var(--auto-6px);
margin: 0 var(--auto-120px);
position: relative;
top: 50%;
transform: translateY(-50%);
padding: 8px;
border-radius: 5px;
padding: var(--auto-10px) 0;
}
.v-content {
position: relative;
@ -39,12 +38,9 @@ export const sharedStyles: CSSResult = css`
.sliderBar {
position: absolute;
width: 100%;
height: 6px;
left: 0px;
right: 0px;
top: calc(50% - 6px / 2);
height: var(--auto-6px);
background: rgba(0, 0, 0, 0.08);
border-radius: 8px;
border-radius: var(--auto-5px);
}
.v-progress {
position: absolute;
@ -56,21 +52,16 @@ export const sharedStyles: CSSResult = css`
background: #404040;
}
.progress {
position: absolute;
width: var(--cover-width);
height: 6px;
left: 0px;
right: 0px;
top: calc(50% - 6px / 2);
height: var(--auto-6px);
background: #4d4d4d;
border-radius: 5px 0 0 5px;
}
.dot {
position: absolute;
left: var(--dot-move);
width: 20px;
height: 20px;
top: calc(50% - 20px / 2);
width: var(--auto-26px);
height: var(--auto-26px);
top: calc(50% - var(--auto-26px) / 2);
background: #544f4f;
border-radius: 50%;
z-index: 1;
@ -82,8 +73,8 @@ export const sharedStyles: CSSResult = css`
}
p {
position: absolute;
right: 5px;
top: 1px;
right: var(--auto-5px);
top: var(--auto-1px);
}
:host([disabled]) .progress {
background: #c0c0c0;
@ -100,7 +91,7 @@ export const sharedStyles: CSSResult = css`
:host([tick]) .sliderBar {
background: #c0c0c0;
border-radius: 0 0 0 0;
height: 4px;
height: var(--auto-4px);
}
:host([disabled]) .dot {
background: #c0c0c0;
@ -115,19 +106,19 @@ export const sharedStyles: CSSResult = css`
position: absolute;
left: calc(var(--i) * 100%);
top: calc(50% - 10px / 2);
width: 3px;
height: 10px;
width: var(--auto-3px);
height: var(--auto-10px);
background-color: #d5d5d5;
border-radius: 3px;
border-radius: var(--auto-3px);
}
/*
::slotted(.icon)::before {
font-size: 27px;
font-size: var(--auto-27px);
font-family: 'gaia-icons';
content: attr(data-icon);
text-align: center;
position: relative;
top: 357px;
top: var(--auto-357px);
}*/
::slotted([slot='icon']) {
position: absolute;
@ -142,23 +133,23 @@ export const sharedStyles: CSSResult = css`
}
::slotted([slot='l-icon']) {
position: absolute;
left: -33px;
top: -6px;
right: var(--auto-33px);
bottom: var(--auto-6px);
}
::slotted([slot='l-icon'])::before {
font-size: 25px;
font-size: var(--auto-25px);
font-family: 'gaia-icons';
content: attr(data-icon);
}
::slotted([slot='r-icon']) {
position: absolute;
right: -33px;
top: -6px;
left: var(--auto-33px);
bottom: var(--auto-6px);
}
::slotted([slot='r-icon'])::before {
font-size: 25px;
font-size: var(--auto-25px);
font-family: 'gaia-icons';
content: attr(data-icon);
}

53
src/components/slider/slider.ts
View File

@ -13,7 +13,7 @@ function getType(str: string) {
}
@customElement('star-slider')
export class StarSlider extends LitElement {
_cover: string = '0'
_endValue: string = '0'
_vHeight: string = ''
public static override get styles(): CSSResultArray {
return [sharedStyles]
@ -43,27 +43,26 @@ export class StarSlider extends LitElement {
@property({type: Number}) dotL = 0
@property({type: Number}) proportion = 0
@property({type: Number}) barX = 0
@property({type: String}) endValue = ''
@property({type: String}) step = ''
@property({type: String})
get cover() {
return this._cover
get endValue() {
return this._endValue
}
set cover(value: string) {
set endValue(value: string) {
const type = getType(value)
if (type == 'percent' && !isNaN(+value)) {
value += '%'
} else if (type == 'invalid') {
value = this._cover
value = this._endValue
return
}
this.style.setProperty('--cover-width', value)
this._cover = value
this.style.setProperty('--dot-move', this._cover)
this._endValue = value
this.style.setProperty('--dot-move', this._endValue)
}
@property({type: String})
get vHeight() {
console.log('this._vHeight', this._vHeight)
// console.log('this._vHeight', this._vHeight)
return this._vHeight
}
set vHeight(value: string) {
@ -131,8 +130,7 @@ export class StarSlider extends LitElement {
this.touchX -
this.sliderBar.getBoundingClientRect().left -
this.dot.offsetWidth * 0.5
// this.barWidth = this.sliderBar.offsetWidth
this.barWidth = this.sliderBar.offsetWidth - this.dot.offsetWidth
this.barWidth = this.sliderBar.offsetWidth
if (this.barX < 0) {
this.barX = 0
}
@ -156,11 +154,8 @@ export class StarSlider extends LitElement {
}
}
} else {
this.style.setProperty('--dot-move', this.barX + 'px')
this.style.setProperty(
'--cover-width',
(this.barWidth * Math.ceil(this.proportion)) / 100 + 'px'
)
this.style.setProperty('--dot-move', this.proportion + '%')
this.style.setProperty('--cover-width', this.proportion + '%')
}
// 重新初始化防止滑块增量
this.startX = evt.touches[0].clientX //手指点下的初始 X&Y 坐标
@ -193,11 +188,8 @@ export class StarSlider extends LitElement {
//取整
this.endValue = Math.ceil(this.proportion) + ''
if (!this.tick) {
this.style.setProperty('--dot-move', this.newX + 'px')
this.style.setProperty(
'--cover-width',
(this.barWidth * Math.ceil(this.proportion)) / 100 + 'px'
)
this.style.setProperty('--dot-move', this.proportion + '%')
this.style.setProperty('--cover-width', this.proportion + '%')
} else {
// tick跳格滑动
var tickStep = 100 / parseInt(this.step) //分为几格
@ -232,10 +224,11 @@ export class StarSlider extends LitElement {
})
)
} else {
console.log('endValue', this.endValue.replace('%', ''))
this.dispatchEvent(
new CustomEvent('star-slider-change', {
detail: {
value: this.endValue,
value: this.endValue.replace('%', ''),
},
bubbles: true,
composed: true,
@ -256,14 +249,16 @@ export class StarSlider extends LitElement {
this.dotL = this.vSliderBar.getBoundingClientRect().bottom - this.startY //点击后的黑条长度
//按压音量条变宽
this.vSliderBar.style.setProperty('--vWidth', '16px')
this.vProgress.style.setProperty('--vWidth', '16px')
this.vSliderBar.style.setProperty('--vWidth', 'var(--auto-16px)')
this.vProgress.style.setProperty('--vWidth', 'var(--auto-16px)')
//点击跳转
this.proportion = (this.dotL / this.barWidth) * 100
this.endValue = Math.ceil(this.proportion) + ''
this.style.setProperty(
'--cover-width',
(this.barWidth * Math.ceil(this.proportion)) / 100 + 'px'
'var(--auto-' +
(this.barWidth * Math.ceil(this.proportion)) / 100 +
'px)'
)
}
}
@ -277,24 +272,22 @@ export class StarSlider extends LitElement {
//判断最大值和最小值
this.newY = this.dotL + this.moveY
if (this.newY < 0) {
// console.log('到底了')
this.newY = 0
}
if (this.newY >= this.barWidth) {
// console.log('超了')
this.newY = this.barWidth
}
//计算比例
this.proportion = (this.newY / this.barWidth) * 100
//取整
this.endValue = Math.ceil(this.proportion) + ''
this.style.setProperty('--cover-width', this.newY + 'px')
this.style.setProperty('--cover-width', 'var(--auto-' + this.newY + 'px)')
}
}
private touchEndVertical(evt: TouchEvent): string | void {
if (!this.disabled && (evt.target as Element).slot !== 'icon') {
this.vProgress.style.setProperty('--vWidth', '8px')
this.vSliderBar.style.setProperty('--vWidth', '8px')
this.vProgress.style.setProperty('--vWidth', 'var(--auto-8px)')
this.vSliderBar.style.setProperty('--vWidth', 'var(--auto-8px)')
this.dispatchEvent(
new CustomEvent('star-slider-change', {
detail: {

53
src/test/panels/slider/slider.ts
View File

@ -17,20 +17,21 @@ export class PanelSlider extends LitElement {
return html`
<div class="content">
<h4>vertical</h4>
<div style="background-color: #fff;float:left; border-radius:10px;margin-left:50px;height:250px;width:50px;">
<star-slider vertical cover="20">
<div style="background-color: #fff;float:left; border-radius:10px;margin-left:50px;height:250px;width:50px;display: flex;
justify-content: center;">
<star-slider vertical endValue="20">
<div slot="icon" data-icon="alarm"></div>
</star-slider>
</div>
<div style="background-color: #fff; border-radius:10px;float:left;margin-left:50px;height:200px;width:50px;">
<star-slider vertical cover="20%" vHeight="150px">
<star-slider vertical endValue="20%" vHeight="150px">
<div slot="icon" data-icon="alarm"></div>
</star-slider>
</div>
<div style="background-color: #fff; border-radius:10px;margin-left:250px;height:300px;width:50px;">
<star-slider vertical cover="100px" vHeight="250px">
<star-slider vertical endValue="100px" vHeight="250px">
<div slot="icon" data-icon="alarm"></div>
</star-slider>
</div>
@ -53,28 +54,28 @@ export class PanelSlider extends LitElement {
</star-slider>
</div>
<h4>cover - 初始覆盖长度</h4>
<h4>endValue - 初始覆盖长度</h4>
<div style="background-color: #fff; border-radius:10px;height:50px;margin-top:20px">
<star-slider cover="50"></star-slider>
<star-slider endValue="50"></star-slider>
</div>
<div style="background-color: #fff; border-radius:10px;height:50px;margin-top:20px">
<star-slider cover="30"></star-slider>
<star-slider endValue="30"></star-slider>
</div>
<h4>disabled</h4>
<div style="background-color: #fff; border-radius:10px;height:50px;margin-top:20px">
<star-slider disabled cover="30%"></star-slider>
<star-slider disabled endValue="30%"></star-slider>
</div>
<div style="background-color: #fff; border-radius:10px;height:50px;margin-top:20px">
<star-slider disabled cover="70%"></star-slider>
<star-slider disabled endValue="70%"></star-slider>
</div>
<h4>unfilled - 无覆盖</h4>
<div style="background-color: #fff; border-radius:10px;height:50px;margin-top:20px">
<star-slider unfilled cover="20%"></star-slider>
<star-slider unfilled endValue="20%"></star-slider>
</div>
<div style="background-color: #fff; border-radius:10px;height:50px;margin-top:20px">
<star-slider unfilled cover="40%"></star-slider>
<star-slider unfilled endValue="40%"></star-slider>
</div>
<h4>tick - 跳格滑动</h4>
<h5>step="10"</h5>
@ -83,27 +84,27 @@ export class PanelSlider extends LitElement {
</div>
<h5>step="20"</h5>
<div style="background-color: #fff; border-radius:10px;height:50px;margin-top:20px">
<star-slider tick step="20" cover="20%"></star-slider>
<star-slider tick step="20" endValue="20%"></star-slider>
</div>
<h5>step="50"</h5>
<div style="background-color: #fff; border-radius:10px;height:50px;margin-top:20px">
<star-slider tick step="50" cover="50%"></star-slider>
<star-slider tick step="50" endValue="50%"></star-slider>
</div>
<h5>step="25"</h5>
<div style="background-color: #fff; border-radius:10px;height:50px;margin-top:20px">
<star-slider tick step="25" disabled cover="25%"></star-slider>
<star-slider tick step="25" disabled endValue="25%"></star-slider>
</div>
</div>
<!-- <div style="height:300px">
<star-slider id="a" vertical disabled cover="30%">
<star-slider id="a" vertical disabled endValue="30%">
<p data-icon="bluetooth-a2dp"></p>
</star-slider>
</div>
<div style="height:150px">
<star-slider id="b" vertical cover="70%">
<star-slider id="b" vertical endValue="70%">
<p data-icon="alarm-clock"></p>
</star-slider>
</div> -->
@ -111,29 +112,29 @@ export class PanelSlider extends LitElement {
<star-slider>
<p class="left" data-icon="brightness"></p>
</star-slider>
<h4>cover - 初始覆盖长度</h4>
<star-slider cover="150px">
<h4>endValue - 初始覆盖长度</h4>
<star-slider endValue="150px">
<p data-icon="brightness"></p>
</star-slider>
<star-slider cover="50%">
<star-slider endValue="50%">
<p data-icon="brightness"></p>
</star-slider>
<h4>disabled</h4>
<star-slider disabled cover="30%"></star-slider>
<star-slider disabled cover="70%"></star-slider>
<star-slider disabled endValue="30%"></star-slider>
<star-slider disabled endValue="70%"></star-slider>
<h4>unfilled - 无覆盖</h4>
<star-slider unfilled cover="20%"></star-slider>
<star-slider unfilled cover="40%"></star-slider>
<star-slider unfilled endValue="20%"></star-slider>
<star-slider unfilled endValue="40%"></star-slider>
<h4>tick</h4>
<h5>step="10"</h5>
<star-slider tick step="10"></star-slider>
<h5>step="20"</h5>
<star-slider tick step="20" cover="20%"></star-slider>
<star-slider tick step="20" endValue="20%"></star-slider>
<h5>step="50"</h5>
<star-slider tick step="50" cover="50%"></star-slider>
<star-slider tick step="50" endValue="50%"></star-slider>
<h5>step="25"</h5>
<star-slider tick step="25" disabled cover="25%"></star-slider>
<star-slider tick step="25" disabled endValue="25%"></star-slider>
</div>
<star-slider>
<p class="left" data-icon="brightness"></p>