/vzer-ui

vzer-ui是一款vue的UI框架，由个人维护，因为工作原因，不定时更新。

Primary LanguageVue

vzer-ui是一款轻量、可靠的移动端Vue组件库

项目持续更新维护，喜欢的可以给个star

github地址

https://github.com/zengjielin/vzer-ui

点击下方查看demo

在线演示地址

喜欢自己动手开发属于自己的UI组件的可以移步到vzer-ui-template这个项目

vzer-ui-template

快速入门教程

# npm安装
npm install vzer-ui --save-dev

# 项目中引入
import Vue from 'vue'
import Vzer from 'vzer-ui'
import 'vzer-ui/lib/vzer.css'
Vue.use(Vzer)

组件持续更新中

基础组件-按钮

使用案例

<vzer-button>默认按钮</vzer-button>

API

参数 说明 类型 可选值 默认值
type 类型 string default/primary/success/warning/error/info default
size 尺寸 string large/medium/small —
shape 按钮形状 string circle/rectangle —
disabled 是否禁用状态 boolean — false

表单组件-多选框

使用案例

<vzer-checkbox v-model="checked">未选中</vzer-checkbox>

API

参数 说明 类型 可选值 默认值
v-model 绑定值 boolean — —
width 宽度 number — —
label 多选框组作为单个选项的值必填 string — —
color 文字和图标颜色 string — #fff
normal-color 未选中是背景色 string — #ddd
background-color 选中时的背景色 string — #25c6fc
round 是否使用圆形 boolean — false
disabled 是否禁用状态 boolean — false

Event

参数 说明 回调参数
change 当绑定值变化时触发的事件 更新后的值

表单组件-多选框组

使用案例

<vzer-checkbox-group>
    <vzer-checkbox label="被选中">被选中</vzer-checkbox>
    <vzer-checkbox label="选中并禁用" :disabled="true">选中并禁用</vzer-checkbox>
    <vzer-checkbox label="未选中">未选中</vzer-checkbox>
</vzer-checkbox-group>

API

参数 说明 类型 可选值 默认值
v-model 绑定值 array — —

Event

参数 说明 回调参数
change 当绑定值变化时触发的事件 更新后的值

表单组件-单选框

使用案例

<vzer-radio v-model="radio" :options="options"></vzer-radio>

<script>
export default {
  data() {
    return {
      radio: "optionA",
      options: [
        {
          label: "选项一",
          value: "optionA"
        },
        {
          label: "选项二",
          value: "optionB"
        }
      ],
  }
};
</script>

API

参数 说明 类型 可选值 默认值
v-model 绑定值 String — —
options 选择项，label为单选项文字,value为单选项值,disabled是否禁用单选项。 Array — —
width 单选框大小 String/Number — 20/20px
direction 单选框排序方向 String horizontal/vertical horizontal
normal-color 单选框未选中时颜色 String — #c8c9cc
background-color 单选框选中时颜色 String — #25c6fc

Event

参数 说明 回调参数
change 当绑定值变化时触发的事件 更新后的值

表单组件-开关

使用案例

<vzer-switch v-model="value"></vzer-switch>

<script>
export default {
  data() {
    return {
      value: true,
  }
};
</script>

API

参数 说明 类型 可选值 默认值
v-model 绑定值 boolean — —
width 宽度 number/string — —
height 高度，不宜大于他的宽度 number/string — —
background-color 选中时的背景色 string — #25c6fc
normal-color 选中时的背景色 string — #e9ebef
disabled 是否禁用状态 boolean — false

Event

参数 说明 回调参数
change 当绑定值变化时触发的事件 更新后的值