• 前端框架
• 组件开发
• 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'
    }
  ];
}