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表示不关闭 |