whaleip-ui

whaleip 项目组件/函数封装库

• 安装

npm i whaleip-ui -D
cnpm i whaleip-ui -D

• 引入

/* main.js */

/* 引入组件 */
import WhaleipUi from 'whaleip-ui'
Vue.use(WhaleipUi);

/* 引入方法 */
Vue.prototype.$utils = WhaleipUi.fn;

• 使用

/* HelloWorld.vue */
/* 使用组件 */
<wh-search-group ref="searchGroup" :searchList="searchList" @handleSearch="handleSearch"></wh-search-group>

/* 使用方法 */
this.$utils.isJsonString('{"a":1}')

组件

组件基于element-ui根据业务需求和样式统一的规范二次封装的ui组件库

SearchGroup

搜索组 包括搜索框和按钮

使用：<wh-search-group ref="searchGroup" :searchList="searchList" @handleSearch="handleSearch" @handleClear="handleClear" class="f-c-search"></wh-search-group>
说明： :searchList：   必须     搜索框列表
      @handleSearch： 必须     搜索方法；
      @handleClear：  非必须   点击清空按钮需要特殊处理的函数；

searchList: [ // 传入的搜索框列表
  {
    key: 1, // 唯一标识，用作绑定 :key 值
    type: 'input', // 类型[input：输入框；radio：单选框；select：下拉框；select-multiple：下拉框多选；filterable：模糊匹配；datePicker：日期选择器(开始和结束独立分开)；datePicker-daterange：联级日期选择器；customize自定义组件]
    inputType: 'number', // 当type='input' 时有效，目前值有 ['number']，表示仅可输入数字
    label: '线索ID', // label 值 包括'：'
    label2： '-'，// lebel 值 不包括'：' 不可与label同时使用
    keyword: 'clewId', // 绑定值对应的属性名
    timeKeyword: '', // 时间属性名(仅限type为datePicker-daterange日期选择器)
    starTimeKeyword: '', // 开始时间属性名(仅限type为datePicker/datePicker-daterange日期选择器)
    endTimeKeyword: '', // 结束时间属性名(仅限type为datePicker/datePicker-daterange日期选择器)
    defaultValue: '', // 默认值
    disabled: false, // 是否禁用(当type为datePicker日期选择器时为一个数组)
    options: [ // 下拉框/单选框选项列表 格式使用id和name
      {
        id: 1,
        name: '张三',
      }
    ],
    remoteFun: () => {}, // 模糊匹配函数(仅限type为filterable模糊匹配)
    changeFun: (val) => {}, // 状态改变函数(仅限type为select下拉框或customize自定义组件) val为当前的值
    // 样式属性
    aloneCss: true, // 是否一行显示，true/false
    className: 'classTest', // 组件样式名称 在当前组件下<style lang="scss">中写样式，也可以在当前页最顶级的class下写样式 <style lang="scss"> .faClssName-container { .classTest {color: #f60} }</style>
    render: `<el-input v-model="keyword" @change="handleChange"></el-input>`/ compontens, // 自定义的组件(仅限type为customize自定义组件)必须包含v-model和@change="handleChange"，v-modal绑定的值必须与keyword一致
  }
]

/* 输入框全部字段 */
{
  key: 1, // 唯一标识，用作绑定 :key 值
  type: 'select', // 类型 'select'
  inputType: 'number', // 表示仅可输入数字
  label: '这是输入框', // label 值
  keyword: 'workName', // 绑定值对应的属性名
  defaultValue: '这是一件作品', // 默认值
  disabled: false, // 是否禁用
}

/* 单选框全部字段 */
{
  key: 1, // 唯一标识，用作绑定 :key 值
  type: 'radio', // 类型 'radio'
  label: '这是单选框', // label 值
  keyword: 'workName', // 绑定值对应的属性名
  defaultValue: 1, // 默认值
  disabled: false, // 是否禁用
  options: [ // 选项列表 格式使用id和name
  {
    id: 1,
    name: '张三',
  }
],
}

/* 下拉框全部字段 */
{
  key: 1, // 唯一标识，用作绑定 :key 值
  type: 'input', // 类型 'input'
  label: '这是下拉框', // label 值
  keyword: 'selectName', // 绑定值对应的属性名
  defaultValue: 1, // 默认值
  disabled: false, // 是否禁用
  options: [ // 下拉框选项列表 格式使用id和name
  {
    id: 1,
    name: '张三',
  }
],
  changeFun: (val) => this.noDetermineStatusChange(val), // 下拉选项改变函数
}

/* 下拉框多选全部字段 */
{
  key: 1, // 唯一标识，用作绑定 :key 值
  type: 'input-multiple', // 类型 'input-multiple'
  label: '这是下拉框', // label 值
  keyword: 'selectName', // 绑定值对应的属性名
  defaultValue: [1], // 默认值
  disabled: false, // 是否禁用
  options: [ // 下拉框选项列表 格式使用id和name
  {
    id: 1,
    name: '张三',
  }
],
  changeFun: (val) => this.noDetermineStatusChange(val), // 下拉选项改变函数
}

/* 模糊匹配全部字段 */
{
  key: 1, // 唯一标识，用作绑定 :key 值
  type: 'filterable', // 类型 'filterable'
  label: '这是模糊匹配', // label 值
  keyword: 'filterableName' // 绑定值对应的属性名
  defaultValue: '这是一件作品', // 默认值
  disabled: false, // 是否禁用
  options: [], // 下拉框选项列表 一般默认为空格式 使用id和name
  remoteFun: (query) => this.knightRemoteMethod(query), // 模糊匹配函数
}

/* 日期选择器全部字段 */
{
  key: 1, // 唯一标识，用作绑定 :key 值
  type: 'datePicker', // 类型 'datePicker'
  label: '这是日期选择器', // label 值
  starTimeKeyword: 'paCompleteStartTime', // 开始时间属性名
  endTimeKeyword: 'paCompleteEndTime', // 结束时间属性名
  defaultValue: ['2021-08-26 01:02:03', '2021-08-27 00:00:00'], // 默认值
  disabled: [false, false], // 是否禁用 [开始日期，结束日期]
}

/* 联级日期选择器全部字段 */
{
  key: 1, // 唯一标识，用作绑定 :key 值
  type: 'datePicker-daterange', // 类型 'datePicker'
  label: '这是日期选择器', // label 值
  timeKeyword: 'paCompleteTime', // 时间属性名(仅限type为datePicker日期选择器)
  starTimeKeyword: 'paCompleteStartTime', // 开始时间属性名
  endTimeKeyword: 'paCompleteEndTime', // 结束时间属性名
  defaultValue: ['2021-08-26 01:02:03', '2021-08-27 00:00:00'], // 默认值
  disabled: false, // 是否禁用
}

/* 自定义组件全部字段 */
{
  key: 1, // 必须 唯一标识，用作绑定 :key 值
  type: 'customize', // 必须 类型 'customize'
  label: '自定义组件', // 非必须 label 值
  keyword: 'namefc',
  defaultValue: '1', // 必须 默认值也一定要给(需要知道值的类型)
  changeFun: (data) => this.changeFun(data), // 非必须 可以做一些操作，最后记得要调用一次'this.$refs.searchGroup.handleSearch()'
  // render: `<el-input-number v-model="namefc" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>`, // namefc字段必须与keyword一致，@change="handleChange"也必写
  render: SelectBox, // 必须 组件内容
}
render为一个组件注意事项：
1、通过import SelectBox from './selectBox'引入
2、在组件中，必须包含v-model="namefc"和@change="handleChange" 并且定义对应的data值(绑定的值必须与keyword一致)和handleChange()方法
data() {
  return {
    namefc: '',
  }
},
methods: {
  handleChange() {
    this.$emit('handleOtherChange', 'namefc', this.namefc, null);
  }
}
3、组件内不需要在外层div包裹，如果必须有外层div则必须给外层div添加style="float: left;width: 180px;"
4、自定义组件为非已有情况下自定义的方法，如果使用比较多的情况建议修改封装代码添加新类型。

page

分页

使用：<wh-page-group ref="pageGroup" @getListData="getListData"></wh-page-group>
说明： @getListData： 必须     调用列表接口方法；
修改值：this.$refs.pageGroup.pageNumber 修改页码
      this.$refs.pageGroup.pageSize 修改每页显示数
      this.$refs.pageGroup.total 修改数据总数