# w-admin-ui > whaleip web project Component encapsulation Latest version **2.1.7** (published 2023-05-17) · MIT license · 0 weekly downloads ## Install ```sh npm install w-admin-ui pnpm add w-admin-ui yarn add w-admin-ui bun add w-admin-ui ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.1.7 | | Published | 2023-05-17 | | First published | 2023-05-17 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 2 | | Unpacked size | 41.4 KB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | Author | ysf | | Maintainers | ysfpsl | | Keywords | vue, ui, admin-ui, w-admin-ui | ## Links - npm: https://www.npmjs.com/package/w-admin-ui - npm.io page: https://npm.io/package/w-admin-ui ## Dependencies (2) - [vue](https://npm.io/package/vue.md) ^2.5.2 - [element-ui](https://npm.io/package/element-ui.md) ^2.15.6 ## Alternatives - [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads - [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads - [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads - [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads - [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads ## Recent versions - 2.1.7 (latest) — 2023-05-17 ## README # w-admin-ui > w 项目组件/函数封装库 * 安装 ```common npm i w-admin-ui -D cnpm i w-admin-ui -D ``` * 引入 ```common /* main.js */ /* 引入组件 */ import WAdminUi from 'w-admin-ui' Vue.use(WAdminUi); /* 引入方法 */ Vue.prototype.$utils = WAdminUi.fn; ``` * 使用 ```common /* HelloWorld.vue */ /* 使用组件 */ /* 使用方法 */ this.$utils.isJsonString('{"a":1}') ``` ## 组件 组件基于element-ui根据业务需求和样式统一的规范二次封装的ui组件库 ### SearchGroup 搜索组 包括搜索框和按钮 ``` js 使用： 说明： :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', // 组件样式名称 在当前组件下 render: ``/ compontens, // 自定义的组件(仅限type为customize自定义组件)必须包含v-model和@change="handleChange"，v-modal绑定的值必须与keyword一致 } ] ``` ```js /* 输入框全部字段 */ { 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: ``, // 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 分页 ``` js 使用： 说明： @getListData： 必须 调用列表接口方法； 修改值：this.$refs.pageGroup.pageNumber 修改页码 this.$refs.pageGroup.pageSize 修改每页显示数 this.$refs.pageGroup.total 修改数据总数 ``` --- _Source: https://npm.io/package/w-admin-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._