weixin_44754351的博客

通常在组件使用前，需要引入后再注册，但如果高频组件多了，每次都这样做，不仅新增很多代码，效率还低！我们应该如何优化呢？其实，我们可以借助一下webpack的require.context() 方法来创建自己的（模块）上下文，从而实现自动动态require组件。我们先在components文件夹（这里面都是些高频组件）添加一个叫global.js的文件，在这个文件里使用require.context 动态将需要的高频组件统统打包进来，然后在main.js文件中引入global.js的文件。// g.

我们通常给一个元素添加 v-if / v-show 来做权限管理，但如果判断条件繁琐且多个地方需要判断，这种方式的代码不仅不优雅而且冗余。针对这种情况，我们可以通过全局自定义指令来处理：我们先在新建个 array.js 文件，用于存放与权限相关的全局函数；// array.jsexport function checkArray (key) { let arr = ['1', '2', '3', '4', 'demo'] let index = arr.indexOf(key) if .

vue中修饰符分为：表单修饰符、事件修饰符、鼠标按键修饰符、键值修饰符、v-bind修饰符1.表单修饰符这个修饰符主要是用在表单常用的v-model指令上，对表单的输入内容进行修饰，关于表单的修饰符有：lazylazy跟懒加载类似，在表单上是在我们填写信息的时候不会触发v-model值的变化，只有光标离开的时候才会赋值；也就是在input事件的oninput触发的时候不会赋值，当onchange触发时候进行赋值。<input type="text" v-model.lazy="val.

在 main.js文件 配置 errorHandlerVue.config.errorHandler = function(err, vm, info) { console.log(`组件${vm.$vnode.tag}发生错误：${err.message},${info}`)} mounted() { b },参考文档

window.location.reload();this.$router.go(0) // vue的路由实现思路window.history.go(0)

两种创建方式：1.全局定义，在main.js文件将bus挂载到vue.prototype上 import Vue from 'vue'; Vue.prototype.bus = new Vue();2.新建一个bus.js文件，作为中央总线，然后再组件引用时调用这个bus.js文件 import Vue from 'vue'; const EventBus = new Vue(); export default EventBus; 用法：父组件：<template&..

mounted() { window.onresize = function() { console.log('Still moving under gunfire…') } this.addBus() this.initCallCenter() },

用法将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。<template> <div>{{message}}</div></template><script type="text/javascript">export default { data() { return { ..

他的意思是：避免直接改变属性，因为每当父组件重新渲染时，该值都将被覆盖。相反，请使用基于属性值的数据或计算属性。道具正在变异：“dialogVisible”原因：当我们把一个弹框封装成一个组件，引入到页面后，通过父组件传递状态控制弹框显示隐藏，而关闭弹框的动作是在子组件直接修改了父组件传递过来到状态，因为组件单向数据流的思想，所以是不允许这样做的。解决方法：可以提供一个 sync修饰符...

在项目中有关于抽屉通过 esc键关闭的需求，element的Drawer控件 有自己的close-on-press-escape属性直接用，我的项目里的抽屉是自己封装的，所以需要一个监听按键的方法处理：mounted() { const _this = this document.onkeyup = function(e) { const e1 = e || event || window.event || arguments.callee.caller.arguments..

Props：include - 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max - 数字。最多可以缓存多少组件实例。用法：keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。当组件在 keep-alive 内被切换，它的 activated 和 ..

1.需求2.实现代码<el-tabs v-model="tabCurrentName" @tab-click="handleClick"> <el-tab-pane v-for="(item, index) in tabnames" :key="'customer'+index" :label="item.label" :name="item.name"/></el-tabs><keep-alive exclude="C

vue文档案列directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } }}<input v-focus>一个指令定义对象可以提供如下几个钩子函数 (均为可选)：bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。update：

<el-radio-group v-model="learnState"> <div v-for="item in radioList" :key="item.key" class="radio_css"> <el-radio :label="item.key">{{ item.value }}</el-radio> </div></el-radio-group>后端返回数据{“key”:0,“value”:“

<template> <div id="app"> <div v-drag class="drag"></div> </div></template><script>export default { name: 'App', directives:{ drag(el,bindings){ el.onmousedown = function(e){ var d

出现这个问题很多网友说是本地没有安装 vue-cli,本人装了后依然报错，最终解决方法是：删掉 node_modules，重新运行 npm install,就好了接着新的报错又来了Failed to resolve loader: vue-style-loader，解决方法： npm install sass-loader -D 和 npm install node-sass --save-dev...

给 element树组件 el-tree自定义icon图标：可以通过插槽的方式：<el-tree :data="treeData" default-expand-all node-key="id" ref="tree" @node-click="nodeClick" :props="defaultProps" highlight-current :expand-on-click-node="false" style="he

没有多余的前奏直接上代码：html：<div id="qrcode"></div>js： export default { data(){ return{ http: '', } }, created(){ this.http = 'https://h5.dingtalk.com/open-market/skuDetail.html?dd_share=f

后台管理项目涉及到文件下载到本地，类型包括（图片，音频，视频，office文件等等），只需将后台接口提供的url给到 a 标签即可。<div class="preview-download" @click.stop="downLoad(item.oldUrl)"> <a :href="flag?downUrl: '##'">下载</a></div>亲测结果：绝大多数文件可以实现下载，MP3/MP4会直接打开预览播放，所以只能让其在预览窗口点..

之前做这个功能的时候，网上大多推荐使用vue的自定义指令实现，写的过程中bug不断，只能放弃选择一下方法：实现思路：按钮权限是通过不同用户角色 配置不同的操作按钮权限。当用户登录系统随之调用后台接口 获取按钮权限的code，然后存储起来：getbutton(){ this.$store.dispatch(this.ACTIONS.GETROLEBUTTON, {}).then(result => { window.sessionStorage.setItem("btnP.

默认高亮选中树节点需要用到方法 – setCurrentKey必须设置属性 – node-keycode<el-tree :data="warehouseTree" default-expand-all // 默认展开所有节点 node-key="id" ref="tree" highlight-current :props="defaultProps" @node-click='nodeClick' :expand-o

1.vue优点？答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ；简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单；组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势；视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；虚拟DOM：dom 操作是非常耗费性能的， 不

图片类型上传的两种方式： 1--前端调用接口上传到oss, 2--本地转base64实现预览，再以formData形式提交这里只简单解释下第二种：html:<el-dialog :title="addEditType == 'add' ? '新增' : '编辑'" :visible="dialogVisible" @close="handleClose" :show-close="false" :close-on-click

接口API: P -- 传参，responseType:'blob' -- 设置导出类型为 blob, timeout: 600000 -- 单独设置导出时间 export const putinDetailexport = P => post(V1+'/materialOrder/selected/export', P,{responseType:'blob'},{timeout: 600000})业务代码:// 导出新接口 handleExportNew(){

参考： https://sortablejs.github.io/Vue.Draggable/#/custom-cloneHTML： <div class="rule-body"> <el-row> <el-col :span="6"> <div class="rule-body-left"> <div cl

HTML代码： 重点是：<pre> </pre> 标签 <el-dialog title="详情" :visible.sync="dialogVisible" width="50%"> <pre> {{objDate}} </pre> </el-dialog> js代码： handleDetail(data){ this.objDate = JSON.stringify(data, null,

创建初始化阶段：父：beforeCreate父：created父：beforeMount子：beforeCreate子：created子：beforeMount子：mounted父：mounted更新组件阶段：父：beforeUpdate子：beforeUpdate子：updated父：updated销毁阶段：父：beforeDestroy子：beforeDestroy子：destroyed父：destroyed...