Question

import { Range } from 'feui';
components: {
  [Range.name]: Range
}

代码演示

基础用法

<fe-group>
  <fe-cell>
    <fe-range v-model='date1' on-change='onChange'></fe-range>
  </fe-cell>
</fe-group>

允许小数

<fe-cell title="允许小数" :inline-desc="'value is: '+data2" primary="content">
  <fe-range v-model="data2" decimal></fe-range>
</fe-cell>

最小/大值设置

<fe-cell title="设置最小/大值" :inline-desc="'value is: '+data6" primary="content">
  <fe-range v-model="data6" :min="7" :max="77"></fe-range>
</fe-cell>

设置步长

<fe-cell title="步长10" :inline-desc="'valus is: '+data7" primary="content">
  <fe-range v-model="data7" :step="10"></fe-range>
</fe-cell>

不可用

<fe-cell title="不可用" :inline-desc="'valus is: '+data8" primary="content">
  <fe-range v-model="data8" disabled></fe-range>
</fe-cell>

不可用 & 不可用透明度

<fe-group title="不可用">
  <fe-cell title="不可用" :inline-desc="'valus is: '+data8" primary="content">
    <fe-range v-model="data8" disabled></fe-range>
  </fe-cell>
  <fe-cell title="透明度" :inline-desc="'valus is: '+data8" primary="content">
    <fe-range v-model="data8" disabled :disabled-opacity="0.1"></fe-range>
  </fe-cell>
</fe-group>

不可用

<fe-cell title="线条高度" :inline-desc="'value is: '+data9" primary="content">
  <fe-range v-model="data9" :range-bar-height="4"></fe-range>
</fe-cell>

自定义html大小

<fe-cell title="文字大小" :inline-desc="'字号: ' + data10" primary="content">
  <fe-range v-model="data10" :min="12" :max="22" 
  minHTML="<span style='font-size:12px;'>小</span>" 
  maxHTML="<span style='font-size:22px;'>大</span>"></fe-range>
</fe-cell>

API

参数	说明	类型	默认值	可选值
value	显示结果用v-model绑定	Number	0	-
decimal	是否显示小数	Boolean	false	false,true
min	可选的最小值	Number	0	-
max	可选的最大值	Number	100	-
step	步长	Number	1	-
minHTML	最小值显示的html模板	String	-	-
maxHTML	最大值显示的html模板	String	-	-
disabled	按钮是否可用	Boolean	false	true,false
disabled-opacity	禁用状态下的透明度	Number	-	-
rangeBarHeight	线条粗细值	Number	1	-
-	-	-	-	-

Events

事件名	参数	说明	备注
on-change	value	绑定值变化时触发事件	-
-	-	-	-