vue dividing rule

Vueスケールコンポーネント

インストール

npm install --save vue-dividing-rule

パラメータ

パラメータ名	タイプ	デフォルト値	オプションの値	説明する
分	番号	0		オプションの最小値
最大	番号	150		オプションの最大値
間隔	番号	10		各大きな間隔の間の間隔
色	弦	「#f00」		ポインタの色
価値	番号	渡される最小値	最小値と最大値の間の値	初期値

例

基本的な使い方

 <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>