yzlight-ui

安装组件库

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