Vue
xh慧
这个作者很懒,什么都没留下…
展开
-
element表单动态生成多个表单项,并验证
项目中有需求,一行显示多个表单项,同时,这些表单项要支持动态增加与验证,实现效果如下:点击右侧的加号就会生成一行部门数据,并支持删除与验证.实现思路是:一行展示多个表单项,使用layout布局实现(即el-row与el-col);动态添加行,通过for循环div来实现;主要的问题是验证,参考官网的例子,需要动态设置prop,并在单个表单项中添加验证,例子如下:只不过官网是新增的一个表单项,我们是三个.整合之后,具体的实现代码如下:<el-form :mode.原创 2021-09-01 10:04:40 · 2305 阅读 · 4 评论 -
vue实现折叠面板展开与收缩效果
vue中展开与缩放动画,网上大多都是通过监测max-height属性来实现,亲测了一下,有卡顿现象,效果并不理想,最后发现可以通过css+js的方式,通过高度height变化来实现动画。html代码:<div class="collapse-item" v-for="(item,index) in linkList" :key="item.name"> <div class="collapse-tab" @click="onTabChange(item,index)">.原创 2020-11-25 14:04:31 · 5274 阅读 · 1 评论 -
vue 拼接html添加点击事件
在项目中某些情况不能使用vue的模板,需要拼接出html。在网上看了很多资料发现都不行,最后使用最原始的方法,在此记录一下。一开始我的思路是点击事件调用vue中的方法,html字符串如下,使用的是es6的模板字符串:var contentHtml = `<div> <div class="title"> <span>情况信...原创 2020-05-07 13:42:58 · 5243 阅读 · 0 评论 -
iView 国际化
Vue国际化使用的是vue-i18n组件,需要先进行安装:npm install vue-i18n安装完成后,在main.js文件中使用,main.js完整内容如下: import Vue from 'vue';import App from './App';import router from './router';import store from './sto...原创 2019-01-14 17:24:31 · 1251 阅读 · 0 评论 -
Vue Router使用笔记
Vue Router 是Vue.js官方的路由管理器。使用Vue Router,我们需要做的是,将组件 (components) 映射到路由 (routes),然后告诉 Vue Router 在哪里渲染它们。简单来说就是,定义好路由,然后使用<router-view>标签指定渲染路由的地方。我使用的是webpack模块化工程,需要先通过npm或yarn安装路由。具体...原创 2019-05-09 16:09:04 · 456 阅读 · 0 评论