import Vue from 'vue';
import {Spinner} from 'vue-ydui/dist/lib.rem/spinner';
/* 使用px：import {Spinner} from 'vue-ydui/dist/lib.px/spinner'; */
Vue.component(Spinner.name, Spinner);<template>
<div>
<yd-spinner max="75" unit="3" v-model="spinner1"></yd-spinner>
<span>[model: spinner1 = {{spinner1}}]</span>
</div>
</template>
<script type="text/babel">
export default {
data() {
return {
spinner1: 0
}
}
}
</script>将yd-spinner组件的 v-model 绑定到一个本地变量spinner1，通过加减改变其值；
设置最大值参数max为75；设置累计值参数unit为3；
若不设置最小值，则默认为累计值3。
<template>
<div>
<yd-spinner min="12" unit="3" v-model="spinner2"></yd-spinner>
<span>[model: spinner2 = {{spinner2}}]</span>
</div>
</template>
<script type="text/babel">
export default {
data() {
return {
spinner2: 0
}
}
}
</script>设置最小值参数min为12；设置累计值参数unit为3。
<template>
<div>
<yd-spinner v-model="spinner3"></yd-spinner>
<span>[model: spinner3 = {{spinner3}}]</span>
</div>
</template>
<script type="text/babel">
export default {
data() {
return {
spinner3: 0
}
}
}
</script>默认累计值和最小值为1。
<template>
<div>
<yd-spinner unit="5" v-model="spinner4"></yd-spinner>
<span>[model: spinner4 = {{spinner4}}]</span>
</div>
</template>
<script type="text/babel">
export default {
data() {
return {
spinner4: 150
}
}
}
</script>设置本地变量spinner4的值为150即可。
<template>
<div>
<yd-spinner readonly v-model="spinner5"></yd-spinner>
<span>[model: spinner5 = {{spinner5}}]</span>
</div>
</template>
<script type="text/babel">
export default {
data() {
return {
spinner5: 0
}
}
}
</script>在yd-spinner组件上添加readonly或:readonly="true"即可。
<template>
<div>
<yd-spinner :longpress="false" v-model="spinner6"></yd-spinner>
<span>[model: spinner6 = {{spinner6}}]</span>
</div>
</template>
<script type="text/babel">
export default {
data() {
return {
spinner6: 0
}
}
}
</script>设置参数:longpress="false"即可。