vue dividing rule

Vue刻度尺組件

安裝

npm install --save vue-dividing-rule

參數

參數名	類型	缺省值	可選值	說明
min	Number	0		可選的最小值
max	Number	150		可選的最大值
interval	Number	10		每個大區間的間隔
color	String	'#f00'		指針的顏色
value	Number	傳入的最小值	在最小值與最大值之間的值	初始值

範例

基本使用

 <template>
...
    <vue-dividing-rule v-model="value"></vue-dividing-rule>
...
</template>
<script>
import VueDividingRule from 'vue-dividing-rule'
export default {
    data() {
        return {
            value: 20
        }
    },
    components: {
        VueDividingRule
    }
}

傳入配置參數

 <vue-dividing-rule
    v-model="value"
    :min="50"
    :max="120"
    :interval="5"
    color="blue"
    ></vue-dividing-rule>