Iview

View UI Plus 1.3.1 版本已于 2022-06-29 公布。 更新日志请到官网 www.iviewui.com 查看最新版。提供基于 TypeScript 的工程。view-ui-project-tsPlayground 默认模板反对切换组合式 API 和选项式 API。Playground修复 ImagePreview 操作栏在挪动端显示不残缺的问题。#104修复 ColorPicker 开启 transfer 时，无奈确定色彩的问题。#64修复 Login 校验，不显示默认谬误提醒的问题。#106修复 types 在局部 TS 环境下报错的问题，当初能够更好地应用 TS 了。abb1bd5更新办法1.批改 package.json 中 view-ui-plus 版本号： "dependencies": { "view-ui-plus": "^1.3.1" }2.运行 npm update view-ui-plus。 更多残缺内容，请到 View Design 官网查看：https://www.iviewui.com/

问题形容： 当上传的文件格式类型不为 jpeg、png、gif、jpg 时，提醒上传的文件格式不正确当上传的文件大小超过后端返回的大小时，提醒文件体积过大须要限度文件上传的格局和大小，最初的实现成果如下： 实现过程 对于文件大小的限度是可配置的，接口返回一个字段，我存了缓存，在上传图片的组件里，获取到存入缓存的这个值，在上传前对文件大小进行判断，上传的文件类型是写死了四种图片类型，在上传前通过判断文件类型确定是否能上传，不能的话就抛出一个正告。 beforeUpload 函数的返回值如下： { uid: 1651890175890 lastModified: 1651832588481 lastModifiedDate: Fri May 06 2022 18:23:08 GMT+0800 (中国规范工夫) name: "微信图片_20220506182305.jpg" size: 846192 type: "image/jpeg" webkitRelativePath: '' }示例代码如下： // 上传之前beforeUpload(res) { //管制文件上传格局 let imgTypeArr = ["image/png", "image/jpg", "image/jpeg","image/gif"]; let imgType = imgTypeArr.indexOf(res.type) !== -1 if (!imgType) { this.$Message.warning({ content: '文件 ' + res.name + ' 格局不正确, 请抉择格局正确的图片', duration: 5 }); return false } // 管制文件上传大小 console.log(res.size,'文件大小'); let imgSize = localStorage.getItem('file_size_max'); //获取缓存的文件大小限度字段 let Maxsize = res.size < imgSize; let fileMax = imgSize/ 1024 / 1024; if (!Maxsize) { this.$Message.warning({ content: '文件体积过大,图片大小不能超过' + fileMax + 'M', duration: 5 }); return false } this.uploadData = { pid: this.treeId, }; let promise = new Promise((resolve) => { this.$nextTick(function () { resolve(true); }); }); return promise; },源码附件曾经打包好上传到百度云了，大家自行下载即可～ ...

getSelectionIndexs() { let arr = []; Object.values(this.$refs.table.objData).forEach((item, index) => { if (item._isChecked) arr.push(index); }); return arr;},例子：

拓展 https://blog.csdn.net/weixin_... 说实话，Iview UI真的挺坑的,官网文档什么都没说,当Iview UI中Select 加了filterable属性,在加了remote和:remote-method="接口搜寻函数"近程搜寻性能之后,不论接口有没有数据，“无匹配数据“永远在显示。 <!--cityList 不管是否存在数据,"无匹配数据"总是莫名其妙的显示--> <Select v-model="model11" filterable> <Option v-for="item in cityList" :value="item.value" :key="item"> {{ item.label }}</Option></Select> 无效的解决办法 not-found-text https://iview.github.io/compo... <!--临时没看源码，只能人为操作not-found-text--> <Select v-model="model11" filterable remote :not-found-text="cityList.length===0?'':'无匹配数据'":remote-method="remoteMethod" :loading="loading"> <Option v-for="item in cityList" :value="item.value" :key="item"> {{ item.label }}</Option></Select>

Iview 输入框Input组件地址 https://iview.github.io/components/input IViewUI和elementUI还不一样，vue自带的trim禁止输出空格修饰符居然在Input 组件中不起作用。 官网也没有自带什么办法  <!--IView UI外面 trim修饰符还不起作用 坑爹--><Input v-model.trim="value" placeholder="请输出..." @input="inputFun" style="width: 300px"></Input>解决方案 ...methods:{//封装成自定义指令最好inputFun(e) { //$nextTick必须 this.$nextTick(() => { //正则过滤空格 this.value = e.replace(/\s+/g,''); }) }}...

问题：IE11报错 Error in render: "TypeError: 对象不反对“findIndex”属性或办法"按理本人我的项目中的es6语法都呗babel转换了，显示是某个插件或者库没有应用编译后的代码，断点调试发现是iview框架解决办法:vue.config.js中增加：transpileDependencies: [ "view-design" // 出问题的类库名，指定对第三方组件也进行babel-polyfill解决 ] 解释： 参考https://segmentfault.com/q/10...https://www.zhihu.com/questio...

iview简略应用(按需导入)1.开发环境 vue+iview2.电脑系统 windows10专业版3.在开发的过程中,咱们常常会应用到iview进行开发,然而很多时候咱们只是须要应用到iview的几个组件,如果咱们把所有的组件装置的话,会造成我的项目过大,上面我来简略的分享一下,iview怎么按需导入,心愿对你有所帮忙!4.在终端输出以下命令(以管理员身份运行): npm add view-designnpm install babel-plugin-import --save-dev5.在bable.config.js中增加如下代码: "plugins": [["import", { "libraryName": "view-design", "libraryDirectory": "src/components" }]]6.在main.js中增加如下代码: import 'view-design/dist/styles/iview.css'; //导入款式import { Button, Table } from 'view-design';Vue.component('Button', Button);Vue.component('Table', Table);7.在vue组件中增加如下代码: <Button type="primary" shape="circle">Circle</Button>8.本期的分享到了这里就完结啦,是不是很nice,心愿对你有所帮忙,让咱们一起致力走向巅峰!

问题：iview框架select组件加filterable属性实现下拉搜寻,重置v-model值的时候绑定不上，有人说最新版本改好了，然而我2.14.3 / 4.2.0都有问题 解决：重置的时候给组件加v-if,先让其暗藏，再加settimeout显示 setTimeout(() => { this.showRefId=true; }, 0);

iview-admin是一个基于vue和iview组件库实现的管理后台前端，本文基于iview-admin最新版本，实现基于权限的动态路由加载。本文代码可参见：https://github.com/MayBeWrong... 背景： 动态路由：vue的路由，可通过new Router传入路由数组定义实现，也可以通过router.addRoutes实现。通过router.addRoutes动态传入路由定义的方式，称之为动态路由。路由数据可以全部保存在后台数据库中，也可以将路由配置在前端，后端返回给前端路由权限信息，然后匹配过滤，进行加载。本文就这两种方式分别进行介绍，并且给出实现参考。 目标：基于iview-admin最新代码，实现两种不同的路由动态加载方式： 路由(导航菜单)数据全部存储在后台路由数据配置在前端，后台只存储权限信息注意：本文通过Mock模拟后端接口方式1：路由(导航菜单)数据全部存储在后台 定义路由数据结构体,在文件中：src/mock/data.jsexport const routersData = [{ path: '/pet',//访问路径 name: 'Pet',//路由的名字，这个与i18n有关，需要唯一 meta: { title: '宠物',//标题 hideInMenu: false,//是否在左侧导航菜单隐藏 icon: 'logo-freebsd-devil'//图标 }, component: 'components/main',//组件文件路径，不需要Import children: [{//嵌套路由 path: 'cat', name: 'Cat', meta: { title: '猫咪', hideInMenu: false, icon: 'ios-cloudy-night' }, component: 'view/pet/cat/Cat.vue' }, { path: 'dog', name: 'Dog', meta: { hideInMenu: false, title: '狗娃', icon: 'ios-color-filter' }, component: 'view/pet/dog/Dog.vue' }, { path: 'pig', name: 'Pig', meta: { hideInMenu: false, title: '猪啊', icon: 'ios-contact' }, component: 'view/pet/pig/Pig.vue', children: [ { path: 'female', name: 'Female', meta: { hideInMenu: false, title: '母猪', icon: 'ios-contact' }, component: 'view/pet/pig/Pig.vue', }, { path: 'male', name: 'Male', meta: { hideInMenu: false, title: '公猪', icon: 'ios-contact' }, component: 'view/pet/pig/Pig.vue', } ] }]}] 暴露ajax调用接口:src/mock/index.js，中增加：Mock.mock(/\/sys\/routers/, routersData)实现一个ajax调用：src/api/routers.js中增加： ...

QueryPHP v1.0.0-beta.5,这个版本主要改进 ORM 和大量细节的优化。 关于 QueryPHPQueryPHP 是一款现代化的高性能 PHP 渐进式协程框架, 我们还是主要面向传统 PHP-FPM 场景，以工程师用户体验为历史使命，让每一个 PHP 应用都有一个好框架。 百分之百单元测试覆盖直面 Bug，基于 Zephir 实现框架核心常驻，依托 Swoole 协程提升业务性能，此刻未来逐步渐进。 我们的愿景是 USE LEEVEL WITH SWOOLE DO BETTER, 让您的业务撑起更多的用户服务。 https://github.com/hunzhiwange/queryphphttps://gitee.com/dyhb/queryphphttps://www.queryphp.com更新日志[ framework ] 将底层 redis 服务拆分出来注册到 IOC 容器，可以方便使用[ framework ] 删除自己的 dd,dump 调试函数，Symfony 自带不需要再弄了。[ framework ] 移除全局函数 app,hl 助手函数，由静态代理实现 App （别名 Leevel ）来,App::path(),App 可以访问 IOC 容器中的方法 App::make('request')。[ framework ] 删除代理中所有接口设计 LeevelKernelProxyIApp，删除组件中的 Proxy 改为用 @method 来实现 IDE helper,并内置一个用于生成这样的命令工具自动生成。[ framework ] 优化 swoole 热重载代码，利于测试。[ framework ] 改进系统异常处理组件，例外将系统内置异常改为 abstract 方便业务层继承更好地处理异常，添加一个业务处理异常 LeevelKernelExceptionBusinessException,异常响应也会经过中间件处理。[ framework ] 核心 kernel 和路由支持对 CORS options 请求的处理，利用自定义中间件轻松处理跨域访问问题，分拆路由绑定解析方法，代码更清。[ framework ] 关联模型，改进 ORM 关联查询源值为空的特殊处理 ，不再执行后续查询，减少数据库查询，修复嵌套关联预载入查询未执行到的 BUG。[ framework ] 为各个组件助手函数添加一个静态访问，分拆各个组手函数到单独的文件方便 f 调用。[ framework ] 实体添加更多 const 如 CONSTRUCT_PROP_WHITE，MIDDLE_SOURCE_KEY 避免写死实体一些约定的名字。[ framework ] 数据库 PDO 查询改进，该是数字就返回数字，不再全部返回字符串。[ framework ] 查询新增 where('foo', '=', null) 的支持，处理非常特殊场景，以前直接报错。[ framework ] 改进实体 LeevelDatabaseDddEntity toArray 设计，现在 null 会被自动忽略。[ framework ] 改进实体 LeevelDatabaseDddEntity 属性相关设计，withProps,withProp,hasProp,prop 来访问。[ framework ] 改进实体 LeevelDatabaseDddEntity 软删相关设计，实体一旦定义了 const DELETE_AT，系统查询和删除自动走软删除，也可以通过 withSoftDeleted 查询包含软删除的数据，forceDelete 强制删除。[ framework ] 改进实体 LeevelDatabaseDddEntity 中查询实体 find($id) 改为 findEntity($id),更容易理解，例外可以避免和 find() 查询使用理解冲突。[ framework ] 修复 redis 连接池连接 PHPRedis 驱动支持重连。[ framework ] 验证器会自动转换验证参数 not_between:1,5 为 int 和 float，以便于框架实现统一强类型的整体方向，例外数据库唯一验证 LeevelValidateUniqueRule 自动识别 int 和 float，避免数据库查询出现转换类型而不再走索引影响性能。[ framework ] 改进实体 LeevelDatabaseDddEntity 查询设计，去掉查询魔术方法，__call 和 ___callStatic 被屏蔽，所有查询均需要通过静态入口 select(别名 find,保留致敬 QeePHP 习惯)，meta(保留致敬 QeePHP 习惯) 发起，再加上 ide helper 支持，完美支持 IDE。[ framework ] 改进实体连接 LeevelDatabaseDddEntity 切库设计，由每个实体自己实现 withConnect 和 connect，更加更新可控，提供切库安全沙盒 connectSandbox。[ framework ] 采用 PDOStatement->debugDumpParams() 来获取最后的 SQL，同时在 debug 组件将 SQL 写入日志方便开发调试。[ framework ] 事务工作单元 LeevelDatabaseDddUnitOfWork 增加对软删除」强删除的支持，也包含仓储对此的调整 LeevelDatabaseDddRepository。[ framework ] 修复并删除实体和仓储中的 flushed 已经刷新过数据的特性，无必要。[ tests ] 新增 10 多例 swoole 相关的测试用例和其它，单元测试 3080 多例，断言 10000+。[ application ] QueryPHP 自身是一个基于 IViewUI 的标准后台，自带基于资源的权限系统，由于框架大量调整后台做了相应的调整以便于运行。[ application ] QueryPHP 自身是主要引入 Workflow 来改善 curd 操作，将查询并入到服务中来。RoadMap[ framework ] Beta 4-6 主要是对 Swoole 4 最新版的协程完善支持。[ framework ] RC 版本会冻结计划功能，只修复 BUG、单元测试 和文档完善。[ framework ] v1.0.0 正式版本将随 PHP 7.4 版本后发布 https://wiki.php.net/todo/php74，计划是在 2019.12 发布。联系方式https://www.queryphp.com ...

我们需要在表单数组里循环,进行每项指定FormItem进行验证,实现↓↓↓↓↓↓↓↓↓↓ 上图可以看到ruleForm是当前表单对象,ruleForm里有个数组IntegralRuleItem进行循环,然后我需要对指定项进行验证......．然后,只需要在每个FormItem增加指定的rules验证规则即可;效果图: 其他官方是有这样有例子的:http://v2.iviewui.com/compone...

1. 支持ES6新语法，安装babel-polyfillIE不支持es6语法安装npm install --save babel-polyfill# 或者(下同)yarn add babel-polyfill修改webpack.base.conf.js// 修改之前entry: { app: './src/main.js'},// 修改后entry: { app: ['babel-polyfill', './src/main.js']},在main.js中添加import 'babel-polyfill'2. IE10以下，iview的日期组件无法选择兼容dataset，ie10及以下不支持dataset，而iview的transfer-dom.js使用了这个属性方法一：安装element-datasetyarn add element-dataset在main.js中添加import ElementDataset from 'element-dataset'ElementDataset()方法二在main.js中添加if (window.HTMLElement) { if (Object.getOwnPropertyNames(HTMLElement.prototype).indexOf('dataset') === -1) { Object.defineProperty(HTMLElement.prototype, 'dataset', { get: function () { var attributes = this.attributes // 获取节点的所有属性 var name = [] var value = [] // 定义两个数组保存属性名和属性值 var obj = {} // 定义一个空对象 for (var i = 0; i < attributes.length; i++) { // 遍历节点的所有属性 if (attributes[i].nodeName.slice(0, 5) === 'data-') { // 如果属性名的前面5个字符符合"data-" // 取出属性名的"data-"的后面的字符串放入name数组中 name.push(attributes[i].nodeName.slice(5)) // 取出对应的属性值放入value数组中 value.push(attributes[i].nodeValue) } } for (var j = 0; j < name.length; j++) { // 遍历name和value数组 obj[name[j]] = value[j] // 将属性名和属性值保存到obj中 } return obj // 返回对象 } }) }}3. 支持promiseIE不支持promise安装es6-promiseyarn add es6-promise在main.js中添加import promise from 'es6-promise'promise.polyfill()4. ie9不支持placeholder属性安装ie-placeholderyarn add ie-placeholder在main.js中添加import 'ie-placeholder'转载请注明：溜爸 » vue+iview兼容IE9以上的解决办法 ...

iview框架的table组件自带的过滤器的使用方法： <script> export default { data () { return { columns: [ { title: 'Name', key: 'name' }, //过滤器 //通过给 columns 数据的项，设置 filters，可进行筛选，filters 接收一个数组，必须指定一个筛选函数filterMethod { title: 'Age', key: 'age', filters: [ { label: 'Greater than 25', value: 1 }, { label: 'Less than 25', value: 2 } ], filterMultiple: false, filterMethod (value, row) { if (value === 1) { return row.age > 25; } else if (value === 2) { return row.age < 25; } } } ] } } } 上面的方法是iview的demo，但是这样不能实现分页时筛选，只能筛选当前页，想要实现分页筛选，只需在filterMethod函数的第一行加上一段this.age = value // age变量为key的名字这样就可以实现分也时筛选了 ...

做了个后台管理系统，使用的iview admin框架，在开发列表打开详情页面时遇到的问题问题描述当打开多个详情页之后，在详情页面之间切换，页面数据停留在第一个页面的数据，相关文档 当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。来源于 Vue Router文档解决方法： 了解到问题后，我想到一种解决方法，用计算属性与监听函数监听路由变化，触发页面数据更新函数，试过直接监听$route，结果会触发，不过实际应用会报错，感觉应该是$route是全局对象的原因，所以我用了计算属性将它转化为一个动态变量来监听，个人试用正常相关代码 computed: { // 计算属性的 getter onQuery: function () { // `this` 指向 vm 实例 return this.$route.params }},watch: { 'onQuery' (old, newValue) { // 对路由变化作出响应... if (newValue) { this.getPageInfo() } }},

有个需求在 tab 边上的数字统计点击进行路由跳转，使用的是 iview 的Tab+Badeg组件，原本是想通过在 Badeg 上增加一个点击事件进行处理，写的时候发现写在 Badeg 上的事件没生效，就想多包一层来处理。 [在组件上增加一个标签，在这个标签上绑定事件] 后来看了官网发现有个属性也能达到这个效果 实际中就是在 Badeg 组件上增加个 nativeON 属性，再把事件写在里面就行了。

在用iview框架的 checkbox 多选框时 遇到了一个校验问题在iview给的例子中 代码如下 https://www.iviewui.com/compo... <template> <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;"> <Checkbox :indeterminate="indeterminate" :value="checkAll" **@click.prevent.native="handleCheckAll"**>全选</Checkbox> </div> <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange"> <Checkbox label="香蕉"></Checkbox> <Checkbox label="苹果"></Checkbox> <Checkbox label="西瓜"></Checkbox> </CheckboxGroup></template><script> export default { data () { return { indeterminate: true, checkAll: false, checkAllGroup: ['香蕉', '西瓜'] } }, methods: { handleCheckAll () { if (this.indeterminate) { this.checkAll = false; } else { this.checkAll = !this.checkAll; } this.indeterminate = false; if (this.checkAll) { this.checkAllGroup = ['香蕉', '苹果', '西瓜']; } else { this.checkAllGroup = []; } }, checkAllGroupChange (data) { if (data.length === 3) { this.indeterminate = false; this.checkAll = true; } else if (data.length > 0) { this.indeterminate = true; this.checkAll = false; } else { this.indeterminate = false; this.checkAll = false; } } } }</script>上述代码标粗部分所用到的是click方法 但是在做表单校验的时候会出现一个问题，就是当你选择香蕉，苹果，西瓜时会触发v-model = 'checkAllGroup' 绑定的校验方法，但是全选/不全选的时候，这个校验不会触发。 ...

使用map循环对每个字段进行验证 let fieldsToValidate = ['username', 'password', 'gender', 'email']; let _self = this; Promise.all(fieldsToValidate.map(item => { let p = new Promise(function (resolve, reject) { _self.$refs['form'].validateField(item, (error) => { resolve(error) }) }); return p; })).then((data) => { console.info(data) // data 里是各个字段的验证错误信息, 如果为空串则认为验证通过, 如果数组里全为空串则所有验证通过 // 判断data 里是否全是空串 })

在用iview的upload上传图片的时候，想要实现图片的预览。 但是在iview给的例子中，是每上传一个图片触发一次上传事件，调一次接口，后台将图片存入数据库，再回传给前端，这样实现图片在前端的显示。这个方法对于上传多张图片，无疑很不现实。 于是就有了下面的方法。 想要实现上传多张图片，上传的图依次显示出来，点击提交，实现同时上传，只调一次接口，后台一次性将多张图片存入数据库。 在图片上传前 'handleBeforeUpload' 事件中加入以下代码，获取的_base64即为本地图片的绝对路径，将其存起来，在赋值到img的src路径，即可实现图片在上传前的显示，实现图片的预览 const reader = new FileReader() reader.readAsDataURL(file) reader.onload = () => { const _base64 = reader.result console.log(_base64) } 整体代码copy //图片上传前事件 handleBeforeUpload (file) { this.file = file //需要传给后台的file文件 const reader = new FileReader() reader.readAsDataURL(file) reader.onload = () => { const _base64 = reader.result this.imgUrl = _base64 //将_base64赋值给图片的src，实现图片预览 } return false//阻止图片继续上传，使得form表单提交时统一上传 }

描述需求在表格里面渲染form表单，数字保留2位小数，不足的自动补齐。 选用选用的是 iview 的组件 Form 、Input、Table。 Form表单的数据可以双向绑定，这样在对输入的数据做补零操作后，更新Form表单的model绑定的数据，即可更新。 没有使用 InputNumber 是因为它的交互用户体验不是很友好，而选用了常用的Input。但问题不是出在这里，请继续往下看。 form+tabletest.vue<template> <div> <Form ref="formTable" :model="formTable" :rules="rulesTable" inline > <Table border :columns="columns" :data="data"></Table> </Form> </div></template><script> let Trim=function(str,isGlobal) { let result; result = str.replace(/(^\s+)|(\s+$)/g,""); if(isGlobal === true) result = result.replace(/\s/g,""); return result; }; import FormItemInput from './form-item-input.vue'; export default { name:'test', components: {FormItemInput}, data() { return { //+++ form 表单 start formTable:{}, rulesTable:{}, //+++ form 表单 end // +++++++ table start data:[ { "id":1, "name":"张三", "score":"" }, { "id":2, "name":"李四", "score":"" } ], columns:[ { title: '序号', type: 'index', width: 60, align: 'center' }, { title: '姓名', key: 'name', width: 200, ellipsis:true }, { title: '成绩', key: 'score', width: 150, className:'custom-table-form', ellipsis:true, renderHeader:(h, params) => { // 2019年1月4日11:01:36 // 必填 需要展示 * return h('div', [ h('i', { style: { color: 'red', marginRight: '5px' } }, '*'), h('span', {}, params.column.title) ]); }, render:(h, params)=>{ console.log('行数据',params.index, params); /** * 2019年5月14日17:08:32 添加校验 */ let _formKey=params.column.key+'_'+params.row.id; this.rulesTable[_formKey]=[]; // 2019年6月6日11:09:32 这步会导致，数据渲染两遍 this.$set(this.$data.formTable, _formKey, params.row[params.column.key]===undefined || params.row[params.column.key]===null ? '' : params.row[params.column.key]); this.rulesTable[_formKey].push( { /** * 清掉input输入的空格，如果为空，不能通过 */ validator(rule, value, callback, source, options) { let errors = []; if (!Trim(value) ){ errors.push( new Error( "该项是必填项")); } callback(errors); }, trigger: 'blur' }, { validator(rule, value, callback, source, options) { let errors = []; // 正则控制范围，比较大小，同时存在才为true let _tmpValue= value && Number(value); // 可以出现一项：100分，或者n项 几分~几十分 let reg= /^([1-9]?[0-9]{1,2})?\0?(\.\d{1,2})?$/; if(!(reg.test(_tmpValue)&&0<=_tmpValue&&_tmpValue<=100)) { errors.push( new Error("请输入0-100之间的数字，小数点后最多允许保留2位小数") ); } callback(errors); },type:'string', trigger: 'blur' } ); return h(FormItemInput, { props:{ formTable:this.formTable, formKey:_formKey, }, on:{ 'on-form-blur':(value)=>{ // 更新提交数据 this.$refs.formTable.validateField(_formKey, (message)=>{ //2019年5月16日10:12:08 校验通过以后，保留2位小数 if(message.length==0) { this.formTable[_formKey]=Number(value).toFixed(2); console.log('formTable',this.formTable); } }); } } }); } }, ], // +++++++ table end }; }, mounted() { }, methods: {} }</script>form-item-input.vue<template> <Form-item :prop="formKey" @on-form-blur="onFormBlur" :required="required" :label="label" :setLengthNumber="setLengthNumber" :lastFormItem="lastFormItem"> <Input v-model="formTable[formKey]" ></Input> </Form-item></template><script> export default { props:{ required:{ type:Boolean, default:false }, label:{ type:String, default:'' }, formTable:Object, formKey:String, }, methods: { onFormBlur(value){ this.$emit('on-form-blur', value); } } }</script>图示 ...

github项目地址：《vue2-cli-iview》 iview官方demo是自己配置的webpack，如果想拿iview2的来做后台模板，需要自己拆分本文已拆分好精简版iview使用vue2的后台精简模板，可用作PC后台管理系统模板，快速开发。 精简版图登录页 首页 错误页 更换颜色 锁屏页 如果对大家有帮助，麻烦在github给个star支持一下github项目地址：《vue2-cli-iview》

找到要设置样式的类名，直接按照下面写法设置就可以了！ <style lang="less" scoped>@deep: ~'>>>';@{deep}.ivu-transfer-operation { visibility: hidden !important;}</style>

iview表单验证必要设置 1. 给 Form 标签用 :model 绑定数据 2. 给 Form 标签里面必须添加 ref , 用于最后提交获取 Form 表单的实例 3. 给 Form 设置属性 rules :rules 4. 给需要验证的每个 FormItem 设置属性 prop , 用于表单验证和绑定属性一致 iview验证多个表单问题<template> <Form ref="addForm" :model="addForm" :rules="addFormValidate" > <FormItem label="名称" prop="name"> <Input v-model="addForm.name" /> </FormItem> </Form> <Form ref="editForm" :model="editForm" :rules="editFormValidate" > <FormItem label="名称" prop="name"> <Input v-model="editForm.name" /> </FormItem> </Form></template><script> export default { methods:{ this.$refs.addForm.validate((valid) => { //第一层验证第一个表单 if (valid) { this.$refs.editForm.validate((valid) => { //第二层验证第二个表单 if(valid){ alert('验证成功') } }) } }) } }</script>iview自定义表单验证<template> <Form ref="addForm" :model="addForm" :rules="ruleValidate" > <FormItem label="名称" prop="name"> <Input v-model="addForm.name" /> </FormItem> </Form></template><script> export default { data() { var validateName = function(rule, value, callback){ if(!value){ return callback(new Error("请输入名称")); }else if(!/^[\u4e00-\u9fa5]+$/.test(value)){ return callback(new Error("请正确输入名称")) }else{ callback(); } }; return { addForm:{ name:"" } ruleValidate:{ name : [{validator : validateName , trigger : 'blur'}] } } } }</script>自定义的验证规则写在 data 里面，在 return 的 ruleValidate 指定字段 validator 里面调用；trigger：触发机制（blur | change）pattern：正则表达式enum：验证字段是否存在其中equired：是否为空（true | false）whitespace：空白字符（true | false） ...

使用的是iView组件库的Table表格 在表格中操作一列有删除和修改按钮，分别给删除和修改按钮注册了点击事件，但是同时还给表格的每一行注册了点击事件（项目需要在点击每一行时显示当前的详情信息），之后就发生了在点击删除和修改按钮时，不仅触发删除和修改按钮绑定的点击事件，还触发了给每一行注册的显示详情信息的事件。 // 点击删除按钮delectTableData(nowid) { event.stopPropagation(); this.$Modal.confirm({ title: "删除提示", content: "<p>确定要删除吗？</p>", // 确定删除 onOk :async () => { const { data: res } = await this.$http.delete( "xxxx" + id ); if (res.code !== 200) { return this.$Message.error("删除失败"); } else { this.$Message.success("删除成功"); } } }); },在删除按钮事件里面添加 event.stopPropagation();，来阻止事件冒泡就可以解决了。

问题：在以下表格中使用InputNumber需要进行双向数据绑定，但是动态生成的InputNumber输入框组件无法绑定v-model，可以通过render函数进行双向数据绑定。template部分 <Table border stripe :columns="addTable" :data="addTableData" > <!-- 表格中单价 --> <template slot-scope="{}" slot="price"> <FormItem prop="price" > <InputNumber size="small" ></InputNumber> </FormItem> </template> <!-- 表格中数量 --> <template slot-scope="{}" slot="count"> <FormItem prop="count" > <InputNumber size="small" ></InputNumber> </FormItem> </template> </Table>script部分 export default { data() { return { addTable: [ { title:'单价', key:'price', slot:"price", render:(h,params)=>{ return h('div',[ h('InputNumber',{ props:{ min:1, value:this.price }, domProps:{ value:this.price }, on:{ 'on-change':(event)=>{ this.price = event } }, style:{ width:"50px" } }) ]) } } ] } } }on-change事件------数值改变时的回调，返回当前值 ...

后台推送换行符"n"或"<br/>“等字符串到前台不会换行详细描述后台逻辑处理返回String字符串，其中包含\n或<br/>等换行符号，但是前端渲染时候却并没有真正的换行也尝试了大佬的各种 \r\n,<br/>,&lt;br/&gt;等都没有作用解决方案下面的解决方案来自https://www.jianshu.com/p/1d0ec501b318前台用的vue+iview这是我表格中的一列，推送过来字符串包含换行符\n，增加class:‘comment’类选择器{ title: ‘备注’, align: ’left’, key: ‘COMMENT’, render: (h, params) => { if(params.row.COMMENT == “”) { return h(‘span’, ‘–’); }else{ return h(‘span’,{ class:‘comment’ },params.row.COMMENT) } } }<!–more–>后面增加下面的CSS，就可以利用后台推送的\n来换行了.comment{ white-space:pre-wrap;}

起因使用iview-ui写的后台管理系统时，碰到提交表单的时候正常。但是根据id获取值赋值给表单对象时，表单验证提示为空？！问题解决后来我才发现原因：后来问题在表单值的类型上这是提交给接口的值这是接口返回值，一个是String类型的，一个是Number类型的，而async-validator验证在rules里不设置Number类型是无法识别的。async-validator的设定是严格的类型区分，所以才会有这个问题，规范写就是一开始都把类型区分好。赶项目（比方说我）就把返回值都转成string类型。后来才想起来这个小问题之前是碰到过的自己给忘了，很尴尬。记一下，免得下次又忘记。

城市多选组件最近收到了一个需求，管理系统需要上线一个活动，但是活动是根据地区上线的，最小范围到市，于是有了下面这个组件页面展示如图：上代码～～～<template> <div class=“tm-mil-city”> <p class=“tm-mil-city-title tm-mil-mb20”>{{name}}</p> <div class=“tm-mil-district-box tm-mil-mb20”> <Select class=“tm-mil-selsect” style=‘width:200px’ v-model=‘province’ placeholder=‘全部’ @on-change=‘changeProvince’> <Option v-for=‘item in provinceList’ :value=‘item.id’ :key=‘item.id’>{{ item.regionName }}</Option> </Select> <span class=“tm-mil-selsect-all-btn tm-mil-ml20 tm-mil-colB” @click=“chooseAllRegion”>全选</span> <div class=“tm-mil-line-loading” v-if=“province && !cityList.length”><img src="../assets/loading.gif" alt=""></div> <div class=“tm-mil-mb20” v-if=“cityList.length”> <CheckboxGroup style=“marginTop:10px;width:900px” v-model=“checkCity”> <Checkbox v-for=‘item in cityList’ :key=‘item.id’ :label=“item.regionCode”>{{item.regionName}}</Checkbox> </CheckboxGroup> <Button v-show=“cityList.length” size=“small” style=“marginTop:10px” @click=“saveCheckCity”>确定</Button> </div> </div> <p class=“tm-mil-city-title tm-mil-mb20”>已选择的地区</p> <div class=“tm-mil-line-loading” v-if=“waiting”><img src="../assets/loading.gif" alt=""></div> <div class=“tm-mil-choose-district” v-else> <div v-for="(item, idx) in allCheckCityShowList" :key=“idx”> <span class=“tm-mil-colB”>{{provinceFilter(item.province)}}</span> <span class=“tm-mil-ml10” v-for="(obj, indx) in item.cityList" :key=“indx” >{{obj}}</span> </div> <span v-if="!allCheckCityShowList.length">全部地区</span> </div> </div></template>注： <Select></Select>／<CheckboxGroup></CheckboxGroup>都是iview的组件，详情请看iview官网，同理elementUi也有相同的组件iview官网 elementUi官网 data() { return { waiting: false, // loading province: ‘’, // 当前的省 provinceList: [], // 省列表 Municipality: [{id: 2, name: ‘北京’}, {id: 3, name: ‘天津’}, {id: 10, name: ‘上海’}, {id: 23, name: ‘重庆’}, {id: 2, name: ‘北京’}], // 直辖市 cityList: [], // 城市列表 activityTime: [], // 活动时间 checkCity: [], // 当前省所选的市列表 – 展示 allCheckCityApi: [], // 所有的市列表 – 接口 allCheckCitySave: { // 存储所有选择各省对应的市列表 – 存储 // ‘10001’: [{code:‘10111’, name:‘北京’}] }, allCheckCityShowList: [ // 存储所有选择的市列表 – 展示 // { province: ‘10001’, cityList: [‘上海’, 2, 3]} ] } },函数：请输入代码 // 获取省级数据 getOrigin() { this.axios.get(/users/open/region/topRegions).then(res => { if (res.status === 200) { this.provinceList = res.data } }) } // 返回省名称 provinceFilter(id) { return this.provinceList.filter(item => item.id === id)[0].regionName } // 选择全部地区 chooseAllRegion() { this.province = 0 this.cityList = [] this.checkCity = [] this.allCheckCityApi = [] this.allCheckCitySave = [] this.allCheckCityShowList = [] } // 保存城市后存储数据 – 接口 handleSaveCityList() { let _arr = [] for (var key in this.allCheckCitySave) { _arr = _arr.concat(this.allCheckCitySave[key]) } this.allCheckCityApi = _arr } // 更改省 changeProvince(parentId) { if (!parentId) { return } this.cityList = [] //获取该省下的市列表 this.axios.get(/users/open/region/${parentId}/subRegions).then(res => { if (res.status === 200) { this.cityList = res.data } }) // 处理已经选择的市 let _checkCity = this.allCheckCitySave[parentId] || [] let _checkCityList = [] _checkCity.forEach(el => { _checkCityList.push(el.regionCode) }) this.checkCity = JSON.parse(JSON.stringify(_checkCityList)) } // 保存所选的当前市 saveCheckCity() { // 处理选择不同省，保存当前省已选择的投放城市 if (!this.checkCity.length) { return } this.waiting = true // 当前城市的省code let _province = JSON.parse(JSON.stringify(this.province)) // 当前城市的省名称 let _provinceName = this.Municipality.filter(el => el.id === _province)[0] && this.Municipality.filter(el => el.id === _province)[0].name || ’’ // 已选择城市(code name level)列表 let _arrCheckMsgList = [] // 当前选择的城市code let _arrCheck = JSON.parse(JSON.stringify(this.checkCity)) _arrCheck.forEach(el => { let _obj = this.cityList.filter(_el => _el.regionCode === el)[0] // 区别市辖区 let _regionName = _provinceName + _obj.regionName let _regionLevel = _obj.regionLevel let obj = {regionCode: el, regionName: _regionName, regionLevel: _regionLevel, parentId: _province} // let obj = {regionCode: el, regionName: _regionName, regionLevel: _regionLevel} _arrCheckMsgList.push(obj) }) // 存储到当前省对应的已选择的市列表 – 存储 this.$set(this.allCheckCitySave, _province, _arrCheckMsgList) // 保存城市后存储数据 – 接口 this.handleSaveCityList() // 处理已选择的投放地区数据展示 let _arrCheckMsg = [] // 处理展示列表－城市名称 －－ 直辖市（北京，上海等）选地区时要加上直辖市前缀，如 北京市辖区／北京县 this.cityList.map(obj => { if (_arrCheck.indexOf(obj.regionCode) > -1) { _arrCheckMsg.push(_provinceName + obj.regionName) } }) let _msgObj = { province: _province, cityList: _arrCheckMsg } let _len = this.allCheckCityShowList.filter(item => item.province === _province).length || 0 // 新增 ／ 替换 if (!_len) { this.allCheckCityShowList.push(_msgObj) this.waiting = false } else { this.allCheckCityShowList.forEach((item, idx) => { if (item.province === _province) { this.$set(this.allCheckCityShowList, idx, _msgObj) this.waiting = false return } }) } }已上，具体的解释都在注释里面，有疑问的地方欢迎留言～ ...

因为项目UI风格改版，iview提供的的定制主题满足不了需求，有些组件需要更改结构，所以需要对iview进行二次开发，封装成公司内部的组件库。步骤从github clone iview源代码，看一下它的各种配置文件尤其是package.json和.babelrc，与本地项目作比较，适当合并一下，之后删除不必要的文件，只留下 src 这个文件夹。修改本地项目的iview引入方式，只需要修改main.js里iview的引入路径,在我的项目里路径是这样：import iView from ‘./iview/src/index’; import ‘./iview/src/styles/index.less’;运行一下项目，如果不能正常运行，检查一下babel配置是不是有问题，没有将es6语法进行转换。之后就可以对iview源代码进行修改开始组件定制了。

asteroidA more comprehensive management system developed on the basis of iview-admin.这是一个基于iview-admin2.0开发的管理系统，修复了ivew-admin中的一些bug，修改了一下框架结构，并向其中加入了我自己的工具库，目前新增了日历组件、tinymce富文本编辑器组件、二维码示例、g2图表示例、聊天室示例，更多功能持续更新中。。。项目地址：https://github.com/Inspiration1/asteroidIntroduction路由配置等可参考iview-admin2.0文档https://lison16.github.io/iview-admin-doc/#/，本项目完整文档正在整理中。。。登录提供两个可供登录的账号，super_admin和admin，任意密码即可登录，两个账号权限不同，可访问的路由不同，super_admin拥有最高权限，而admin不可访问设置了权限拦截的路由。首页登录之后进入到首页，显示问候语，根据一天中的时间点不同显示不同的问候语，导航栏变更为伸缩式导航。新增组件tinymce富文本编辑器fullcalendar日历新增功能二维码名片聊天室G2图表Getting started# clone the projectgit clone https://github.com/Inspiration1/asteroid.git// install dependenciesnpm install// developnpm run devBuildnpm run build

概述ui库用的是iview . radio、radioGroup是我们非常常用的组件。radio有一个特征是选中之后无法取消。现实中取消radio的需求是常见且可以理解的。所以看到这个需求之后第一尝试 在iview组件之上搞一搞，这一搞就入坑了，现在就来理一理我的入坑之路吧。1. 原生组件radio的取消首先我们来看一下在 vue 中使用原生的radio组件如何使用取消。 原生radio取消选中的文章非常多，随便拎一篇看看就行，比如 取消radio的三种方法。嗯，原理就是给radio元素的checked属性赋值为 false。具体在 vue 中使用是这样的:const { name, value } = data;<div> <input class=“xxx” type=“radio” name={this.id} ref={name} value={value} onClick={(vlaue) => this.radioGroupChange(value, name)} /> {name}</div>;// 方法radioGroupChange (value, name) { if (this.checked === value) { // 取消选中 this.$refs[name].checked = false; // 当前选中值为空 this.checked = ‘’; } else { this.checked = value; }}这样就OK了。大概唯一区别是 在 vue中通过 ref取到真实 dom。2. iview中radio取消之路借鉴原生的radio，看来取消也不难嘛，监听radio或者 radio的change事件嘛。然而你会发现，重复点选某一个 radio的时候，iview中的on-change函数跟本木有响应。这是为什么呢？ 去 iview 源码中看一看2.1 iview组件radio源码探究先上代码为敬:先看下 radio.vue的 template<template> <label :class=“wrapClasses”> <span :class=“radioClasses”> <span :class=“innerClasses”></span> <input type=“radio” :class=“inputClasses” :disabled=“disabled” :checked=“currentValue” :name=“groupName” @change=“change” @focus=“onFocus” @blur=“onBlur”> </span><slot>{{ label }}</slot> </label></template>再看下 change的响应函数 change (event) { // debugger if (this.disabled) { return false; } const checked = event.target.checked; this.currentValue = checked; const value = checked ? this.trueValue : this.falseValue; this.$emit(‘input’, value); if (this.group) { if (this.label !== undefined) { this.parent.change({ value: this.label, checked: this.value }); } } else { this.$emit(‘on-change’, value); this.dispatch(‘FormItem’, ‘on-form-change’, value); }},一开始怀疑 change事件中对 value做了处理，只有 不一样的时候才 emit，仔细看，change函数中并没有这部分处理。问题在于 input 这里监听的 change 事件而不是 click事件，所以反复点击同一个 radio的时候没有 响应是正常的。2.2 如何监听到 click事件看到上面是不是就想 我在 radio上绑定一个click 事件就可以了；事实证明是不可以的，为什么呢？ ...

前言由于目前我在公司已经搭建了Jenkins来进行一键系统发布，同时存在测试和生产两套环境。但是目前iview-admin是不支持的，只好自己进行改造了。PS：iview-admin版本为2.1.0改造方案iview-admin 2.1.0比起iview-admin 2.0.0，移除了config目录且将vue-cli升级到3.0。所以可以使用vue-cli 3.0的环境变量和模式特性来支持多环境配置打包。在项目根目录添加环境变量文件新增开发环境文件.env.dev，内容如下：NODE_ENV = ‘dev’MOCK = trueBASE_URL= ‘/‘新增测试环境文件.env.test，内容如下：NODE_ENV = ’test’MOCK = falseBASE_URL= ‘/test’新增生产环境文件.env.prod，内容如下：NODE_ENV = ‘prod’MOCK = falseBASE_URL= ‘/prod’环境变量文件中各个属性的用途如下：NODE_ENV为对应的环境MOCK为是否引入mock.js文件的标识BASE_URL为前端项目访问时的相对地址修改package.json修改scripts的dev和build，修改后内容如下： “scripts”: { “dev”: “vue-cli-service serve –open –mode dev”, “build:test”: “vue-cli-service build –mode test”, “build:prod”: “vue-cli-service build –mode prod”, “lint”: “vue-cli-service lint”, “test:unit”: “vue-cli-service test:unit”, “test:e2e”: “vue-cli-service test:e2e” },修改后的指令npm run dev为开发调试npm run build:test为测试环境打包npm run build:prod为开发环境打包修改vue.config.js文件修改BASE_URL（此参数控制的是前端项目访问时的相对地址），改为从环境变量中获取，内容如下： const BASE_URL = process.env.BASE_URL修改src/config/index.js文件修改baseUrl，改为多个后端API接口的配置，内容如下： baseUrl: { dev: ‘http://localhost:8081’, test: ‘http://www.test.com’, prod: ‘http://www.prod.com’ },修改src/libs/api.request.js文件修改baseUrl（对应后端API接口的地址），改为根据环境变量获取对应的URL，内容如下： const baseUrl = config.baseUrl[process.env.NODE_ENV]修改src/main.js文件修改mock包引入判断，改为从环境变量中获取，内容如下： if (process.env.MOCK) require(’@/mock’)参考资料https://cli.vuejs.org/zh/guid…https://github.com/vuejs/vue-… ...

记一次用iview实现表格"合并"单元格的具体操作最近做项目使用iview框架做后台管理系统，第一次使用iview遇到过很多问题，有些小坑也都在网上找到解决方案了，可作为一个通用型框架不可能满足任凭你能想象到的功能的，但其实少了某些实际需求也未尝不是件好事，可以发挥我们作为程序员的想象空间，一开始总在table上下功夫，想着能不能用类似原生table一样加上rowspan就可以把改合并的合并起来，把该拆分的拆分开来，未果…..废话少唠，直接上代码json数据{ “data”: [{ “list”: [{ “time_period_name”: “上午上学”, “normal_amount”: 0, “be_late_amount”: 1, “leave_early_amount”: 0, “not_attendance_amount”: 0 }, { “time_period_name”: “下午上学”, “normal_amount”: 0, “be_late_amount”: 0, “leave_early_amount”: 0, “not_attendance_amount”: 1 }, { “time_period_name”: “下午放学”, “normal_amount”: 0, “be_late_amount”: 0, “leave_early_amount”: 0, “not_attendance_amount”: 1 }, { “time_period_name”: “上午放学”, “normal_amount”: 0, “be_late_amount”: 0, “leave_early_amount”: 1, “not_attendance_amount”: 0 }], “grade_name”: “幼儿园托儿班”, “class_name”: “幼儿园托儿班2班”, “date”: “2019-02-14”, “student_name”: “刘小明” }],} ]]组件代码<Table :columns=“columns” :data=“reportList” :loading=“loading” border></Table>data数据（重点来了）columns:[ {title:‘年级’,key:‘grade_name’,align:‘center’}, {title:‘班级’,key:‘class_name’,align:‘center’}, {title:‘日期’,key:‘date’,align:‘center’}, {title:‘姓名’,key:‘student_name’,align:‘center’}, { title: ‘考勤时段’, key: ’list’, align:‘center’, render: (h, params) => { return h(‘div’, { attrs: { class:‘subCol’ }, }, [ h(‘ul’, this.reportList[params.index].list.map(item => { return h(’li’, { }, item.time_period_name) })) ]); } }, { title: ‘正常’, key: ’list’, align:‘center’, render: (h, params) => { if(this.reportList[params.index].list[0].normal_amount!=undefined){ return h(‘div’, { attrs: { class:‘subCol’ }, }, [ h(‘ul’, this.reportList[params.index].list.map(item => { return h(’li’, { }, item.normal_amount) })) ]); }else{ return h(‘div’, [ h(‘span’, ‘—-’), ]) } } }, { title: ‘迟到’, key: ’list’, align:‘center’, render: (h, params) => { if(this.reportList[params.index].list[0].be_late_amount!=undefined){ return h(‘div’, { attrs: { class:‘subCol’ }, }, [ h(‘ul’, this.reportList[params.index].list.map(item => { return h(’li’, { }, item.be_late_amount) })) ]); }else{ return h(‘div’, [ h(‘span’, ‘—-’), ]) } } }, { title: ‘早退’, key: ’list’, align:‘center’, render: (h, params) => { if(this.reportList[params.index].list[0].leave_early_amount!=undefined){ return h(‘div’, { attrs: { class:‘subCol’ }, }, [ h(‘ul’, this.reportList[params.index].list.map(item => { return h(’li’, { }, item.leave_early_amount) })) ]); }else{ return h(‘div’, [ h(‘span’, ‘—-’), ]) } } }, { title: ‘未考勤’, key: ’list’, align:‘center’, render: (h, params) => { if(this.reportList[params.index].list[0].not_attendance_amount!=undefined){ return h(‘div’, { attrs: { class:‘subCol’ }, }, [ h(‘ul’, this.reportList[params.index].list.map(item => { return h(’li’, { }, item.not_attendance_amount) })) ]); }else{ return h(‘div’, [ h(‘span’, ‘—-’), ]) } } }, ],再配合css样式哈.subCol>ul>li{ margin:0 -18px; list-style:none; text-Align: center; padding: 9px; border-bottom:1px solid #ccc; overflow-x: hidden;}.subCol>ul>li:last-child{ border-bottom: none}实现效果代码完毕！！！！代码不是很好看哈，相信看完的看官已经发现了，这根本不是什么合并单元格的操作嘛，emmmmmmmmmmm，其实整理这篇笔记的目的不在于花哨的展示自己浅薄的技能，只是就开发过程中遇到的一些坎儿和解决方法分享出来，起初自己一直在“合并”和“拆分”表格上下功夫，结果就是纠缠许久也没有实现想要的效果，最后灵机一动qtnn的td和tr，于是乎tr就被div拆开了，布局也没有翻车，很奈斯，总之也算是一种解决问题的方法，就酱紫！ ...

&01.需求需求 ： 实现一个图标库的选择界面，展示UI库中所有的图标并提供选择功能ICON库——iview UI 共 860 个&02.实现思路思路 从 iview CSS 样式表中 提取所有的 .ivu-icon的样式，并处理成数组 利用 v-for 实现循环渲染基本知识参考-CSS操作CSSStyleDeclaration.parentRule属性返回当前规则所属的那个样式块（CSSRule 实例）。如果不存在所属的样式块，该属性返回null。var declaration = document.styleSheets[0].rules[0].style;declaration.parentRule === document.styleSheets[0].rules[0]&03.代码块注意！！！styleSheets、cssRules 都是 Object 类型，其本身定义了一个 length 的键值;除 length 外每个键值从0开始自增，所以在取值时以 styleSheets[0] 去取 ，并非数组的取值；还有一点要注意的是：在开发环境下，css未被打包时肯能会有多个styleSheets存在、而生产环境下css会默认被统一打成一份即只存在一个styleSheets/*** 提取ICON*/getIconsArr () { let data = []; let docSheets = document.styleSheets||[]; for ( let sheets of docSheets ) { if(sheets.cssRules.length!==0){ for (let index in sheets.cssRules) { let reStr = sheets.cssRules[index].selectorText||sheets.cssRules[index].cssText; if(reStr!=undefined&&reStr.startsWith(’.ivu-icon-’)){ data.push(reStr.split(’::’)[0].slice(10,reStr.split(’::’)[0].length)) ; } } } } // 数组去重 let set = new Set(data); this.icons = new Array(…set);}循环生成图标<Icon :type=“ico” size=“large”></Icon> 语法基于 iview UI库用法<h1>共 {{icons.length||0}} 个图标</h1><section class=“menu-icons-wrap”> <div v-for="(ico,index) in icons" :key="‘ico_’+index" @click="$store.commit(‘iconClick’,ico)" class=“menu-icons-items” :class="{‘menu-icons-items-selected’:curIcon==ico}"> <Icon :type=“ico” size=“large”></Icon> <span>{{ico}}</span> </div></section>图标的选择功能 基于 vuex 状态管理实现，选中状态由curIcon的值决定每个元素的class<style scoped> .menu-icons-wrap{ display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; position: relative; height: 40vh; width: 50vw; overflow: auto; font-size: 2em; padding: 1em; color: #000000; } .menu-icons-items{ cursor: pointer; transition:all 0.2s ease-in-out; padding:5px ; text-align: center; } .menu-icons-items p{ max-width: 5em; font-size: 0.8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-icons-items:hover{ color: #ffffff; background-color: #2d8cf0; transform: scale(1.1); } .menu-icons-items-selected{ color: #ffffff; background-color: #2d8cf0; }</style>收工 ...

[github] | [说明文档]示例let rule = [ { type:‘row’, children:[ { type:‘i-col’, props:{ span:12 }, children:[ formCreate.maker.input(‘商品名称’,‘goods_name’,‘iphone’), formCreate.maker.number(‘商品加个’,‘goods_price’,8688) ] }, { type:‘i-col’, props:{ span:12 }, children:[ formCreate.maker.dateTime(‘创建时间’,‘create_at’), formCreate.maker.radio(‘是否显示’,‘is_show’).options([ {value:1,label:‘显示’}, {value:0,label:‘不显示’} ]) ] } ] }]maker.create通过建立一个虚拟 DOM的方式生成自定义组件生成Makerlet rule = [ formCreate.maker.create(‘i-button’).props({ type:‘primary’, field:‘btn’ loading:true })]$f = formCreate.create(rule);上面的代码是通过 maker 生成器动态生成一个正在加载的 iview 按钮组件Jsonlet rule = [ { type:‘i-button’, field:‘btn’ props:{ type:‘primary’, field:‘btn’, loading:true } }]$f = formCreate.create(rule);上面的代码是通过json方式动态生成一个iview 按钮组件修改可以通过一下两种方式动态修改组件的配置项通过rule修改组件生成规则rule[0].props.loading = false;通过$f.component()方法获取组件的生成规则并修改$f.component().btn.props.loading = false;maker.template通过模板的方式生成自定义组件,maker.createTmp方法是该方法的别名生成Makerlet rule = [ formCreate.maker.template(’<i-button :loading=“loading”>{{text}}<i-button>’,new Vue({ data:{ loading:true, text:‘正在加载中…’ } }))]上面的代码是通过 maker 生成器动态生成一个正在加载的 iview 按钮组件Jsonlet rule = [ { type:’template’, template:’<i-button :loading=“loading”>{{text}}<i-button>’, vm:new Vue({ data:{ loading:true, text:‘正在加载中’ } }) }]$f = formCreate.create(rule);上面的代码是通过Json方式动态生成一个iview 按钮组件修改可以通过一下两种方式动态修改vm组件内部的值通过rule获取自定义组件的vm并修改rule[0].vm.text = ‘加载完毕’;rule[0].vm.loading = false;通过$f.component()方法获取自定义组件的vm并修改$f.component().btn.vm.text = ‘加载完毕’;$f.component().btn.vm.loading = false; ...

项目构建 * 全局安装 vue-cli $ npm install –global vue-cli * 创建一个基于 mpvue-quickstart 模板的新项目 $ vue init mpvue/mpvue-quickstart my-project * 安装依赖 $ cd my-project $ npm install * 启动构建 $ npm run dev 项目结构：引入第三方组件库踩坑 这里引入的是 iView Weapp (https://weapp.iviewui.com/docs/guide/start) 使用方法：到 GitHub 下载 iView Weapp 的代码，将 dist 目录拷贝到自己的项目中。然后按照如下的方式使用组件，以 Button 为例，其它组件在对应的文档页查看： 1. 添加需要的组件。在页面的 json 中配置（路径根据自己项目位置配置）： “usingComponents”: { “i-button”: “../../dist/button/index” } 2.在 wxml 中使用组件： <i-button type=“primary” bind:click=“handleClick”>这是一个按钮</i-button> 备注： 可以在给单独的页面新建一个main.json文件进行相应的配置。如下图： 亦可以在src文件下的app.json进行统一配置（这样就不需要每个页面都去配置一次，方便一点），详情见下图：

iview表单必填的标志显示使用iview自定义表单校验时，对于v-if显示状态的修改会影响的显示情况：使用v-if设置在新增是密码字段显示，编辑时不显示这时校验规则已完成，设置只有办公电话不是必填项切换到编辑时，密码字段消失，但是办公电话前会出现*代码<FormItem v-if=“modalType===0” label=“密码” prop=“password”> <Input type=“password” v-model=“userForm.password” autocomplete=“off”/></FormItem>截图修改：将v-if修改为v-show，可以解决这个问题原因：v-if只有在条件成立时才会生成domv-show是先生成dom，再通过css控制显示隐藏

form-create具有动态渲染、数据收集、校验和提交功能的表单生成器，支持双向数据绑定、事件扩展以及自定义组件，可快速生成包含有省市区三级联动、时间选择、日期选择等17种功能组件。已兼容iview2.和iview3.版本Github | 文档 欢迎大家收藏、点赞，多多支持。<br/>form-create 是基于 Vue开发的开源项目，可快速生成 iviewUI 的表单元素。目的是节省开发人员在表单页面上耗费的时间，从而更专注于功能开发。使用 form-creae 可快速、便捷的生成日常开发中所需的各种表单。下面向大家介绍一下 form-create 使用方法和生成原理演示生成器如何优雅的创建动态生成一个 input 输入框。内置了规则生成器，用来生成组件规则的助手方法，通过链式操作即可快速生成对应的组件规则。json使用 json 数据生成。可通过后端返回生成规则，进行渲染。php 表单生成器，这是我的另外一个开源项目。通过php生成表单规则，前端可使用 form-create 可直接根据参数进行表单渲染。这样可以很好的做到前后端分离，同时后端也可以很简便的控制表单中的组件和字段。动态渲染当生成规则发生变化时，页面也会实时更新。1.5版本新增组件缓存功能,会按需对组件进行更新，很大的提升了渲染速度和性能。自定义组件form-create 支持生成任意自定义组件，包括嵌套使用 form-create。举例在表单中生成一个 iview 按钮组件生成 elementUI 组件 参考案例使用自定义组件可提升表单的灵活性,也可以实现功能更复杂的表单。实现原理form-create 组件渲染/更新机制图form-craete 动态渲染表单机制图以上就是如何使用 form-create 生成表单生成、动态渲染、自定义组件的说明和演示，以及form-create 项目的生成原理和内部结构。如果您有任何意见或者建议可以通过留言、issue、xaboy2005@qq.com 邮箱来与我联系。✨✨✨参考VueiviewUIVue渲染函数 & JSX