Web UI组件库

基于element-ui使用vue开发的组件库

• 前端框架
• 组件开发
• SDK
• 如何使用
  • Install
  • Quick Start
    • 完整引入
    • 按需加载
  • Components
    • FilterInput
    • IconFont
    • RemoteSelect

前端框架

项目选用基于 Vue、Element封装的框架

组件开发

COMPONENT

SDK

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

---