xiaoai-design

Vue UI 组件库

Usage no npm install needed!

<script type="module">
  import xiaoaiDesign from 'https://cdn.skypack.dev/xiaoai-design';
</script>

README

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事件
    • 状态改变之后的事件