9.11 滑动柄（Slider）

midea-seek-bar slider 滑动柄

可拖拽柄组件

APP内置组件，可直接在template中使用，不需要import导入和注册 。

实例 :

基础用法

<template>
  <div class="wrapper">
    <dof-minibar
      title="滑动柄"
    ></dof-minibar>
    <midea-seek-bar 
      class="seekbar" 
      :max="max" 
      :min="min" 
      :value="value" 
      :unit="unit"
      :showTip="showTip" 
      :step="step" 
      :axisH="axisH" 
      :pointH="pointH" 
      :pointColor='pointColor'
      :axisColor='axisColor' 
      :axisBgColor="axisBgColor" 
      :disable='disable'
      @slideChange="slideEnd" 
      @slideEnd="slideEnd">
    </midea-seek-bar>
  </div>
</template>

<script>
import { DofMinibar } from 'dolphin-intl-ui'
export default {
    components: { DofMinibar },
    data() {
        return {
          max: 100, //最大值
          min: 0, //最小值
          value: 50,
          unit:"这是自定义提示",   //tips描述
          showTip: true,
          step: 5, //步长
          axisH: 10, //轴高度(px)
          pointH: 18, //圆球高度（px)
          axisColor: '#DFE5E7', // 滑条未拖动时颜色
          pointColor:"#23aaf2",   // 圆球颜色
          axisBgColor:"#7130d3",   // 滑条拖动后背景颜色
          disable:false
        }
    },
    computed: {
      // 针对不同的数值和状态可以更改颜色数据
      // 滑条拖动后背景颜色axisBgColor(){}
      // 圆球颜色 pointColor(){}
    },
    methods: {
      slideEnd(event) {
        
      },
      slideChange(event) {
      
      }
    }
}
</script>

<style scoped>
.wrapper {
  width: 750px;
}
.seekbar {
  width: 750px;
  height: 450px;
  margin-top: 20px;
}
</style>

用作只读进度条

通过 disable: true 禁用拖动，并以 pointH: 0 隐藏滑块，将组件用作进度条：

<midea-seek-bar
  :max="100"
  :min="0"
  :value="80"
  :axisH="8"
  :pointH="0"
  pointColor="#36CBCB"
  axisColor="#EBEBEB"
  axisBgColor="#36CBCB"
  :disable="true"
/>

value 为当前绑定值，范围由 min、max 决定。disable 为 true 时不可滑动。

Attributes

Prop	Type	Required	Default	Description
max	Number	N	-	最大范围
min	Number	N	-	最小范围
value	Number	N	-	当前绑定的值
unit	String	N	-	这是自定义提示text, tip提示语的单位，默认：%，只有showTip属性为true时候，该属性才起作用
showTip ^6.5.0	Boolean	N	false	是否显示自定义tip，app v6.5.0 以上版本支持
tipColor	String	N	``	自定义tip颜色
tipFontSize	number	N	``	自定义tip大小
step	Number	N	1	滑动步长
index	String	N	1	多个滑动柄的标识，用于区分同一页面中的组件
axisH	Number	N	-	线高度
pointH	Number	N	-	圆点高度
axisColor	string	N	-	线的颜色
axisAlpha	String	Y	1	滑条未滑到的区域的透明度，范围0~1,默认1，不透明
pointColor	string	N	-	圆点颜色
axisBgColor	string	N	-	线的背景色
axisBgAlpha	String	N	1	滑条滑到的区域的透明度，范围0~1,默认1，不透明
sliderImage	String	N	-	滑球图片的base64
axisStartColor	String	N	1	滑条未滑到的区域显示的颜色 (渐变色开始)
axisEndColor	String	N	1	滑条未滑到的区域显示的颜色 (渐变色结束)
disable	Boolean	N	-	是否不可滑动
slideImage	number	N	-	白色圆点相对bar 右侧 的滑动距离
isOneStepSlider	Boolean	N	false	兼容家用UI效果
isTransparency	Boolean	N	false	axisBgColor是否需要使用透明度（仅安卓有 ios无该字段）
dragType	String	N	``	拖动类型：不传或者空字符串""-任意方向，horizontal-水平拖动，vertical-垂直拖动
isSupportClick	Boolean	N	true	是否支持点击
animation	String	N	``	动画相关数据，json字符串{"type":"0", "duration":"1500", "isValidate":true, "minAlpha": "0.1"}

Events

事件名称	说明	回调参数
slideChange	滑动柄value变化事件	event
slideEnd	滑动柄value滑动结束事件	event