npm i zzywx-ui
// 全部引用
import 'zzywx-ui/dist/css/index.css'
import MUI from 'zzywx-ui'
Vue.use(MUI)
// 按需引用
import 'zzywx-ui/dist/demo.css';
import {Demo} from 'zzywx-ui';
Vue.use(Demo)
<z-btn>默认按钮</z-btn>
<z-btn type="primary">主要按钮</z-btn>
<z-btn type="success">成功按钮</z-btn>
<z-btn type="info">信息按钮</z-btn>
<z-btn type="warning">警告按钮</z-btn>
<z-btn type="danger">危险按钮</z-btn>
<br />
<z-btn plain>朴素按钮</z-btn>
<z-btn type="primary" plain>主要按钮</z-btn>
<z-btn type="success" plain>成功按钮</z-btn>
<z-btn type="info" plain>信息按钮</z-btn>
<z-btn type="warning" plain>警告按钮</z-btn>
<z-btn type="danger" plain>危险按钮</z-btn>
<br />
<z-btn round>圆角按钮</z-btn>
<z-btn type="primary" round>主要按钮</z-btn>
<z-btn type="success" round>成功按钮</z-btn>
<z-btn type="info" round>信息按钮</z-btn>
<z-btn type="warning" round>警告按钮</z-btn>
<z-btn type="danger" round>危险按钮</z-btn>
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
size | 尺寸 | string | medium / small / mini | — |
type | 类型 | string | primary / success / warning / danger / info | — |
plain | 是否朴素按钮 | boolean | — | false |
round | 是否圆角按钮 | boolean | — | false |
参数 | 描述 | 类型 | 默认值 | 必传 |
---|---|---|---|---|
value | 是否激活 使用v-model进行双向绑定 | [Boolean, String, Number] | false | 是 |
width | 宽度 | Number | 40 | 否 |
activeColor | 激活颜色 | String | #409EFF | 否 |
inactiveColor | 未激活颜色 | String | #C0CCDA | 否 |
<z-switch
v-model="show"
:width="80"
activeColor="#f00"
inactiveColor="#00f"
></z-switch>
export default {
name: "App",
components: {},
data() {
return {
show:false
};
},
};
<z-slider v-model="num" :min="10" :max="200"></z-slider>
参数 | 描述 | 类型 | 默认值 | 必传 |
---|---|---|---|---|
value | 使用v-model进行双向绑定 | Number | - | 是 |
min | 最小值 | Number | 0 | 否 |
max | 最大值 | Number | 100 | 否 |
export default {
name: 'App',
data() {
return {
num: 0,
};
}
};