0.4.0 • Published 3 years ago
fb-ui-component v0.4.0
前端框架
组件开发
SDK
如何使用
Install
$ npm install ui-component --registry http://192.168.31.165:4873
Quick Start
完整引入
// main.js
import "ui-component/lib/styles/index.css";
import UIComponent from "ui-component";
Vue.use(UIComponent);
按需加载
$ npm install babel-plugin-component -D
// .babelrc
{
"plugins": [
[
"component",
{
"libraryName": "ui-component",
"styleLibrary": {
"name": "styles",
"base": false
}
}
]
]
}
// main.js
import { FilterInput } from "ui-component";
Vue.use(FilterInput);
Components
FilterInput
FilterInput Attr
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
v-model | 绑定值 | Object | -- | -- |
filter-list | 渲染数据 | Array | -- | -- |
show-search-btn | 搜索按钮 | Boolean | false |
/**
* filterList
* @param keyword 字段名
* @param name 名称
* @param type 类型,只有input才会出现在普通状态(input、select、date、rangeDate、complexRangeDate)
* @param options 类型为select时使用,下拉选项
* @param format 类型为rangeDate、date时使用,时间格式,默认 yyyy/MM/dd
*/
FilterInput Slots
name | 说明 |
---|---|
clearIcon | 删除图标 |
FilterInput Events
事件名称 | 说明 | 回调参数 |
---|---|---|
handelClick | 点击 | value |
queryEmpty | 清空 | -- |
FilterInput Demo
<FilterInput
v-model="queryData"
:filter-list="filterList"
show-search-btn
@handelClick="queryClick"
@queryEmpty="queryEmpty"
>
<template #clearIcon>
<img :src="clearIcon" class="clear-icon" alt="clear" />
</template>
</FilterInput>
// data
filterList: [
{
keyword: "resourceName",
name: "账号",
type: "input",
labelWidth: "40px"
},
{ keyword: "orderId", name: "订单编号", type: "input" },
{
keyword: "accountState",
name: "入账状态",
type: "select",
options: [
{ value: -1, label: "全部" },
{ value: 0, label: "未入账" },
{ value: 1, label: "已入账" },
{ value: 2, label: "部分入账" }
]
},
{
keyword: "dateTime",
name: "时间选择",
type: "complexRangeDate",
timeTypeKeyword: "timeType",
options: [
{ value: 0, label: "下单日期" },
{ value: 1, label: "到账日期" }
]
}
],
queryData: {
timeType: 0
}
// methods
queryClick() {
console.log(this.queryData);
},
queryEmpty() {
this.queryData = {
timeType: 0
};
this.queryClick();
}
IconFont
IconFont Attr
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
name | 名称 | String | -- | -- |
color | 图表颜色 | String | -- | -- |
- 打开
lib/styles/font/demo_index.html
查看可用图标
IconFont Demo
<IconFont name="iconshangpin" color="red" />
RemoteSelect
RemoteSelect Attr
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
remoteClass | 自定义class,同一页面多次引用时的唯一标识 | String | -- | remoteSelect |
options | 下拉选项 | Array | -- | -- |
- 其余参数同elementUI的Select 选择器
RemoteSelect Slots
name | 说明 |
---|---|
elOption | 下拉选项 |
- 默认option取值label、value,需要自定义使用slot插入
RemoteSelect Demo
<RemoteSelect
v-model="value"
multiple
filterable
remote
reserve-keyword
placeholder="请输入关键词"
:options="options"
:remote-method="remote"
@change="handleChange"
>
<template #elOption>
<el-option
v-for="item in options"
:key="item.id"
:label="item.label"
:value="item.id"
>
</el-option>
</template>
</RemoteSelect>
...
remote() {
this.options = [
{
lable: 0,
value: 'p:aaa',
id: 'aaa'
},
{
lable: 1,
value: 'P:bbb',
id: 'bbb'
}
];
}