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

Merge pull request #222 in YR/star-web-components from star-slider-dot to master 

* commit '6fbebc4d5454b7aef071522b731edd9518fbf866':
  BUG: #151665 解决声音音量调节显示错误
This commit is contained in:
汪昌棋 2023-01-12 15:20:59 +08:00
parent 260bca156e 6fbebc4d54
commit 57078300b9
2 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@ export const sharedStyles: CSSResult = css`
:host { :host {
--cover-width: 0; --cover-width: 0;
--dot-move: 0; --dot-move: 0;
--vWidth: var(--auto-16px); --vWidth: var(--auto-8px);
--vHeight: var(--auto-340px); --vHeight: var(--auto-340px);
} }
.content { .content {
@ -45,13 +45,18 @@ export const sharedStyles: CSSResult = css`
height: var(--cover-width); height: var(--cover-width);
left: 0px; left: 0px;
bottom: 0px; bottom: 0px;
border-radius: 0 0 20px 20px; border-radius: 0 0 var(--auto-20px) var(--auto-20px);
background: #404040; background: #404040;
} }
#inner {
width: 96%;
background: none;
}
.progress { .progress {
width: var(--cover-width); width: var(--cover-width);
height: var(--auto-6px); height: var(--auto-6px);
background: #4d4d4d; background: #4d4d4d;
border-radius: var(--auto-5px);
} }
.dot { .dot {
position: absolute; position: absolute;

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

@ -25,6 +25,7 @@ export class StarSlider extends LitElement {
@query('.v-sliderBar') vSliderBar!: HTMLDivElement @query('.v-sliderBar') vSliderBar!: HTMLDivElement
@query('.v-progress') vProgress!: HTMLDivElement @query('.v-progress') vProgress!: HTMLDivElement
@query('.dot') dot!: HTMLDivElement @query('.dot') dot!: HTMLDivElement
@query('#inner') inner!: HTMLDivElement
@query('p') p!: HTMLParagraphElement @query('p') p!: HTMLParagraphElement
@property({type: Boolean}) disabled = false @property({type: Boolean}) disabled = false
@ -92,8 +93,10 @@ export class StarSlider extends LitElement {
<slot name="l-icon"></slot> <slot name="l-icon"></slot>
<slot name="r-icon"></slot> <slot name="r-icon"></slot>
<div class="sliderBar"> <div class="sliderBar">
<div class="progress"></div> <div class="sliderBar" id="inner">
<div class="dot"></div> <div class="progress"></div>
<div class="dot"></div>
</div>
</div> </div>
</div> </div>
` `
@ -164,7 +167,7 @@ export class StarSlider extends LitElement {
} }
} else { } else {
this.style.setProperty('--dot-move', this.proportion + '%') this.style.setProperty('--dot-move', this.proportion + '%')
this.style.setProperty('--cover-width', this.proportion + '%') this.style.setProperty('--cover-width', this.proportion + 1 + '%')
} }
// 重新初始化防止滑块增量 // 重新初始化防止滑块增量
this.startX = evt.touches[0].clientX //手指点下的初始 X&Y 坐标 this.startX = evt.touches[0].clientX //手指点下的初始 X&Y 坐标
@ -197,7 +200,7 @@ export class StarSlider extends LitElement {
this.endValue = Math.ceil(this.proportion) + '' this.endValue = Math.ceil(this.proportion) + ''
if (!this.tick) { if (!this.tick) {
this.style.setProperty('--dot-move', this.proportion + '%') this.style.setProperty('--dot-move', this.proportion + '%')
this.style.setProperty('--cover-width', this.proportion + '%') this.style.setProperty('--cover-width', this.proportion + 1 + '%')
} else { } else {
// tick跳格滑动 // tick跳格滑动
var tickStep = 100 / parseInt(this.step) //分为几格 var tickStep = 100 / parseInt(this.step) //分为几格