vue-slide-bar滑动组件_jq960素材网

vue-slide-bar滑动组件

时间:2018-08-21 22:05  来源:未知   作者:admin   点击:735次

插件介绍

这是一个简便的滑动条组件，可以用来表示时间轴，距离，进行状态等。

安装

通过npm安装

npm install vue-slide-bar --save

插件应用

简单使用

<template>
  <div>
    <VueSlideBar v-model="value1"/>
    <h2>Value: {{ value }}</h2>
    <button type="button" name="button" @click="value = 90">
      +    </button>
    <button type="button" name="button" @click="value = 20">
      -    </button>
  </div>
</template>

<script> 
import VueSlideBar from 'vue-slide-bar'
export default {

    data() {
        return {
            value:
            50
        }
    },
    components: {
        VueSlideBar
    }
} 

</script>

使用label

<template>
  <div>
    <VueSlideBar
      v-model="slider.value"
      :data="slider.data"
      :range="slider.range"
      :processStyle="{ backgroundColor: '#d8d8d8' }"
      @callbackRange="callbackRange">
      <template slot="tooltip" slot-scope="tooltip">
        <img src="static/images/rectangle-slider.svg">
      </template>
    </VueSlideBar>
    <h2>Value: {{slider.value}}</h2>
    <h2>Label: {{rangeValue.label}}</h2>
  </div>
</template>
<script>
import VueSlideBar from 'vue-slide-bar'
export default {
    data() {
      return {
        rangeValue:
        {},
        slider: {
          value: 45,
          data: [15, 30, 45, 60, 75, 90, 120],
          range: [{
            label: '15 mins'
          },
          {
            label: '30 mins',
            isHide: true
          },
          {
            label: '45 mins'
          },
          {
            label: '1 hr',
            isHide: true
          },
          {
            label: '1 hr 15 mins'
          },
          {
            label: '1 hr 30 mins',
            isHide: true
          },
          {
            label: '2 hrs'
          }]
        }
      }
    },
    methods: {
      callbackRange(val) {
        this.rangeValue = val
      }
    },
    components: {
      VueSlideBar
    }
  } 
 </script>

自定义样式

<template>
  <div>
    <V<VueSlideBar
      v-model="value2"
      :min="1"
      :max="10"
      :processStyle="slider.processStyle"
      :lineHeight="slider.lineHeight"
      :tooltipStyles="{ backgroundColor: 'red', borderColor: 'red' }">
    </VueSlideBar>
    <h2>Value: {{value2}}</h2>
  </div>
</template>

<script> 
import VueSlideBar from 'vue-slide-bar'
export default {
    data() {
      return {
        value2:
        8,
        slider: {
          lineHeight: 10,
          processStyle: {
            backgroundColor: 'red'
          }
        }
      }
    },
    components: {
      VueSlideBar
    }
  } 
</script>

使用loading

<template>
  <div>
    <VueSlideBar
      v-model="loading"
      :showTooltip="false"
      :lineHeight="20"
      :isDisabled="true"/>
    

    <button type="button" name="button" @click="startLoad()">
      Click to start load    </button>
    <h2>Loading: {{loading}}%</h2>
  </div>
</template>

<script> 
import VueSlideBar from 'vue-slide-bar'
export default {
        data() {
            return {
                loader:
                null,
                loading: 0
            }
        },
        methods: {
            startLoad() {
                this.loader = setInterval(() = >{
                    this.loading++
                    if (this.loading === 100) {
                        console.log('clear', this.loading) clearInterval(this.loader)
                    }
                },
                100)
            }
        }
        components: {
            VueSlideBar
        }
    } 
</script>

组件参数

名称

类型

默认值

说明

min

Number

0

最小值

max

Number

100

最大值

process-style

Object

-

自定义bar的样式

tooltip-style

Object

-

自定义提示信息的样式

value

Number,Array

0

初始值

data

Array

-

自定义数值

is-disabled

Boolean

false

是否禁用组件

show-tooltip

Boolean

true

是否显示提示信息

icon-width

Number

20

图标宽度

line-height

Number

5

行高

speed

Number

0.5

动画时间

事件

名称

参数

说明

callbackRange

-

当数值改变时触发该事件返回改变后的数值

(责任编辑：admin)

Original url: Access
Created at: 2019-09-24 21:44:22
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论