vue问题

置顶一朵盆栽

已于 2024-05-05 00:31:03 修改

阅读量663

点赞数

分类专栏： vue 文章标签： vue.js javascript

于 2021-08-28 17:28:14 首次发布

本文链接：https://blog.csdn.net/s8806479/article/details/119970754

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

echarts

echarts报错TypeError: Cannot read property ‘init‘ of undefined

import echarts from ‘echarts’ 改成 import * as echarts from ‘echarts’

柱状图坐标轴名称过长显示不全问题与解决方法

https://blog.csdn.net/weixin_48911357/article/details/124634329

其他Vue2问题

vue2与vue3区别

https://www.cnblogs.com/DDjans/p/14841205.html
https://www.cnblogs.com/DDjans/p/14844364.html
https://www.cnblogs.com/DDjans/p/15160964.html
https://www.cnblogs.com/DDjans/p/15430720.html
https://www.cnblogs.com/DDjans/p/15718186.html

mockjs模拟数据

mock文件夹两处，api文件夹一处，自行了解

父子组件报错

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “showDialog”
大概意思是：避免直接更改一个PROP，因为每当父组件重新呈现时，该值就会被覆盖。
解决办法：
一、不要直接引用父组件传过来的值，可以把接收到的父组件的值赋值给一个新的参数
二、如果是dialog，去掉原来el-dialog默认：visible.sync改为:visible,手动加close事件触发关闭事件触发，即可解决
Vue中prop的传递是单向下行绑定的，也就是说只能父传给子，不能反过来，用sync,visible就实现了父子同步，父组件初始化visible,子组件调用关闭事件，触发父组件update事件，父组件在update事件中更新visible变量，改变子组件可见的状态，但是如果dialogFormVisible是对象，则无法update也会报错

  <el-dialog
      :title="title"
      :visible="dialogFormVisible"
      @close="toggleDialog"
    >

el-table 动态响应屏幕尺寸实现表头固定，不出现滚动条

this.$nextTick(function() {
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 100;
    // 监听窗口大小变化
    let self = this;
    window.onresize = function() {
      self.tableHeight = window.innerHeight - self.$refs.table.$el.offsetTop - 100
     }

.prevent .stop .once .capture .self区别

https://blog.csdn.net/weixin_43873005/article/details/89501985

在elementUI函数的默认传参之外，额外传入自定义参数

运用闭包

//项目实例
<el-autocomplete class="inline-input"
                 v-model="scope.row.ChanpinXH"
                 :fetch-suggestions="((queryString,cb)=>{querySearch1(queryString,cb,scope)})"
                 placeholder="请输入产品型号"
                 @select="handleSelect(scope)"
                 :disabled="!scope.row.ChanpinMC">
</el-autocomplete>

el-autocomplete不显示下拉框中的值

这是el-autocomplete的一个坑，el-autocomplete显示的时候必须有value字段

//项目实例
for (let i = 0; i < response.data.Data.length; i++) {
          this.CPFL.push({
            value: response.data.Data.map(item => item.ChanpinMC)[i],
            ChanpinXH: response.data.Data.map(item => item.ChanpinXH)[i],
            Danjia: response.data.Data.map(item => item.Danjia)[i],
          })
        }

el-table末行计算指定列

https://blog.csdn.net/z9061/article/details/95601064
下面的项目实例是计算分页所有行的总价

//合计行
    getSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        // const values = data.map(item => Number(item[column.property]));
        if(column.property === 'Shuliang'){
          sums[index]=this.allNumber
        }else if(column.property === 'Heji'){
          sums[index]=this.allPrice
        }
      });
      return sums
    },

解决前端页面中DOM加载及数据获取的延迟问题

setTimeout(() => {}, 500);
===> setTimeout用来解决第一次查看表单没有赋值成功问题
this.$nextTick(() => {});
$nextTick是vue的DOM更新队列的下一个tick完成时触发；
===> 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

//等DOM加载完之后再给表单赋值
this.$nextTick(() => {
	this.$refs.modelForm.form.setFieldsValue(formValues);
})

注意
数据获取有延迟时使用：setTimeout(() => {}, 500);
DOM加载有延迟时使用：this.$nextTick(() => {});

eslint修正

npm run lint --fix

el-upload放图片出现白边/需求自适应

修改封面图窗口大小样式。
.el-upload { //这是上传图片父容器。
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
display: flex;
justify-content: space-around;
align-items: center;
}
修改图片大小样式。
.avatar { // 这是上传图片子容器。
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
display: block;
}

Vue组件库elementUI 在el-row 或 el-col 上使用@click无效失效

在click后面加上 .native

vue实现点击下载单图到本地

https://blog.csdn.net/sumimg/article/details/102969740

vue element-ui列表中el-switch 开关,使用0和1

https://blog.csdn.net/qq_35430000/article/details/99760226

VUE 图片:src方式引用加载不出来

src路径加require(）

表单验证校验一直弹出请输入

确保使用:model，而不是v-model

<el-form :model="form" ref="form" :rules="rules" label-position="left" label-width="120px">
</el-form>

生成二维码

npm install qrcodejs2 -S

//需要使用 qrcodejs2 页面引入该依赖：
import QRCode from 'qrcodejs2'

<div class="Qrcode"  >
    <!-- 生成二维码 -->
    <div id="qrcode" class="share"></div>
</div>

.Qrcode
  {
    width: 100%;
    height: 250px;
  }
  
  .share{
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    margin-top: 25px;
    margin-bottom: 25px;
  }

qrcode() {
      document.getElementById("qrcode").innerHTML = "";//清除上一次生成的二维码，防止刷新生成多个二维码
      let qrcode = new QRCode('qrcode', {
            width: 80,//二维码宽度
            height: 80,//二维码高度
            text:  'content', // 二维码内容
            colorDark: "#000",
            colorLight: "#fff",
    })
}

class和style个人不常用的数组语法

class

 <span :class="[isActive ? activeClass : '', errorClass]">自助终端设备信息</span>
 data: {   
    activeClass: 'active', 
    errorClass: 'text-danger',
    isActive:true,
 } 
 .text-danger{
    color: red;
}
.active{
    font-size: 40px;
}

style

 <div :style="[styleColor, styleSize]"></div>
 <div :style="[total===1?styleColor:styleSize]"></div> //可以三元
  data: {
   total:,
   styleColor: {
      color: 'red' 
   }, 
  styleSize:{ 
     fontSize:'23px'
   }
 }

Vue 的父组件和子组件生命周期钩子函数执行顺序？

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：

加载渲染过程
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
子组件更新过程
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
销毁过程
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

出现一个refs子组件死活拿不到值的情况

排斥一下ref元素是否有v-if，把它设置成true再进行子组件内部方法操作

dayjs几个常用方法

https://dayjs.fenxianglu.cn/category/manipulate.html#%E5%A2%9E%E5%8A%A0
https://www.cnblogs.com/Airon-wei/p/14362160.html

dayjs().startOf('month')//取本月
dayjs().startOf('week').add(1, 'day')//本周起加一天
dayjs().add(-1, 'month').startOf('month').format('YYYY-MM-DD')//上月

postcss-px-to-viewport插件无法自适应

所有样式，包括ui组件样式的style放进class中才可以，
echarts自适应需要自己用窗口宽度判断

使用element-puls Carousel走马灯(轮播图)第一张不显示的问题

加v-if，判断当列表不为空

Vue3 对话框弹框无法出现

加nextTick
在这里插入图片描述

v-show作用在template上不生效

template改div

activated和mounted/created同时执行时，生命周期执行取一

顺序是created>>mounted>>activated，加个run参数控制即可
在这里插入图片描述

keepalive

首先在路由中的meta标签中记录meta的属性为true

{
    path: "/userInfo",
    component: () => import("@/views/UserInfo/Index"),
    meta: {
      title: "首页",
      keepAlive: true // 缓存该页面
    }
  },

在创建router实例的时候加上scrollBehavior方法

const router = new VueRouter({
  routes,
  // 点击浏览器的前进后退或切换导航触发
  scrollBehavior: function (to, from, savedPosition) {
    return savedPosition || { x: 0, y: 0 }
  }
});

在需要缓存的router-view组件上包裹keep-alive组件

<keep-alive>
    <router-view v-if="$route.meta.keepAlive" v-wechat-title="$route.meta.title" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" v-wechat-title="$route.meta.title" />

当出现:bind=后面参数string无法转换成data里的参数，请在外面再包一层类似file这种对象

在这里插入图片描述

element-ui的el-upload上传文件按钮在选取文件按钮禁用后仍可点击问题

https://blog.csdn.net/migexiaoliang/article/details/126474108

vant 表单van-field的v-model值写watch监听修改不动

因为van-field绑定值不是响应式，需要修改成响应式才能监听

只watch一次

	let flag=true
	this.$watch('监听参数', function (newValue, oldValue) {
		if(flag){
		      this.getPointByLgLa()
		}
    });

假如路由不用import导入，$route.path可能会是/

https://blog.csdn.net/weixin_46112225/article/details/122059967

其他Vue3问题

watchEffect中的异步问题

4-12

一朵盆栽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue问题

mockjs模拟数据mock文件夹两处，api文件夹一处，自行了解报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “showDial
复制链接

扫一扫