0.1.1 • Published 4 years ago
jy-ui-vue v0.1.1
jy-ui-vue
JY UI component for Vue.js
Installation
npm install jy-ui-vue
How to use？
import YUI from 'jy-ui-vue'
Vue.use(YUI)License
MIT
Example
npm install
npm run serve
localhost:8080
Tooltip
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| position | Tooltip出现的位置 | string | top/bottom/left/right/topLeft/topRight/bottomLeft/bottomRight | top |
| content | 显示的内容，也可以通过 slot#content 传入 DOM | string | / | / |
| theme | 默认提供的主题 | string | Dark/Light | Dark |
| trigger | 触发方式 | string | click/hover | hover |
Button
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| size | 尺寸 | string | large/small/mini | / |
| type | 类型 | string | primary/success/warning/danger/dashed/text | / |
| loading | 是否加载中状态 | boolean | / | false |
| disabled | 是否禁用状态 | boolean | / | false |
| icon | 图标类名 | string | / | / |
注：如果在button中使用自己的图标<i></i>需要自行调整图标的margin属性
ButtonGroup
<y-button-group>
<y-button icon="search" type="primary"></y-button>
<y-button icon="search" type="primary"></y-button>
<y-button icon="search" type="primary"></y-button>
</y-button-group>Tabs
Tab
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| type | 标签页的主题 | string | card | null |
| position | 布局方向 | string | top/bottom/left/right | top |
| editable | 是否编辑 | boolean | / | false |
Tab Event
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| tab-add | 点击tab新增按钮后触发 | / |
| tab-selected | tab 被选中时触发 | 被选中的标签 tab 实例 |
| tab-remove | 点击 tab 移除按钮后触发 | 被删除的标签的 label |
TabPane
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| label | 标签页名 | string | / | / |
| active | 默认选中 | boolean | / | false |
| disabled | 是否禁用 | boolean | / | false |
| icon | 图标 | string | / | / |
Input
Input Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| type | 类型 | string | text/textarea | text |
| value | 绑定值 | string/number | / | / |
| maxlength | 原生属性，最大输入长度 | number | / | / |
| minlength | 原生属性，最小输入长度 | number | / | / |
| placeholder | 输入框占位文本 | string | / | "请输入内容" |
| disabled | 是否禁用 | boolean | / | false |
| size | 输入框尺寸，只在 type = "text" 时生效 | string | large/medium/small | large |
| prefix | 输入框头部图标 | string | / | / |
| suffix | 输入框尾部图标 | string | / | / |
| name | 原生属性 | string | / | / |
| max | 原生属性，设置最大值 | / | / | / |
| min | 原生属性，设置最小值 | / | / | / |
| step | 原生属性，设置输入字段的合法数字间隔 | / | / | / |
| autofocus | 原生属性，自动获取焦点 | boolean | true/false | false |
Input Slots
| name | 说明 |
|---|---|
| prefix | 输入框头部内容，只对 type="text" 有效 |
| suffix | 输入框尾部内容，只对 type="text" 有效 |
| prepend | 输入框前置内容，只对 type="text" 有效 |
| append | 输入框后置内容，只对 type="text" 有效 |
Input Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| blur | 在 Input 失去焦点时触发 | (event: Event) |
| focus | 在 Input 获得焦点时触发 | (event: Event) |
| change | 在 Input 值改变时触发 | (value: string | number) |
0.1.1
4 years ago