w-admin-ui
w 项目组件/函数封装库
- 安装
npm i w-admin-ui -D
cnpm i w-admin-ui -D
- 引入
/* main.js */
/* 引入组件 */
import WAdminUi from 'w-admin-ui'
Vue.use(WAdminUi);
/* 引入方法 */
Vue.prototype.$utils = WAdminUi.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 修改数据总数