0.1.4 • Published 5 years ago
f-ui
安装组件库
npm install lionxs-ui
全局导入
import LionxsUI from 'lionxs-ui'
import 'lionxs-ui/dist/lionxs-ui.css'
Vue.use(LionxsUI)
button组件（f-button）
参数支持
| 参数名 | 参数描述 | 参数类型 | 默认值 |
|---|
| type | 按钮类型(primary / success / warning / danger / info) | string | default |
| plain | 是否是朴素按钮 | boolean | false |
| round | 是否是圆角按钮 | boolean | false |
| circle | 是否是圆形按钮 | boolean | false |
| disabled | 是否禁用按钮 | boolean | false |
| icon | 图标类名 | string | 无 |
事件支持
dialog组件（f-dialog）
参数支持
| 参数名 | 参数描述 | 参数类型 | 默认值 |
|---|
| title | 对话框标题 | string | 提示 |
| width | 宽度 | string | 50% |
| top | 与顶部的距离 | string | 15vh |
| visible | 是否显示dialog（支持sync修饰符） | boolean | false |
事件支持
| 事件名 | 事件描述 |
|---|
| opened | 模态框显示的事件 |
| closed | 模态框关闭的事件 |
插槽说明
| 插槽名称 | 插槽描述 |
|---|
| default | dialog的内容 |
| title | dialog的标题 |
| footer | dialog的底部操作区 |
input组件（f-input）
参数支持
| 参数名称 | 参数描述 | 参数类型 | 默认值 |
|---|
| placeholder | 占位符 | string | 无 |
| type | 文本框类型(text/password) | string | text |
| disabled | 禁用 | boolean | false |
| clearable | 是否显示清空按钮 | boolean | false |
| showPassword | 是否显示密码切换按钮 | boolean | false |
| name | name属性 | string | 无 |
switch组件(f-switch)
参数支持
| 参数名称 | 参数描述 | 参数类型 | 默认值 |
|---|
| v-model | 双向绑定 | 布尔类型 | false |
| name | name属性 | string | text |
| activeColor | 自定义的激活的颜色 | string | |
| inactiveColor | 自定义的不激活的颜色 | string | |
radio组件(f-radio)
参数支持
| 参数名称 | 参数描述 | 参数类型 | 默认值 |
|---|
| v-model | 双向绑定 | 布尔类型 | false |
| label | 单选框的value值 | string,num,boolean | "" |
| name | name属性 | string | |
radio-group组件（f-radio-group）
使用radio组件的缺点，需要给每个组件都绑定v-mode,可以使用radio-group包裹，解决这个缺点，只需绑定一个v-model在这个组件。
<f-radio-group v-model="gender">
<f-radio label="1">男</f-radio>
<f-radio label="0">女</f-radio>
</f-radio-group>
checkbox组件（f-checkbox）
| 参数名称 | 参数描述 | 参数类型 | 默认值 |
|---|
| label | 选项值 | string | "" |
| name | name属性值 | string | "" |
checkbox-group组件(f-check-group)
使用checkbox-group组件包裹checkbox,绑定一个v-model在这个组件.
<f-checkbox-group v-model="select">
<f-checkbox label="篮球"></f-checkbox>
<f-checkbox label="足球"></f-checkbox>
</f-checkbox-group>
form组件（f-form）
与f-form-item组件结合使用，需一个v-model属性绑定数据。
form-item组件
##### 参数支持
| 参数名称 | 参数描述 | 参数类型 | 默认值 |
|---|
| label | 选项值 | string | "" |
message组件(f-message)
全局消息提示组件
参数支持
| 参数名称 | 参数描述 | 参数类型 | 默认值 |
|---|
| message | 消息内容 | string | "" |
| type | 消息通知类型 | success/error/info/warning | info |
| icon | 图标类型 | string | 无 |
| duration | 关闭时间 | number | 3000,0表示不关闭 |
| showClose | 是否显示关闭按钮 | boolean | false |
| center | 文字居中 | boolean | false |
| offset | 距离顶部距离 | string | 20px |
| dangerouslyUseHTMLString | 是否将消息内容解析为html | boolean | false |
notice组件（f-notice）
消息通知组件
参数支持
| 参数名称 | 参数描述 | 参数类型 | 默认值 |
|---|
| message | 消息内容 | string | "" |
| type | 消息通知类型 | success/error/info/warning | info |
| title | 通知标题 | string | 无 |
| duration | 关闭时间 | number | 3000；0表示不关闭 |