vue
wangliang_001
这个作者很懒,什么都没留下…
展开
-
在Vue中导出文件格式为word
前段时间,遇到一个功能,前段将填写的数据,按模板导出到word文件。现在,在这里记录一下自己的使用心得。这里主要用到了docxtemplater, pizzip, jszip-utils, file-saver四个插件。所以首先先安装对应插件:npm i docxtemplater pizzip jszip-utils file-saver -S安装后的版本是:在安装的同时,我们在public目录(vue-cli3.0构建的项目)放下我们要导出的模板文件。我这里是将其命名world-exp原创 2020-05-29 10:34:54 · 2869 阅读 · 0 评论 -
如何在vue项目中使用Tinymce
我们在项目中,总会遇到需要使用富文本的情况,而Tinymce就是一个很不错的富文本编辑器,如何将Tinymce整合到vue项目中呢?本文是利用vue-cli3.0结合Tinymce4.x版本作的整合1、安装tinymce, @tinymce/tinymce-vue组件npm install tinymce @tinymce/tinymce-vue -S安装成功后,在node_modules目录中,查找tinymce/skins目录,将skins目录拷贝到public目录下。为了结构清晰,在s原创 2020-05-20 15:12:02 · 2112 阅读 · 1 评论 -
在使用resetField报错Cannot read property 'indexOf' of undefined
elementUI 的resetField是对整个表单进行重置,将甩有字段值重置为初始值并移除校验结果,当内容不一致,或者找不到内容时,就会报错,具体原因举例如下:原因: 当表单有v-if根据表单内部数据去控制是否显示时,会存在这个问题 <el-form ref="form" :model="form" :rules="addLabelValidator"> <el-f...原创 2020-04-22 13:28:39 · 4435 阅读 · 3 评论 -
Vue移动端项目适配方案总结
Vue移动端适配项目是采用vue-cli3.0开发,经本人研究实践,这里提供四种解决方案,亲测有效。一、lib-flexible + postcss-plugin-px2rem(推荐)安装px2rem-loader(将css中的px转换为rem)npm install px2rem-loader --save-dev移动端适配解决npm包 “lib-flexible”npm ...原创 2020-04-18 08:48:51 · 1326 阅读 · 1 评论 -
利用vue从零实现一个消息通知组件
利用vue从零实现一个消息通知组件平时,我们肯定用过类似element-ui,antd等一些UI框架,感受它们带给我们的便利。但当我们的需求或者设计这些框架内置的相差太大,用起来,就会觉得特别别扭,这时候,就有必要自己来重新造轮子。重新造轮子,有几个好处,1.所有代码都是服务你的业务,没有太多用不上的东西。2.代码是由自己维护,而不是第三方,方便维护。3.提升自己的视野,让自己站在更高的角度来...原创 2020-03-03 13:51:51 · 2136 阅读 · 0 评论 -
element-ui 在IE11上无法选择日期
当时使用element-ui的日期控件,没有问题,后来,测试提出说,默认高亮的时间要用应用服务器的时间,摸索半天,想先将服务器时间取回来,最后发现没有用,后来就跟产品反馈了这个问题,就说暂时不处理了,因为代码他了异常处理,就想改不了,也就没有将代码还原,结果,这几天,测试这边反馈说,在IE11上用不了日期控件,找了半天,最后发现是用了async语法。模板部分:<el-date-pick...原创 2020-01-17 11:13:21 · 1135 阅读 · 0 评论 -
根据element-ui封装属于自己的组件库之公用table组件
平时在开发中,会经常使用到element-ui等类似的UI组件库,而在业务开发中,经常会调用一些组件,如table组件,于是就想,可不可以将其封装起来,方便自己调用呢,于是说干就干。封装的这个组件要有以下功能:首先想的是封装的这个组件要完全覆盖element-ui组件table原生的功能。不仅支持prop方式去渲染表格列,也支持render方式渲染。支持分页于是,为了实现自己的这个想...原创 2020-01-16 11:04:46 · 2172 阅读 · 9 评论 -
记vue-cli3.0实现一个多页面应用的历奇经历
故事背景这是在刚请完假回来,一切都在计划之中,早上一来,就接到项目经历的新的需求(这个是烂摊子,已经好几个人接手,离职),我内心是拒绝的,可最后办法,没有其他人去做,最后就落在了我头上。接到需求,先看了需求,跟以前的比起来,改动挺大,数据结构全改了,如果在原来的基础上改,成本有点大,所以,就想着重启项目来实现。于是就使用vue的最新脚手架工具vue-cli3.0来初始化项目,但突然,一个会议又...原创 2019-12-20 14:30:25 · 586 阅读 · 0 评论 -
Vue中父子组件生命周期执行顺序
最近在开发中遇到一个问题,就是由于对父子组件生命周期钩子函数执行顺序理解不透彻引起的。问题是这样的:有一个组件由一系列子组件组成,子组件又被分解成组件,这样下来构成了三级组件。需求是在组件显示在页面上之后,再将数据初始化进行回显。父组件获取数据后传递到子组件,要求子组件根据这个值将内部元数据进行过滤和加工。那么在子组件中什么时机下才能获取父组件传递过来的新值呢?我的做法是这样的:最高层父组件的m...原创 2019-06-21 08:17:15 · 1395 阅读 · 0 评论 -
Vu Virtual DOM
Virtual DOM这个概念相信大部分人都不会陌生,它产生的前提是浏览器中的DOM是昂贵的,为了更直观的感受,我们可以简单地把一个div元素的属性都打印出来,可以看到真正的DOM元素是非常庞大的,因为浏览器的标准就把DOM设计得非常复杂。当我们频繁地去做DOM更新,会产生一定的性能问题。而Virtual DOM就是用一个原生的JS对象去描述一个DOM节点,所以它比创建一个DOM的代价要小得多。...原创 2019-06-05 08:36:29 · 289 阅读 · 0 评论 -
vue中的双向数据绑定
什么是双向数据绑定?vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也是算是vue的精髓之处了。值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的,非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提,如果我们使用vuex,那么数据流也是单向的,这时就会和双向数据绑定有冲突,我们可以这...原创 2019-06-05 08:07:44 · 513 阅读 · 1 评论 -
$attrs,$listeners,inheritAttrs
$attrs包含了父组件中不被认为(且不预期为)props的特性绑定(class和style除外)。当一个组件没有声明任何props时,这时会包含所有父组件的绑定(class和style除外),并且可以通过v-bind="$attrs"传入内部组件-在创建更高层次的组件时非常有用。$listeners包含了父组件中的(不含.native修饰器)v-on事件监听器。它可以通过v-on="$li...原创 2019-06-20 07:59:51 · 201 阅读 · 0 评论 -
vue-cli3.0如何mock数据
在vue-cli3.0中mock数据在vue-cli3.0中mock数据,可以通过vue.config.js中的devServer配置项来mock数据。devServer: { before(app) { app.get('/api/seller', (req, res) => { res.json({ errno: 0, ...原创 2019-06-15 08:55:53 · 1240 阅读 · 0 评论 -
vue的diff算法
1.当数据发生变化时,vue是怎么更新节点的?要知道渲染真实的DOM的开销是很大的,比如有时候我们修改了某个数据,如果直接渲染到真实dom上会引起整个dom树的重绘和重排,有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢?diff算法能免帮助我们。我们先根据真实DOM生成一颗virtual DOM,当virtual DOM某个节点的数据改变后会生成一个新的Vnode,然后Vn...原创 2019-06-05 15:41:15 · 212 阅读 · 0 评论 -
vue-router设置mode为history页面报Cannot Get
场景在开发环境中,觉得通过hash方式访问链接有点奇怪,就想使用history模式,于是在router/index.js设置:import Vue from 'vue'import VueRouter from 'vue-router'import routes from './routes'Vue.use(VueRouter)const router = new VueRouter...原创 2019-03-29 20:40:17 · 3033 阅读 · 2 评论 -
Vue项目中常用的插件
1.vue-router: 页面路由,用于做单页面应用(SPA)。2.vuex: 数据状态管理。3.vue-navigation: 记录路由并缓存页面,像原生APP导航一样。4.vconsole: 移动端调试利器5. axios: 一个很好的ajax封装集6. fastclick: 为了能够立即响应用户的点击事件,解决移动端click 300ms延迟,才有了FastClick。7. w...原创 2019-02-12 15:27:35 · 1111 阅读 · 0 评论 -
自定义修改elementUI组件样式
自定义修改elementUI组件样式方法1.删除组件中的scoped属性方法2. 利用/deep/方法3.弄一个全局的样式文件,来修改element-ui组件样式,然后在入口文件(main.js)中引入方法1.删除组件中的scoped属性注意不需要scoped作用域,不然修改不了。方法2. 利用/deep/方法3.弄一个全局的样式文件,来修改element-ui组件样式,然后在入口文件...原创 2018-12-04 14:26:02 · 2753 阅读 · 1 评论