Datav组件库适用于老版本Vue2,并未对Vue3.0进行适配(其实官网有适配Vue3.0版本的Datav,但是组件非常少,不推荐使用)
安装之后启动会报错
*
修正方法:*
进入路径找到报错的组件
对组件代码进行修改,两个报错组件修改方法相同,之后便可以使用了修改后截图如下,再和
中
**
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a93a3bd102b86c1b46ef0b3109d87495.png)
**
示例:vue3.0使用Datav组件库的数字翻牌器
**
<template>
<dataView/>
<mapView/>
<scroll-table></scroll-table>
<!-- <dv-digital-flop :config={number:[a],content:b} style="width:200px;height:50px;" />-->
<dv-digital-flop :config={...config} style="width:200px;height:50px;" />
</template>
<script setup>
import mapView from "@/views/mapView";
import dataView from "@/views/dataView";
import ScrollTable from "@/views/scrollTable";
import {reactive,ref, computed, watch} from "vue";
import {useStore} from 'vuex';
let {state} = useStore();
let a = ref(100000)
let b=ref('{nt}个')
let config = reactive({
number:[100],
content:'{nt}个'
})
const getShowTask = computed(()=>{
//返回的是ref对象
return state.areaCode;
})
watch(getShowTask, (newVal, oldVal) => {
console.log('newVal, oldVal', newVal, oldVal)
console.log("翻牌器配置",config)
config.number = [newVal]
a.value = newVal
}, {deep:true});
</script>