Blame view

test/routers/slider.vue 1 KB
4ec205b6   梁灏   add Tag UI
1
  <template>
69576f47   梁灏   add Slider component
2
3
      <div style="width: 400px;margin:100px;">
          {{ value }}
73772536   梁灏   optimize Slider t...
4
          <Slider @on-change="change" :step="15"></Slider>
5709f32e   梁灏   Slider support hi...
5
          <Slider :value="40" :tip-format="format"></Slider>
41d90ccf   梁灏   Slider can show s...
6
          <Slider :value.sync="value" show-input show-stops range @on-change="change" :step="13"></Slider>
69576f47   梁灏   add Slider component
7
8
9
          <!--<Slider :max="10"></Slider>-->
          <!--<Slider :step="13"></Slider>-->
          <!--<Slider :step="13" :max="60"></Slider>-->
b79b53ea   梁灏   Icon add color prop
10
          <Icon type="checkmark-circled" size="40" color="#f60"></Icon>
f2be585e   梁灏   optimize Slider w...
11
          <p>附近的首付款是东方红看就是</p>
69576f47   梁灏   add Slider component
12
      </div>
4ec205b6   梁灏   add Tag UI
13
14
  </template>
  <script>
b79b53ea   梁灏   Icon add color prop
15
      import { Slider, Icon } from 'iview';
4ec205b6   梁灏   add Tag UI
16
      export default {
b79b53ea   梁灏   Icon add color prop
17
          components: { Slider, Icon },
36febc3c   梁灏   add Slider
18
19
          data () {
              return {
69576f47   梁灏   add Slider component
20
                  value: [20, 50]
36febc3c   梁灏   add Slider
21
22
              }
          },
4ec205b6   梁灏   add Tag UI
23
          methods: {
36febc3c   梁灏   add Slider
24
              format (val) {
5709f32e   梁灏   Slider support hi...
25
                  return null;
36febc3c   梁灏   add Slider
26
                  return `进度:${val}%`
69576f47   梁灏   add Slider component
27
28
              },
              change (data) {
5709f32e   梁灏   Slider support hi...
29
  //                console.log(data)
9dde24b6   梁灏   add LoadingBar co...
30
              }
4ec205b6   梁灏   add Tag UI
31
32
          }
      }
e355dd49   梁灏   add Select Component
33
  </script>