xiaoai-ui

使用

• 安装 npm i --save xiaoai--design
• 在main.js引入

  import AiUi from 'xiaoai--design'
  import 'xiaoai--design/lib/ai-ui.css'
  Vue.use(AiUi)

Button组件

• type
  • String类型
  • 不传为默认
  • primary为主要按钮
  • success为成功按钮
  • warning为警告按钮
  • info为信息按钮
  • danger为危险按钮
• size
  • 默认为大型按钮
  • medium 中型按钮
  • small 小型按钮
  • mini 超小型按钮
• round
  • Boolean类型
  • 按钮是否为圆角按钮
• circel
  • Boolean类型
  • 按钮是否为圆形按钮
• disabled
  • Boolean类型
  • 按钮是否为禁用按钮
• icon
  • String类型
  • 图标按钮

Input组件

• type
  • 输入框类型: text: 普通输入框, password: 密码框
• v-modle
  • 输入框绑定的值
• disabled
  • 输入框是否禁用
• clearable
  • Boolean类型,默认false
  • 带清除按钮
  • clear事件, 点击清除按钮触发的事件
• show-password
  • Boolean类型,默认false
  • 密码是否课件

Dialog组件

• title
  • String类型
  • 标题: 支持直接传值和插槽形式
• width
  • String类型
  • dialog宽度
• top
  • String类型
  • dialog距离顶部的位置

Switch组件

• v-model
  • switch是否打开
• active-color
  • switch关闭时的背景色打开时的背景色
• inactive-color
  • switch关闭时的背景色
• name
  • switch的name属性
• change事件
  • switch状态改变触发的事件,参数为改变后的值

Radio组件

• label
  • 单选框的label
• v-model
  • 单选框绑定的值
• change事件
  • 单选框改变之后触发的事件, 参数:单选框的值
• 单选框组

  • <ai-radio-group v-model="value">
      <ai-radio label="0">男</ai-radio>
      <ai-radio label="1">女</ai-radio>
    </ai-radio-group>

  • v-model
    • 单选框绑定的值

Checkbox组件

• label
  • 多选框的label
• v-model
  • 多选框绑定的值
• change事件
  • 状态改变之后的事件