{"_id":"w-admin-ui","name":"w-admin-ui","dist-tags":{"latest":"2.1.7"},"versions":{"2.1.7":{"name":"w-admin-ui","description":"whaleip web project Component encapsulation","version":"2.1.7","author":{"name":"ysf"},"license":"MIT","private":false,"main":"dist/admin.js","directories":{"dist":"dist"},"keywords":["vue","ui","admin-ui","w-admin-ui"],"browserslist":["> 1%","last 2 versions","not ie <= 8"],"dependencies":{"element-ui":"^2.15.6","vue":"^2.5.2"},"devDependencies":{"babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-preset-env":"^1.6.0","babel-preset-stage-3":"^6.24.1","cross-env":"^5.0.5","css-loader":"^0.28.7","file-loader":"^1.1.4","node-sass":"^4.14.1","sass-loader":"^7.3.1","vue-loader":"^13.0.5","vue-template-compiler":"^2.4.4","webpack":"^3.6.0","webpack-dev-server":"^2.9.1"},"repository":{"type":"git","url":""},"gitHead":"70f525500a58cd3f9e3f925fdafdd0e3146585b4","_id":"w-admin-ui@2.1.7","_npmVersion":"6.1.0","_nodeVersion":"10.3.0","_npmUser":{"name":"ysfpsl","email":"1925562741@qq.com"},"dist":{"integrity":"sha512-dedazW+uwVBFpu2yuwnAQaEnDlWe9H2my9gMqd9pIBlrBu2W8R6p/4F/sq7wW0ZQfuq66EtOFR3NUiYmV+JfQA==","shasum":"730f442c4ec075bb36ae496be16dcc4c2bb59214","tarball":"https://registry.npmjs.org/w-admin-ui/-/w-admin-ui-2.1.7.tgz","fileCount":13,"unpackedSize":42381,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGzoVc35yI33/WFFLJokEeqrWDCS1C+qfTCK9bQ917v9AiAL5tf3EmARjFCbDuRkbIfbTw+Ngh2IN958BTpzRBEIUQ=="}]},"maintainers":[{"name":"ysfpsl","email":"1925562741@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/w-admin-ui_2.1.7_1684295809334_0.6654273400591793"},"_hasShrinkwrap":false}},"time":{"created":"2023-05-17T03:56:49.333Z","2.1.7":"2023-05-17T03:56:49.535Z","modified":"2023-05-17T03:56:49.769Z"},"maintainers":[{"name":"ysfpsl","email":"1925562741@qq.com"}],"description":"whaleip web project Component encapsulation","keywords":["vue","ui","admin-ui","w-admin-ui"],"repository":{"type":"git","url":""},"author":{"name":"ysf"},"license":"MIT","readme":"# w-admin-ui\n\n> w 项目组件/函数封装库\n\n* 安装\n```common\nnpm i w-admin-ui -D\ncnpm i w-admin-ui -D\n```\n\n* 引入\n\n```common\n/* main.js */\n\n/* 引入组件 */\nimport WAdminUi from 'w-admin-ui'\nVue.use(WAdminUi);\n\n/* 引入方法 */\nVue.prototype.$utils = WAdminUi.fn;\n```\n\n* 使用\n```common\n/* HelloWorld.vue */\n/* 使用组件 */\n<wh-search-group ref=\"searchGroup\" :searchList=\"searchList\" @handleSearch=\"handleSearch\"></wh-search-group>\n\n/* 使用方法 */\nthis.$utils.isJsonString('{\"a\":1}')\n```\n\n## 组件\n\n组件基于element-ui根据业务需求和样式统一的规范二次封装的ui组件库\n\n### SearchGroup\n搜索组 包括搜索框和按钮\n``` js\n使用：<wh-search-group ref=\"searchGroup\" :searchList=\"searchList\" @handleSearch=\"handleSearch\" @handleClear=\"handleClear\" class=\"f-c-search\"></wh-search-group>\n说明： :searchList：   必须     搜索框列表\n      @handleSearch： 必须     搜索方法；\n      @handleClear：  非必须   点击清空按钮需要特殊处理的函数；\n\nsearchList: [ // 传入的搜索框列表\n  {\n    key: 1, // 唯一标识，用作绑定 :key 值\n    type: 'input', // 类型[input：输入框；radio：单选框；select：下拉框；select-multiple：下拉框多选；filterable：模糊匹配；datePicker：日期选择器(开始和结束独立分开)；datePicker-daterange：联级日期选择器；customize自定义组件]\n    inputType: 'number', // 当type='input' 时有效，目前值有 ['number']，表示仅可输入数字\n    label: '线索ID', // label 值 包括'：'\n    label2： '-'，// lebel 值 不包括'：' 不可与label同时使用\n    keyword: 'clewId', // 绑定值对应的属性名\n    timeKeyword: '', // 时间属性名(仅限type为datePicker-daterange日期选择器)\n    starTimeKeyword: '', // 开始时间属性名(仅限type为datePicker/datePicker-daterange日期选择器)\n    endTimeKeyword: '', // 结束时间属性名(仅限type为datePicker/datePicker-daterange日期选择器)\n    defaultValue: '', // 默认值\n    disabled: false, // 是否禁用(当type为datePicker日期选择器时为一个数组)\n    options: [ // 下拉框/单选框选项列表 格式使用id和name\n      {\n        id: 1,\n        name: '张三',\n      }\n    ],\n    remoteFun: () => {}, // 模糊匹配函数(仅限type为filterable模糊匹配)\n    changeFun: (val) => {}, // 状态改变函数(仅限type为select下拉框或customize自定义组件) val为当前的值\n    // 样式属性\n    aloneCss: true, // 是否一行显示，true/false\n    className: 'classTest', // 组件样式名称 在当前组件下<style lang=\"scss\">中写样式，也可以在当前页最顶级的class下写样式 <style lang=\"scss\"> .faClssName-container { .classTest {color: #f60} }</style>\n    render: `<el-input v-model=\"keyword\" @change=\"handleChange\"></el-input>`/ compontens, // 自定义的组件(仅限type为customize自定义组件)必须包含v-model和@change=\"handleChange\"，v-modal绑定的值必须与keyword一致\n  }\n]\n```\n\n```js\n/* 输入框全部字段 */\n{\n  key: 1, // 唯一标识，用作绑定 :key 值\n  type: 'select', // 类型 'select'\n  inputType: 'number', // 表示仅可输入数字\n  label: '这是输入框', // label 值\n  keyword: 'workName', // 绑定值对应的属性名\n  defaultValue: '这是一件作品', // 默认值\n  disabled: false, // 是否禁用\n}\n\n/* 单选框全部字段 */\n{\n  key: 1, // 唯一标识，用作绑定 :key 值\n  type: 'radio', // 类型 'radio'\n  label: '这是单选框', // label 值\n  keyword: 'workName', // 绑定值对应的属性名\n  defaultValue: 1, // 默认值\n  disabled: false, // 是否禁用\n  options: [ // 选项列表 格式使用id和name\n  {\n    id: 1,\n    name: '张三',\n  }\n],\n}\n\n/* 下拉框全部字段 */\n{\n  key: 1, // 唯一标识，用作绑定 :key 值\n  type: 'input', // 类型 'input'\n  label: '这是下拉框', // label 值\n  keyword: 'selectName', // 绑定值对应的属性名\n  defaultValue: 1, // 默认值\n  disabled: false, // 是否禁用\n  options: [ // 下拉框选项列表 格式使用id和name\n  {\n    id: 1,\n    name: '张三',\n  }\n],\n  changeFun: (val) => this.noDetermineStatusChange(val), // 下拉选项改变函数\n}\n\n/* 下拉框多选全部字段 */\n{\n  key: 1, // 唯一标识，用作绑定 :key 值\n  type: 'input-multiple', // 类型 'input-multiple'\n  label: '这是下拉框', // label 值\n  keyword: 'selectName', // 绑定值对应的属性名\n  defaultValue: [1], // 默认值\n  disabled: false, // 是否禁用\n  options: [ // 下拉框选项列表 格式使用id和name\n  {\n    id: 1,\n    name: '张三',\n  }\n],\n  changeFun: (val) => this.noDetermineStatusChange(val), // 下拉选项改变函数\n}\n\n/* 模糊匹配全部字段 */\n{\n  key: 1, // 唯一标识，用作绑定 :key 值\n  type: 'filterable', // 类型 'filterable'\n  label: '这是模糊匹配', // label 值\n  keyword: 'filterableName' // 绑定值对应的属性名\n  defaultValue: '这是一件作品', // 默认值\n  disabled: false, // 是否禁用\n  options: [], // 下拉框选项列表 一般默认为空格式 使用id和name\n  remoteFun: (query) => this.knightRemoteMethod(query), // 模糊匹配函数\n}\n\n/* 日期选择器全部字段 */\n{\n  key: 1, // 唯一标识，用作绑定 :key 值\n  type: 'datePicker', // 类型 'datePicker'\n  label: '这是日期选择器', // label 值\n  starTimeKeyword: 'paCompleteStartTime', // 开始时间属性名\n  endTimeKeyword: 'paCompleteEndTime', // 结束时间属性名\n  defaultValue: ['2021-08-26 01:02:03', '2021-08-27 00:00:00'], // 默认值\n  disabled: [false, false], // 是否禁用 [开始日期，结束日期]\n}\n\n/* 联级日期选择器全部字段 */\n{\n  key: 1, // 唯一标识，用作绑定 :key 值\n  type: 'datePicker-daterange', // 类型 'datePicker'\n  label: '这是日期选择器', // label 值\n  timeKeyword: 'paCompleteTime', // 时间属性名(仅限type为datePicker日期选择器)\n  starTimeKeyword: 'paCompleteStartTime', // 开始时间属性名\n  endTimeKeyword: 'paCompleteEndTime', // 结束时间属性名\n  defaultValue: ['2021-08-26 01:02:03', '2021-08-27 00:00:00'], // 默认值\n  disabled: false, // 是否禁用\n}\n\n/* 自定义组件全部字段 */\n{\n  key: 1, // 必须 唯一标识，用作绑定 :key 值\n  type: 'customize', // 必须 类型 'customize'\n  label: '自定义组件', // 非必须 label 值\n  keyword: 'namefc',\n  defaultValue: '1', // 必须 默认值也一定要给(需要知道值的类型)\n  changeFun: (data) => this.changeFun(data), // 非必须 可以做一些操作，最后记得要调用一次'this.$refs.searchGroup.handleSearch()'\n  // render: `<el-input-number v-model=\"namefc\" @change=\"handleChange\" :min=\"1\" :max=\"10\" label=\"描述文字\"></el-input-number>`, // namefc字段必须与keyword一致，@change=\"handleChange\"也必写\n  render: SelectBox, // 必须 组件内容\n}\nrender为一个组件注意事项：\n1、通过import SelectBox from './selectBox'引入\n2、在组件中，必须包含v-model=\"namefc\"和@change=\"handleChange\" 并且定义对应的data值(绑定的值必须与keyword一致)和handleChange()方法\ndata() {\n  return {\n    namefc: '',\n  }\n},\nmethods: {\n  handleChange() {\n    this.$emit('handleOtherChange', 'namefc', this.namefc, null);\n  }\n}\n3、组件内不需要在外层div包裹，如果必须有外层div则必须给外层div添加style=\"float: left;width: 180px;\"\n4、自定义组件为非已有情况下自定义的方法，如果使用比较多的情况建议修改封装代码添加新类型。\n\n```\n\n## page\n分页\n\n``` js\n使用：<wh-page-group ref=\"pageGroup\" @getListData=\"getListData\"></wh-page-group>\n说明： @getListData： 必须     调用列表接口方法；\n修改值：this.$refs.pageGroup.pageNumber 修改页码\n      this.$refs.pageGroup.pageSize 修改每页显示数\n      this.$refs.pageGroup.total 修改数据总数\n```\n","readmeFilename":"README.md"}