Element-Plus is automatically introduced, and the icon is not displayed.
//这样写是不会显示的
<el-icon size="20">
<view />
</el-icon>
// 应该这样写
<el-icon size="20">
<i-ep-view/>
</el-icon>
// 或
<i-ep-view/>
How to see this name? Just open node_modules and find the imported @element-plus/icons-vuethird-party software. You can see that there are many files under components. For example name.vue.d.ts, i-ep-namethe one in the middle of the file name -needs to be saved.
After automatic introduction, this.$message is undefined.
Error message: drawDetail.vue?t=1690534133267:63 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'success')
In fact, after automatic introduction, it becomes very simple to use. Just call ElMessage directly, and there is no need to import.
ElMessage.success(this.newPaintDetail.isStar ? "点赞成功" : "取消点赞成功");
In the same way, ElLoading can be used directly.
showLoading(index) {
if (!this.loadingInstance) {
this.loadingInstance = ElLoading.service(index);
}
},
hideLoading() {
if (this.loadingInstance) {
this.loadingInstance.close()
}
}
el-tagThe click event click is invalid
I found someone saying that the solution is to add the .native suffix, like this:
<el-tag type="error" @click.native="tagClick">text</el-tag>
But the vscode prompt nativehas been abandoned, just add it instead enter.
<el-tag type="error" @click.enter="tagClick">text</el-tag>
Discarded invalid param(s) “imgInfo” when navigating
this.$router.push does not support passing params. It is recommended to use state management, such as pinia
refer to the blog
How to use Canvas
The picture is blurry
Under H5, the size of Canvas needs to be set correctly. Don't use CSS/style to set size, use its properties instead:
<canvas id="canvas" width=320 height=456></canvas>
Convert to base64, download poster image
<canvas id="poster" class="poster" :width="canvas.width" :height="canvas.height"></canvas>
// data
canvas: {
height: 700, // 获取页面高度,
width: 480,
},
// 下载
let canvasDom = document.getElementById('poster');
this.showLoading({
text: '下载中' })
let oA = document.createElement("a");
oA.download = ''; // 设置下载的文件名，默认是'下载'
oA.href = canvasDom.toDataURL();
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下载之后把创建的元素删除
this.hideLoading();
