# fb-ui-component

> 基于 Vue 的自定义组件库

Latest version **0.4.0** (published 2021-01-12) · 0 weekly downloads

## Install

```sh
npm install fb-ui-component
pnpm add fb-ui-component
yarn add fb-ui-component
bun add fb-ui-component
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2021-01-12 |
| First published | 2020-12-21 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 629.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | childlabor |
| Keywords | UI, components, vue, elementUI |

## Links

- npm: https://www.npmjs.com/package/fb-ui-component
- npm.io page: https://npm.io/package/fb-ui-component

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 0.4.0 (latest) — 2021-01-12
- 0.3.8 — 2020-12-21
- 0.3.7 — 2020-12-21
- 0.3.6 — 2020-12-21
- 0.3.5 — 2020-12-21
- 0.3.4 — 2020-12-21
- 0.3.3 — 2020-12-21

## README

<h1 align="center">Web UI组件库</h1>
<p align="center">
基于element-ui使用vue开发的组件库
</p>

<!-- TOC -->

- [前端框架](#前端框架)
- [组件开发](#组件开发)
- [SDK](#sdk)
- [如何使用](#如何使用)
  - [Install](#install)
  - [Quick Start](#quick-start)
    - [完整引入](#完整引入)
    - [按需加载](#按需加载)
  - [Components](#components)
    - [FilterInput](#filterinput)
    - [IconFont](#iconfont)
    - [RemoteSelect](#remoteselect)

<!-- /TOC -->

# 前端框架

[项目选用基于 Vue、Element封装的框架](docs/FRAMEWORK.md)

# 组件开发

[COMPONENT](docs/COMPONENT.md)

# SDK

[JS SDK](docs/SDK.md)


# 如何使用

## Install
```
$ npm install ui-component --registry http://192.168.31.165:4873
```

<br />

## Quick Start

### 完整引入
```js
// main.js
import "ui-component/lib/styles/index.css";
import UIComponent from "ui-component";
Vue.use(UIComponent);

```

### 按需加载
```js
$ 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 |

```js
/**
  * filterList
  * @param keyword 字段名
  * @param name 名称
  * @param type 类型,只有input才会出现在普通状态（input、select、date、rangeDate、complexRangeDate）
  * @param options  类型为select时使用，下拉选项
  * @param format 类型为rangeDate、date时使用，时间格式，默认 yyyy/MM/dd
  */
```
<br />

FilterInput Slots

| name | 说明 |
| :------:| :------: |
| clearIcon | 删除图标 |

<br />

FilterInput Events

| 事件名称 | 说明 | 回调参数 |
| :------:| :------: | :------: |
| handelClick | 点击 | value |
| queryEmpty | 清空 | -- |

<br />

FilterInput Demo

```js
<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` 查看可用图标

<br />

IconFont Demo

```
<IconFont name="iconshangpin" color="red" />

```

***

<br />

### RemoteSelect

RemoteSelect Attr

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| :------:| :------: | :------: | :------: | :------: |
| remoteClass | 自定义class，同一页面多次引用时的唯一标识 | String | -- | remoteSelect |
| options | 下拉选项 | Array | -- | -- |

- 其余参数同elementUI的[Select 选择器](https://element.eleme.cn/#/zh-CN/component/select)

<br />

RemoteSelect Slots

| name | 说明 |
| :------:| :------: |
| elOption | 下拉选项 |

- 默认option取值label、value，需要自定义使用slot插入

<br />

RemoteSelect Demo

```js
<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'
    }
  ];
}

```

***

<br />

---
_Source: https://npm.io/package/fb-ui-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._