vue 问题汇总

问题一

element-plus 插件报错

Module not found: Error: Package path ./lib/locale/lang/zh-cn is not exported from package ...项目路径\node_modules\element-plus (see exports field in ...项目路径\node_modules\element-plus\package.json)



ERROR in ./src/plugins/element.js 2:0-48
Module not found: Error: Package path ./lib/theme-chalk/index.css is not exported from package ...项目路径\node_modules\element-plus (see exports field in ...项目路径\node_modules\element-plus\package.json)
 @ ./src/main.js 5:0-51 7:0-18

ERROR in ./src/plugins/element.js 3:0-56
Module not found: Error: Package path ./lib/locale/lang/zh-cn is not exported from package ...项目路径\node_modules\element-plus (see exports field in ...项目路径\node_modules\element-plus\package.json)
 @ ./src/main.js 5:0-51 7:0-18

方法

之前的代码

import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import locale from 'element-plus/lib/locale/lang/zh-cn'

export default (app) => {
  app.use(ElementPlus, { locale })
}

修改后的代码

import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'
import locale from 'element-plus/es/locale/lang/zh-cn'

export default (app) => {
  app.use(ElementPlus, { locale })
}

总结

安装的element-plus 2.4.2 依赖, 里面部分代码路径更新了, 导致插件中的配置有问题

问题二

tab切换（VUE中el-tabs切换）echarts无法显示的问题

最近刚好项目里需要用到tab切换显示echarts,也同样出现了图表总是刷不出来的问题。对于这个问题我也是翻看了很多资料哈，其实最后都不是我想要的效果之类的，比如说v-if之类的，话不多说直接上我自己的解决办法

方法一

每次tab切换时我们只需要重新获取到该标签，然后调用一下resize就行

var echarts = require('echarts');
this.dataChart = echarts.init(document.getElementById('dvDataCharts'));

在el-tabs事件tabChange里引用echarts的resize(),前面一定要加this.$nextTick哦

方法二

var echarts = require('echarts');
this.dataChart = echarts.init(document.getElementById('dvDataCharts'));
handleClick (active) {
  if(active.name == 'echart'){
    this.$nextTick(()=>{
      this.dataChart && this.dataChart.resize();
      //echarts.getInstanceByDom(this.$refs.dvEchart).resize();
    })
  }

},

总结

每次tab切换时我们只需要重新获取到该标签，然后调用一下resize

问题三

vue3 reactive赋值问题

let obj = reactive({
	name: 'zhangsan',
	age: '18'
})
obj = {
	name: 'lisi'
	age: ''
}
// 上面这样赋值检测不到，因为响应式的是它的属性，而不是它自身
			
// 如需要对 reactive 赋值
// 方法1: 单个赋值
obj['name'] = 'lisi';
obj['age'] = '';
// 方法2：多包一层
let obj = reactive({
	data: {
		name: 'zhangsan',
		age: '18'
	}
})
obj.data = {
	name: 'lisi'
	age: ''
}

清空对象

// 错误示例
<template>
  <div>{{ obj }}</div>
  <button @click="click">点击</button>
</template>
 
<script setup>
import { reactive } from 'vue'
let obj = reactive({a: 111, b: 222})
const click = () => {
  obj = {}
  console.log(obj) // 这里打印的结果是正常的空对象
}
</script>

如何监听vuex中的变量参数变化，用watch!

watch: { 
    '$store.getters.vuex变量'(d) {
        console.log(d);
    },
},

import { mapGetters } from "vuex";
 
computed: {
    ...mapGetters(["vux变量"]), 
},
 
watch: {
    vux变量(d) {
        console.log(d);
    },
},

v-show 的问题

      <div class="h-full border border-color-basis p-16">
        <ChartStyle v-show="state.checkedTab == '0'" :chartConfig="chartConfig" :drawBatteryTests="drawBatteryTests" />
        <AxisAndScaleLines v-show="state.checkedTab == '1'" />
        <Scale v-show="state.checkedTab == '2'" />
        <Grid v-show="state.checkedTab == '3'" />
      </div>

如上所示：通过v-show控制四个子组件的显示和隐藏，但是我加上去怎么都不生效，F12查看元素发现子组件并没有各自的父元素，而且也没有display:none这个样式（v-show底层是通过display:none控制元素的显示隐藏的）

结果真的是：由于我的子组件没有一个根节点，也就是在template区域直接就写了各个小部分的节点，没有一个大的div（这就可能造成各个小部分的display:flex和v-show的display:none造成冲突，导致v-show失效） ，直接在各个子组件加上根节点就可以了