Skip to content

Commit

Permalink
feat: 修复 slider 样式问题 (#1788)
Browse files Browse the repository at this point in the history 
* feat: 修复 slider 样式问题

* feat: 修复 slider 样式问题

* feat: 修复 slider 样式问题

* feat: 修复 slider 样式问题
  • Loading branch information
@honkinglin
honkinglin authored Nov 15, 2022
1 parent aa6510b commit 3e77313
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 55 deletions.
16 changes: 6 additions & 10 deletions src/slider/__tests__/__snapshots__/index.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,9 @@ exports[`Slider [marks] > render right 1`] = `
/>
</div>
<div>
<div>
<div
class="t-slider__stop t-slider__mark-stop"
style="left: 0%;"
/>
<div
class="t-slider__stops"
>
<div
class="t-slider__stop t-slider__mark-stop"
style="left: 8%;"
Expand Down Expand Up @@ -216,11 +214,9 @@ exports[`Slider [vertical-marks] > render right 1`] = `
/>
</div>
<div>
<div>
<div
class="t-slider__stop t-slider__mark-stop"
style="top: calc(100% - 1px);"
/>
<div
class="t-slider__stops"
>
<div
class="t-slider__stop t-slider__mark-stop"
style="top: calc(92% - 1px);"
Expand Down
28 changes: 16 additions & 12 deletions src/slider/slider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -346,14 +346,17 @@ export default mixins(classPrefixMixins).extend({
if (this.markList.length) {
return (
<div>
<div>
{this.markList.map((item, index) => (
<div
class={[`${this.componentName}__stop`, `${this.componentName}__mark-stop`]}
style={this.getStopStyle(item.position)}
key={index}
></div>
))}
<div class={`${this.componentName}__stops`}>
{this.markList.map((item, index) => {
if (item.position === 0 || item.position === 1) return null;
return (
<div
class={[`${this.componentName}__stop`, `${this.componentName}__mark-stop`]}
style={this.getStopStyle(item.position)}
key={index}
></div>
);
})}
</div>
<div class={`${this.componentName}__mark`}>
{this.markList.map((item, key) => (
Expand Down Expand Up @@ -461,10 +464,11 @@ export default mixins(classPrefixMixins).extend({
)}

{this.showSteps && (
<div>
{this.steps.map((item, key) => (
<div class={`${this.componentName}__stop`} key={key} style={this.getStopStyle(item)}></div>
))}
<div class={`${this.componentName}__stops`}>
{this.steps.map((item: any, key) => {
if (item.position === 0 || item.position === 1) return null;
return <div class={`${this.componentName}__stop`} key={key} style={this.getStopStyle(item)}></div>;
})}
</div>
)}
{masks}
Expand Down
48 changes: 18 additions & 30 deletions test/snap/__snapshots__/csr.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84076,11 +84076,9 @@ exports[`csr snapshot test > csr test ./src/slider/_example/marks.vue 1`] = `
/>
</div>
<div>
<div>
<div
class="t-slider__stop t-slider__mark-stop"
style="left: 0%;"
/>
<div
class="t-slider__stops"
>
<div
class="t-slider__stop t-slider__mark-stop"
style="left: 20%;"
Expand Down Expand Up @@ -84198,11 +84196,9 @@ exports[`csr snapshot test > csr test ./src/slider/_example/marks.vue 1`] = `
/>
</div>
<div>
<div>
<div
class="t-slider__stop t-slider__mark-stop"
style="left: 0%;"
/>
<div
class="t-slider__stops"
>
<div
class="t-slider__stop t-slider__mark-stop"
style="left: 20%;"
Expand Down Expand Up @@ -84314,11 +84310,9 @@ exports[`csr snapshot test > csr test ./src/slider/_example/min-and-max.vue 1`]
/>
</div>
<div>
<div>
<div
class="t-slider__stop t-slider__mark-stop"
style="left: 0%;"
/>
<div
class="t-slider__stops"
>
<div
class="t-slider__stop t-slider__mark-stop"
style="left: 100%;"
Expand Down Expand Up @@ -84388,11 +84382,9 @@ exports[`csr snapshot test > csr test ./src/slider/_example/min-and-max.vue 1`]
/>
</div>
<div>
<div>
<div
class="t-slider__stop t-slider__mark-stop"
style="left: 0%;"
/>
<div
class="t-slider__stops"
>
<div
class="t-slider__stop t-slider__mark-stop"
style="left: 100%;"
Expand Down Expand Up @@ -84647,11 +84639,9 @@ exports[`csr snapshot test > csr test ./src/slider/_example/vertical-marks.vue 1
/>
</div>
<div>
<div>
<div
class="t-slider__stop t-slider__mark-stop"
style="top: calc(100% - 1px);"
/>
<div
class="t-slider__stops"
>
<div
class="t-slider__stop t-slider__mark-stop"
style="top: calc(80% - 1px);"
Expand Down Expand Up @@ -84771,11 +84761,9 @@ exports[`csr snapshot test > csr test ./src/slider/_example/vertical-marks.vue 1
/>
</div>
<div>
<div>
<div
class="t-slider__stop t-slider__mark-stop"
style="top: calc(100% - 1px);"
/>
<div
class="t-slider__stops"
>
<div
class="t-slider__stop t-slider__mark-stop"
style="top: calc(80% - 1px);"
Expand Down
Loading

0 comments on commit 3e77313

Please sign in to comment.