jay-ui
简介
自学使用
使用
- 安装
npm i @zzz_chou_30/jayui -S
- 全局注册
import JayUI from '@zzz_chou_30/jayui'
import '@zzz_chou_30/jayui/dist/jayui.css'
Vue.use(JayUI)
- 按需引入
import JayUI, { Button, Input } from '@zzz_chou_30/jayui'
import '@zzz_chou_30/jayui/dist/jayui.css'
Vue.use(JayUI, {
components: [Button, Input]
})
// Message引入方式
import { Message } from '@zzz_chou_30/jayui'
Vue.prototype.$message = Message
组件
图标(Icon)
图标集合参考Hippo Design 官方图标库
<i class="jay-icon jay-icon-close"></i>
按钮(Button)
| 参数 | 类型 | 说明 |
|---|
| type | String | 类型，可选值：primary / success / warning / danger / info |
| plain | Boolean | 是否为朴素按钮，默认为 false |
| round | Boolean | 是否为圆角按钮，默认为 false |
| circle | Boolean | 是否为圆形按钮，默认为 false |
| icon | String | 为按钮添加icon图标，参考Icon组件，只需后缀 |
| disabled | Boolean | 禁用按钮 |
<jay-button type="info" plain icon="home">按</jay-button>
单选框(Radio)
| 参数 | 类型 | 说明 |
|---|
| value / v-model | String, Number, Boolean | 绑定标签值 |
| label | String, Number, Boolean | 单选框 label 值 |
| name | String | 表单命名 |
<jay-radio v-model="radio" label="1">男</jay-radio>
<jay-radio v-model="radio" label="2">女</jay-radio>
单选框组(RadioGroup)
| 参数 | 类型 | 说明 |
|---|
| value / v-model | String, Number, Boolean | 绑定标签值 |
| 事件 | 类型 | 说明 |
|---|
| change | Function | 绑定值变化触发 |
<jay-radio-group v-model="radio" @change="radioChange">
<jay-radio label="1">男</jay-radio>
<jay-radio label="2">女</jay-radio>
</jay-radio-group>
复选框(Checkbox)
| 参数 | 类型 | 说明 |
|---|
| value / v-model | Boolean | 绑定标签值 |
| label | String, Number, Boolean | 复选框 label 值 |
| name | String | 表单命名 |
<jay-checkbox v-model="checkboxAction" label="1">是否选中</jay-checkbox>
单选框组(RadioGroup)
| 参数 | 类型 | 说明 |
|---|
| value / v-model | String, Number, Boolean | 绑定标签值 |
| 事件 | 类型 | 说明 |
|---|
| change | Function | 绑定值变化触发 |
<jay-checkbox-group v-model="checkboxActions" @change="checkboxChange">
<jay-checkbox label="小明" />
<jay-checkbox label="小红" />
<jay-checkbox label="小星" />
</jay-checkbox-group>
输入框(Input)
| 参数 | 类型 | 说明 |
|---|
| type | String | input类型，参考input标签 |
| placeholder | String | 输入框占位文本 |
| name | String | 表单命名 |
| disabled | Boolean | 禁用输入框 |
| value / v-model | String | 绑定输入框值 |
| clearable | Boolean | 是否可清空 |
| show-password | Boolean | 是否显示切换密码图标 |
| prefix-icon | String | 输入框头部图标 |
| suffix-icon | String | 输入框尾部图标 |
| 事件 | 类型 | 说明 |
|---|
| change | Function | 绑定值变化触发 |
| clickSuffixIcon | Function | 点击后缀图标 |
<jay-input v-model="username" placeholder="用户名" show-password />
切换(Switch)
| 参数 | 类型 | 说明 |
|---|
| value / v-model | Boolean | 绑定标签值 |
| active-color | String | switch 打开时的背景色 |
| inactive-color | String | switch 关闭时的背景色 |
| name | String | 表单命名 |
| 事件 | 类型 | 说明 |
|---|
| change | Function | 绑定值变化触发 |
<jay-switch v-model="switchAction" active-color="#13ce66" inactive-color="#ff4949" @change="switchChange" />
对话框(Dialog)
| 参数 | 类型 | 说明 |
|---|
| title | String | 标题，支持插槽 |
| width | String | 对话框宽度，默认50% |
| top | String | 对话框距上高度，默认15vh |
| visible | Boolean | 对话框显示隐藏，支持.sync |
<jay-dialog :visible.sync="visible">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<template v-slot:footer>
<jay-button>取消</jay-button>
<jay-button type="primary">确定</jay-button>
</template>
</jay-dialog>
消息提示(Message)
| 参数 | 类型 | 说明 |
|---|
| message | String | 消息文字 |
| type | String | 主题，可选值success/warning/info/error，自带图标 |
| message | String | 消息文字 |
| duration | Number | 显示时间, 毫秒。默认3000,设为 0 则不会自动关闭 |
| center | Boolean | 是否居中显示，默认false |
| icon | String | 自定义图标的类名，会覆盖 type的图标 |
this.$message.error({
message: '提示错误',
duration: 3000
})
表单项(Form-item)
表单(Form)
| 参数 | 类型 | 说明 |
|---|
| model | Object | 表单对象，必填 |
| label-width | String | 标签宽度，默认"80px" |
<jay-form :model="model" label-width="100px">
<jay-form-item label="用户名">
<jay-input v-model="model.username" placeholder="请输入用户名" />
</jay-form-item>
<jay-form-item v-model="model.active" label="选择">
<jay-switch />
</jay-form-item>
</jay-form>