tudouUi —— UI组件库

# Switch 开关

# 引入

import { Switch } from 'tudou-ui'
Vue.use(Switch)

# 基础用法

<tudou-switch v-model="checked1"/>

# 禁用状态

<tudou-switch v-model="checked2" disabled/>
<tudou-switch v-model="checked3" disabled/>

# change事件

<tudou-switch v-model="checked4" @change="changeHandler"/>

# API

属性 类型 默认值 说明
disabled Boolean false 设置switch禁用状态
v-model Boolean false 设置switch为开启或关闭状态

# Checkbox 复选框

# 引入

import { Checkbox } from 'tudou-ui'
Vue.use(Checkbox)

# 基础用法

<tudou-checkbox label="选项1" v-model="checked1"/>

# 形状

<tudou-checkbox shape="round" v-model="checked4" label="选项1"/>

# 禁用状态

<tudou-checkbox label="选项1" v-model="checked2" disabled/>
<tudou-checkbox label="选项2" v-model="checked3" disabled/>

# 多选框组

<tudou-checkbox label="选项1" v-model="checkList"/>
<tudou-checkbox label="选项2" v-model="checkList"/>
<tudou-checkbox label="选项3" v-model="checkList"/>

# API

属性 类型 默认值 说明
label String '' 设置checkbox的标签，如多个checkbox的v-model绑定到同一个数组，则label为checkbox的值
shape String rect 设置checkbox形状，可选值round、rect或者不设
disabled Boolean false 设置checkbox禁用状态
v-model Boolean | String[] 无 传入值为Boolean时，true则勾选，false则取消勾选；传入值为String数组时，根据数组中是否有与label相等的元素，判断checkbox勾选与否

# Radio 单选框

# 引入

import { Radio } from 'tudou-ui'
Vue.use(Radio)

# 基础用法

<tudou-radio label="选项1" v-model="picked1"/>

# 禁用状态

<tudou-radio label="选项1" v-model="picked2" disabled/>
<tudou-radio label="选项2" v-model="picked2" disabled/>

# API

属性 类型 默认值 说明
label String '' 设置radio的标签
disabled Boolean false 设置radio禁用状态
v-model String '' 传入label字符串，根据传入label与radio的label是否相等，从而判断radio是否为选中状态

# Picker 选择器

# 引入

import { Picker } from 'tudou-ui'
Vue.use(Picker)

# 基础用法

<tudou-button @click="openPicker">默认选择器</tudou-button>
<tudou-picker ref="picker" v-model="selected" :options="options" />

export default {
  data() {
    return {
      selected: 0,
      options: ['热爱祖国', '勤奋学习', '认真工作', '天天向上']
    }
  methods: {
    openPicker() {
      this.$refs.picker.open();
    }
}

# 自定义标题

<tudou-button @click="openPicker">自定义标题</tudou-button>
<tudou-picker ref="picker" title="个性化的标题" v-model="selected" :options="options" />

# 双重选择器

<tudou-button @click="openPicker">双重选择器</tudou-button>
<tudou-picker type="double" ref="picker" v-model="selected" :options="options" />

export default {
  data() {
    return {
      selected: [3, 2],
      options: [
        ['上午', '中午', '下午', '晚上'], 
        ['热爱祖国', '勤奋学习', '认真工作', '天天向上']
      ]
    }
  methods: {
    openPicker() {
      this.$refs.picker.open();
    }
}

# 级联选择器（未完待续）

<tudou-button @click="openPicker">级联选择器</tudou-button>
<tudou-picker ref="picker" cascade v-model="selected" :options="options" />

export default {
  data() {
    return {
      selected: [4, 1],
      options: [
        ['上午', '中午', '下午', '晚上', '凌晨'], 
        ['热爱祖国', '勤奋学习', '认真工作', '天天向上']
      ]
    }
  methods: {
    openPicker() {
      this.$refs.picker.open();
    }
}

# API

属性 类型 默认值 说明
type String single 设置picker的类型，可选值为single或double
ref String 无 必传，通过ref来打开或关闭特定的picker
title String '请选择' 设置picker的标题
cascade Boolean false 设置picker是否为级联选择器
v-model Integer | Integer[] 无 必传，初始化picker的选中项序号，并用于接收用户选中的序号
options Array | Object 无 必传，设置picker的可选项，级联选择器需传入对象，其它选择器需传入数组