vue篇（技术总结 持续更新）

20230911 H5跳转到小程序，监听从小程序返回事件，执行刷新动作

// 监听页面显示隐藏
export const onPageShow = (callback) => {
  document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "visible") {
      console.log("监听页面显示");
      callback();
    }
    if (document.visibilityState === "hidden") {
      console.log("监听页面隐藏");
      const removeBtn = document.createElement("button");
      removeBtn.onclick = () => {
        window.removeEventListener("visibilitychange");
      };
    }
  });
};

import { onPageShow } from "@/utils/index";

onPageShow(async () => {
  getTaskListData();
});

20230907 长按图片识别二维码实现方案，监听长按事件，关闭弹窗

<img @touchstart="start">
const start = async () => {
  setTimeout(function () {
    gzhDialog.value = false;
  },500)
};

20220822 elementUI v-for 对象数组 输入框不能输入下拉框无法选择

this.$set(OriginData(Array/Object), key/index, tragetData);
this.$set(this.data,'btns',[])
三个参数：
1、源数据，可以是数组或者对象
2、修改的目标， 数组时下标、对象是key
3、替换的新数据

20210928 vue常用的修饰符

.trim v-model修饰符 自动过滤首尾空白字符 <input v-model.trim="msg">{{msg}}
.lazy v-model修饰符 将input事件改为change事件 <input v-model.lazy="msg">{{msg}}
.number 将输入值转为数值类型 <input type="number" v-model.number="msg">{{typeof(msg)}}

.stop 事件修饰符 阻止事件冒泡 <button @click.stop="doThis"></button>
.once 事件修饰符 事件将只触发一次 <button @click.once="agree"></button>
.enter 键盘修饰符 监听键盘事件有动作时触发<input @keyup.enter="submit">

.native 在父组件中给子组件绑定一个原生的事件 就将子组件变成普通的HTML标签

20210601 proxy配置代理遇到的一个问题

    proxy: {
      '/api': {
        target: process.env.VUE_APP_BASE_API,
        changeOrigin: true,
        pathRewrite: {
          '^/api': 'api'
        }
      },
      '/close': {
        target: process.env.VUE_APP_BASE_API,
        changeOrigin: true,
        pathRewrite: {
          '^/close': ''
        }
      }
    }

后台接口中有 api 前缀 无论是开发环境还是编译后的包 都不影响
后台接口中不存在close 开发环境 会进入代理 并将close移除掉 无影响
但是编译后的包 进入不到代理 请求接口回加上close前缀 导致接口404

20210511 require不存在的文件时如何避免报错

this.bankList = res.data.filter((item, index) => {
  try {
    item.bankBgUrl = require('@/assets/images/bank/'+item.bankName+'.png')
  }
  catch(err){
    item.bankBgUrl = require('@/assets/images/bank/默认银行卡.png')
  }
  return item
});

20210429 移除el-form表单校验

this.$refs[formName].clearValidate();

20210312 修饰符native和sync的区别

• 组件上使用原生事件不生效时，只要加上native就可以了。例如：<hello @focus.native="fn1"></hello>
• sync主要用于子组件要修改prop数据的一种语法糖，其作用是简化子组件自身想改变自身的数据。

20210201 ios端微信浏览器里keepAlive不生效的问题

1.在需要keepAlive的页面路由里配置对应的saveSrollTop:true（缓存滚动条位置）
2.用scrollBehavior处理滚动位置（滚动到之前存好的位置）
export default new Router({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      if (from.meta.saveSrollTop) {
        from.meta.savedPosition = document.documentElement.scrollTop || document.body.scrollTop;
      }
      return {x: 0, y: to.meta.savedPosition || 0};
    }
  },

20210201 vant轮播图滑动时为什么触发了click事件

这种情况通常是由于项目中引入了fastclick库导致的。fastclick的原理是通过 Touch 事件模拟出 click 事件，而 Swipe 内部默认会阻止 touchmove 事件冒泡，干扰了 fastclick 的判断，导致出现这个问题。将 Swipe 组件的 stop-propagation 属性设置为 false 即可避免该问题。

20210201 h5视频组件配置封面和禁止默认全屏播放

<video controls :playsinline='true' :src="module.videoUrl" :poster="module.videoCover"></video>

20210129 移动端页面滚动到指定位置

document.getElementById("page").scrollIntoView();

20210113 uniapp获取当前页面路由及参数

let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
let curRoute = routes[routes.length - 1].route; //获取当前页面路由
let curParam = routes[routes.length - 1].options; //获取路由参数

20201229 vue框架中定义全局的方法

// 在main.js中
Vue.prototype.toPage = function(path, query) {
  router.push({
    path: path,
    query: query,
  });
};
// 在页面中
this.toPage("/takeOutResult", {});

20201215 v-for列表数组使用下标赋值页面无更新 修改数组对象下数组对象值不更新

this.secondList = this.secondList.slice()

20201104 filter过滤器的使用

首先过滤器分为全局过滤器和局部过滤器，其主要用途是对页面数据进行批量处理。简化单个处理的繁琐操作逻辑，例如日期格式的处理等。

过滤器的使用

• 先注册，后使用

• 组件内 filters:{ 过滤器名: fn } fn 内通过 return 返回最终的数据

• 全局 Vue.filter('过滤器名',fn) fn 内通过 return 返回最终的数据

• 使用 {{ 数据 | 过滤器名 }}

过滤器的功能函数

• 声明 function(data,argv1,argv2...){}

• 第一个参数是传入的要过滤的数据，即调用时管道符左边的内容。

• 第二个参数开始往后就是调用过滤器的时候传入的参数。

<p v-for="(item,index) in 4">{{index|myFilter('xxx')}}</p>

filters:{
  myFilter(value,value2){
    return value+value2;
  },
},

20201104 watch和computed的区别是什么

watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：
当某一个数据发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。

computed是一个计算的属性，可以对数据处理得到一个新的state，而watch是对原有的state做异步改变。
computed计算出来的的属性无需定义可以直接在dom中使用，该操作简化了模板中太多声明式的逻辑。

watch和computed各自处理的数据关系场景不同，watch擅长处理的场景：一个数据影响多个数据时；computed擅长处理的场景：一个数据受多个数据影响时。总结：如果页面数据需要经过复杂计算就用 computed，如果一个数据需要被监听并且对其他数据做一些操作就用 watch。

input type="text" v-model="aaa"> <span>{{bbb}}</span>
<p v-for="(item,index) in 4">{{ccc(index)}}</p>

data() {
  return {
    aaa:'张三',
    bbb:'',
  }
},
watch: {
  aaa:function(){
    this.bbb = this.aaa;
  },
},
computed:{
  ccc:function() {
    return function(e){
      return e*2 + this.aaa;
    }
  }
},

20201104 enum枚举的理解和使用

个人理解：更像是一个常量数组，本质就是键值对的形式，用于取值被限定在一定范围内的场景，比如一周只能有七天等。
枚举使用 enum 关键字来定义：enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat}。
枚举成员会默认被赋值为从 0 开始递增的数字，同时也会对枚举值到枚举名进行反向映射。字符串枚举不会进行反向映射。
当然也可以手动赋值，未手动赋值的枚举项会接着上一个枚举项递增。
如果未手动赋值的枚举项与手动赋值的重复了，TypeScript 是不会察觉到这一点的，但反向取值的是时候是会被覆盖掉的。

20201104 vue如何自定义指令

官方解释：对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。
尝试理解：指令中封装了一些 DOM 行为，对于页面和数据更为方便的输出，这些操作就叫做指令。

vue常用内置指令：v-bind、v-model、v-if、v-show、v-else、v-for、v-html、v-text、v-on等。
自定义指令提供了五个勾子函数：bind、inserted、update、componentUpdated、unbind。

自定义指令分为：全局指令、局部指令。还包含：带参数的自定义指令。

参考文章：
自定义指令 — Vue.js
Vue自定义指令及使用 - sugar_coffee - 博客园
[vue]使用自定义指令实现表单校验_让勤奋成为习惯-CSDN博客_vue 自定义指令表单验证

20201019 elementUI只能选最近12周和前三个月

// 禁用周
        pickerOptions2: {
          disabledDate: (time) => {
            // 上周周日 = 当前日期-当前周几
            var current = (new Date().getTime())-24*60*60*1000*(new Date().getDay())
            // 12周以前周日 = 当前时间 - 12周时间
            let week12 = 24 * 60 * 60 * 1000*7*12;
            let week12Ago = current-week12;
            // 禁用大于上周周日的部分 和小于12周以前的部分
            return time.getTime() > current || time < week12Ago
          },
          firstDayOfWeek:1, // 设置从周一开始
        },
// 禁用月
        pickerOptions: {
          disabledDate: (time) => {
            // 获取前三个月时间
            let date1 = new Date();
            date1.setMonth(date1.getMonth()-2);
            let year1=date1.getFullYear();
            let month1=date1.getMonth();
            month1 =(month1<10 ? "0"+month1:month1);
            let three = (year1.toString()+'-'+month1.toString());
            // 禁用三个月前 和当月之后
            let min = new Date(three).getTime()
            var current = new Date()
            return time.getMonth() >= current.getMonth() || time < min
          },
        },

20200929 在有多个echarts图表的vue页面中 首次进入页面会滚到中间 处理方法

document.querySelector('.report').scrollIntoView({ behavior: 'smooth' })

20200922 在router-link上添加click事件会被拦截无效，需要加.native修饰符

20200921 做@input时，使用传统input标签，输入汉字时可能会出现接口调用多次的情况，可改用el-input标签，避免问题产生。例：资讯搜索

20200910 vue多层循环，动态改变数据后渲染的很慢或者不渲染

可在动态改变数据的方法 第一行加上 this.$forceUpdate(); 例如：
foldComment(row:any){
    this.$forceUpdate();
    this.commentInfo.commentList.map(function(item:any) {
      if(item.commentId==row.commentId){
        item.isShowMoreComment = !item.isShowMoreComment
        return item;
      }
    })
  }

20200909 el-table高度自适应

:maxHeight="tableHeight"
tableHeight:window.innerHeight-300

20200907 blur事件优先于click事件问题

可采用mousedown来代替click

20200811 vue中局部页面滚动到最底部

this.$nextTick(() => {
  let tablePar = this.$refs["container"];
  tablePar.scrollTop = tablePar.scrollHeight;
});

20200805 elementUI文本域自适应高度并且给最大行数

<el-input type="textarea" :autosize="{maxRows:4}"></el-input>

20200804 如何修改el-table文本超出show-overflow-tooltip的显示宽度

<style lang="scss"> .el-tooltip__popper{ max-width:50% } </style>

20200730 在vue的template结构里面使用moment日期格式化组件需要再data里面返回一下

cnpm i moment --save
import moment from 'moment'

data() {
      return {
        moment,

<template slot-scope="scope">
  <span>{{moment(scope.row.updatedDate).format('YYYY-MM-DD')}}</span>
</template>

20200728 el-table行内嵌入el-input做当行修改时 启用禁用通过配置disabled属性无效 可能是因为该属性不是原有的 可通过先配置属性再赋表格数据的方式来解决

if (res.code === 200) {
  let list = res.data;
  this.recordList = list.map(function(item) {
    item.disabled = true;
    return item;
  })
}

20200707 vue如何获取上一个返回页面的路由

 beforeRouteEnter(to, from, next) {
   next(vm=>{
      // 这里的vm指的就是vue实例，可以用来当做this使用，赋值需用vm
      console.log(to)
      console.log(from)
    })
  }

20200706 IP有端口号 域名不会有端口号 域名是解析过的

20200703 vue从详情页返回列表保存列表位置状态不变

router里面配置 meta: { keepAlive: true },
位置确实记录上了(加缓存，返回不刷新页面)，弊端就是返回不触发created和mounted，
所以有些页面需要返回触发的东西都写在activated里面。

20200702 vue如何阻止事件冒泡

<div v-for="(item, index) in list" @click="handleClick">
  <span @click.stop="handleClick2"></span>
</div> 

20200701 vue的element上传图片成功回调参数传参数下标

:on-success="handleAvatarSuccess.bind(this,items.TagName)"
// 利用es5的bind函数！ this是当前，items.TagName是携带的参数
handleAvatarSuccess (idx, res, file, name) {
  console.log(res)
  console.log(file)
  console.log(idx)
  console.log(name)
  this.orderInfo['idx'] = URL.createObjectURL(file.raw)
},

<el-upload
              :action="questionUploadFile"
              :show-file-list="false"
              :on-success="handleAvatarSuccess.bind(this,index,index2)"
              :before-upload="beforeFileUpload"
              :on-change="fileChange">
              <img v-if="option.imageUrl" :src="option.imageUrl">
              <i v-else class="el-icon-picture-outline" style="font-size: 20px;margin-right: 6px;margin-top: 4px;"></i>
            </el-upload>

handleAvatarSuccess(index,index2,res,file) {
        console.log(index,index2)
        console.log(res)
        console.log(file)
        console.log(URL.createObjectURL(file.raw))  // 打印本地路径
        if (res.code === 200) {
          this.list[index].questionChoiceList[index2].imageUrl = res.data;
        }
      },

20200320 方法中如何同时传event和参数

<input type="file" name="file" @change="getImage($event,scope.$index)"/>

20200227 el-table表格出现抖动闪动情况

.el-table{
  width:99.9%;
}

20200121 vue 报错：Cannot read property '_wrapper' of undefined

通常情况下是@click的方法没有在methods中定义，一个个去排查吧

20200117 el-select设置value为对象

普通的，如果直接传对象，会显示如下效果，解决办法：el-select加value-key属性唯一标识

<el-select
  value-key="fundCode"
  v-model="data.mainType"
  default-first-option>
  <el-option
    v-for="item in fundList"
    :label="item.fundName"
    :value="item"
    :key="item">
  </el-option>
</el-select>

20200109 el-table勾选和取消勾选以及获取勾选的值

// 勾选和取消勾选 rows为数组 type为true或false
toggleSelection(rows,type) {
  if (rows) {
    rows.forEach(row => {
      this.$refs.multipleTable.toggleRowSelection(row,type);
    });
  } else {
    this.$refs.multipleTable.clearSelection();
  }
},
// 获取勾选的值 拿到的是数组
handleSelectionChange(val) {
  this.multipleSelection = val;
}

为什么vue组件中data必须是一个函数而不是对象

在new vue()中 data可以直接是一个对象 
new Vue({
  el: '#app',
  template: `<div>{{name}}</div>`,
  data: {
    name: 'tony'
  }
})

为什么在vue组件中 data必须是一个函数呢？
我们大致可以通过js原型链来对比下：

var Component = function() {};
Component.prototype.data = {
  demo: 123
}
var component1 = new Component();
var component2 = new Component();
component1.data.demo = 456;
console.log(component2.data.demo); // 456

从上面可以看出，两个实例都引用同一个对象，其中一个改变的时候，另一个也发生改变。
每一个vue组件都是一个vue实例，通过new Vue()实例化，引用同一个对象。
如果data直接是一个对象的话，那么一旦修改其中一个组件的数据，其他组件相同数据就会被改变。
而data是函数的话，每个vue组件的data都因为函数有了自己的作用域，互不干扰。

多个路由指向同一个组件来回切换时不刷新问题

第一种.<router-view :key="$route.path">
第二种.组件页面中加watch监听 监听变化
export default {
  watch: {
    '$route' (to, from) {
      console.log('to=' + to)
      this.reload()
    }
  }
}
第三种.使用vue2.2中引入的beforeRouteUpdate导航守卫（原理同上者，方式略不同）
<template>
  <router-view ></router-view>
</template>
export default {
  beforeRouteUpdate (to, from, next) {
    console.log('routeUpdate：to=' + to.fullPath + ';from=' + from.fullPath)
    next()
  }
}

elementUI tree树形控件选择了子节点如何同时获取父节点

this.$refs.tree.getHalfCheckedKeys().concat(this.$refs.tree.getCheckedKeys())

element-ui框架的el-dialog弹出框被遮罩层挡住了

解决办法：在el-dialog标签里添加 :modal-append-to-body='false'或append-to-body

编辑时表单中el-radio el-check无法点击选择的情况

form对象从row拿到的值没有包含当前属性 直接赋值的话就会出现这种情况
解决办法：用$set赋值  this.$set(this.form,'isMaxNums',this.form.IssueQuantity>10000?2:3);
2020.7.6再次遇到：self.$set(item,'radio',null); self.$set(item,'check',[]);

vue-cli项目build后 部署到服务器 css/js报404

修改config目录下index.js 里面的assetsPublicPath: '/' 为assetsPublicPath: './'

如何修改v-html内图片的或文字的样式

单独写一个style标签 加样式

vue-cli项目性能加载优化

1.vue-router路由懒加载（解决vue项目首次加载慢）
2.vue-cli代码包优化 屏蔽SourceMap（配置productionSourceMap: false）

vue页面数据更新后如何回滚到最顶部

刚开始用的scrollTo(0,0) 发现时灵时不灵 改进之后 先获取当前页面节点 再去滚动
document.getElementsByClassName('news_detail')[0].scrollTo(0,0);

elmentUI+vue实现多选框遍历数组对象

// 需要label的是整个对象 而不是具体的id或name
<template>
  <el-checkbox-group v-model="checkedCities">
    <el-checkbox v-for="city in cities" :label="city" :key="city.id">{{city.cityName}}</el-checkbox>
  </el-checkbox-group>
</template>
<script>
  export default {
    data() {
      return {
        checkedCities: [{id: 1, cityName: '上海'}],
        cities: [{id: 1, cityName: '上海'}, {id: 2, cityName: '北京'}]
      };
    }
  };
</script>
// 以上写法 针对对象数组 有时候也无效 可用label去控制id 默认选中的checkedCities也给id数组
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
  <el-checkbox v-for="(city,index) in cities" :label="city.id" :key="index">{{city.name}}</el-checkbox>
</el-checkbox-group>