npm i yzlight-ui
// 在main.js中
import yzlight from "yzlight-ui"
import "../node_modules/yzlight-ui/light-ui.css"
Vue.use(yzlight)
使用方法
<mySwitch v-model="open" active-color="#13ce66" inactive-color="#c0c0c0" :width="60"></mySwitch>
data() {
return {
open: false,
};
},
属性介绍
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value | 开关状态 | Boolean | true / false | false |
activeColor | 底色 | String | - | #13ce66 |
inactiveColor | 滑块颜色 | String | - | #c0c0c0 |
使用方法
<myRate :max="5" v-model="value" active-color="#a8a8a8" inactive-color="#fa9600" text-color="orangered"></myRate>
data() {
return {
value: 0,
};
},
属性介绍
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
:max | 星星的数量 | Number | - | 5 |
active-color | 未选中的星星颜色 | String | - | #a8a8a8 |
inactive-color | 选中的星星颜色 | String | - | #fa9600 |
text-color | 文字颜色 | String | - | orangered |
使用方法
<my-slider v-model="progress" :min="0" :max="100"></my-slider>
data() {
return {
progress: 0,
};
},
属性介绍
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
:min | 最小值 | Number | — | 0 |
:max | 最大值 | Number | — | 100 |