vue3 踩坑总结，echarts问题，分页英文/居中无效，滚动效果，v-viewer图片预览工具。

1. echarts 鼠标移入 tooltip 不显示，把 this.myChart定义在data外

---

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/5d8364536827490597589870544f6904.png

2. vue3 创建的项目，使用Element组件:分页,日历英文，居中无效

---

import zhCn from "element-plus/es/locale/lang/zh-cn";

分页居中

<style scoped>
  .el-pagination {
    justify-content: center;
  }
</style>

3. echarts 柱状图，使用dataZoom 默认滚动报错

---

Error: Cannot read properties of undefined (reading 'type')

toRaw

作用：将一个由reactive生成的响应式对象转为普通对象。

使用场景：

用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。

markRaw
作用：标记一个对象，使其永远不会再成为响应式对象。

应用场景:

有些值不应被设置为响应式的，例如复杂的第三方类库等。

当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

4. vue2 / vue3 滚动效果 Vue3SeamlessScroll

---

单独讲解链接地址如下：

https://blog.csdn.net/hui_54520/article/details/127067904spm=1001.2014.3001.5502

5. v-viewer图片预览工具

---

vue2 使用 安装

npm install v-viewer --save

全局注册 main.js

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer);
Viewer.setDefaults({
  Options: { "inline": true, "button": true, "navbar": true, "title": true, "toolbar": true, "tooltip": true, "movable": true, "zoomable": true, "rotatable": true, "scalable": true, "transition": true, "fullscreen": true, "keyboard": true, "url": "data-source" }
});

组件形式使用

<viewer :images="listImg">
  <img v-for="(item, index) in listImg" :key="index" :src="url">
</viewer>

vue3 使用 安装

npm install v-viewer@next

全局注册 main.js

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
const app = createApp(App)
//可以指定一些默认配置
app.use(Viewer, {
        Options: {
            'inline': true,
            'button': true, //右上角按钮
            "navbar": true, //底部缩略图
            "title": true, //当前图片标题
            "toolbar": true, //底部工具栏
            "tooltip": true, //显示缩放百分比
            "movable": true, //是否可以移动
            "zoomable": true, //是否可以缩放
            "rotatable": true, //是否可旋转
            "scalable": true, //是否可翻转
            "transition": true, //使用 CSS3 过度
            "fullscreen": true, //播放时是否全屏
            "keyboard": true, //是否支持键盘
            "url": "data-source",
        }
    })

指令形式调用

<div class="basic_div" v-viewer>
     <img :src="url" class="basicImg" />
</div>

组件形式使用

<viewer :images="listImg">
  <img v-for="(item, index) in listImg" :key="index" :src="url">
</viewer>

主要是做个记录，后面遇到在更新！

如果想学全栈开发，从写接口到，前端实现调接口，一整套流程，可以进群获取视频资料学习！

Java全栈交流①群要是满了可以加2群 1135453115， ②群 821596752