|
|
@@ -1,12 +1,12 @@
|
|
|
<template>
|
|
|
- <div class="tel-input-demo demo-list">
|
|
|
+ <div class="slider-demo demo-list">
|
|
|
<h4>基本用法</h4>
|
|
|
<div>
|
|
|
<nut-cell>
|
|
|
<span slot="title"><nut-slider v-model="val1" :range="[0,10]"></nut-slider></span>
|
|
|
</nut-cell>
|
|
|
<nut-cell>
|
|
|
- <span slot="title">Value值: {{val1}}</span>
|
|
|
+ <span slot="title">Value: {{val1}}</span>
|
|
|
</nut-cell>
|
|
|
</div>
|
|
|
<h4>拖动时展示标签</h4>
|
|
|
@@ -15,7 +15,7 @@
|
|
|
<span slot="title"><nut-slider v-model="val2" :range="[0,100]" :showLabel="true"></nut-slider></span>
|
|
|
</nut-cell>
|
|
|
<nut-cell>
|
|
|
- <span slot="title">Value值: {{val2}}</span>
|
|
|
+ <span slot="title">Value: {{val2}}</span>
|
|
|
</nut-cell>
|
|
|
</div>
|
|
|
<h4>一直展示标签</h4>
|
|
|
@@ -24,7 +24,7 @@
|
|
|
<span slot="title"><nut-slider v-model="val3" :range="[0,100]" :showLabel="true" :showLabelAlways="true"></nut-slider></span>
|
|
|
</nut-cell>
|
|
|
<nut-cell>
|
|
|
- <span slot="title">Value值: {{val3}}</span>
|
|
|
+ <span slot="title">Value: {{val3}}</span>
|
|
|
</nut-cell>
|
|
|
</div>
|
|
|
<h4>两端显式可选取范围</h4>
|
|
|
@@ -33,7 +33,7 @@
|
|
|
<span slot="title"><nut-slider v-model="val4" :range="[-50,50]" :showLabel="true" :showRangeTxt="true"></nut-slider></span>
|
|
|
</nut-cell>
|
|
|
<nut-cell>
|
|
|
- <span slot="title">Value值: {{val4}}</span>
|
|
|
+ <span slot="title">Value: {{val4}}</span>
|
|
|
</nut-cell>
|
|
|
</div>
|
|
|
<h4>设置分段数(stage=20)</h4>
|
|
|
@@ -42,7 +42,7 @@
|
|
|
<span slot="title"><nut-slider v-model="val5" :range="[0,100]" :showLabel="true" :showRangeTxt="true" :stage="5"></nut-slider></span>
|
|
|
</nut-cell>
|
|
|
<nut-cell>
|
|
|
- <span slot="title">Value值: {{val5}}</span>
|
|
|
+ <span slot="title">Value: {{val5}}</span>
|
|
|
</nut-cell>
|
|
|
</div>
|
|
|
<h4>自定义Class</h4>
|
|
|
@@ -51,7 +51,7 @@
|
|
|
<span slot="title"><nut-slider class="my-slider" v-model="val6" :range="[0,100]"></nut-slider></span>
|
|
|
</nut-cell>
|
|
|
<nut-cell>
|
|
|
- <span slot="title">Value值: {{val6}}</span>
|
|
|
+ <span slot="title">Value: {{val6}}</span>
|
|
|
</nut-cell>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -74,6 +74,13 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
+.slider-demo{
|
|
|
+ .nut-cell:first-child{
|
|
|
+ .nut-cell-title{
|
|
|
+ padding:0 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
.nut-slider.my-slider {
|
|
|
.nut-slider-box {
|
|
|
height: 6px;
|