问题描述
想要实现的效果
实际显示的效果
这是一个canvans绘制的环形进度条，可以看到中间部分的view标签显示的文字被遮挡了，原因如下：
Canvans组件是由客户端创建的原生组件，原生组件的层级是最高的，所以其他元素无论怎么设置z-index属性都无法让元素显示在Canvas上面。
解决方案
- 将要覆盖的元素改为
cover-view标签。
cover-view标签能够让文本覆盖在原生组件上，比如canvas，map，video，camera等。但是只支持嵌套cover-view、cover-image，button。
-
如果改为
cover-view标签后仍然未显示在上层，需要考虑Canvas的绘画流程，如果元素虚渲染早于canvans绘画，则元素会被canvans盖住。解决方式也非常简单：加入一个drawFinish的状态来控制cover-view渲染与否，在canvans渲染前设置false，渲染完成后更新状态为true。 -
如果将
canvans抽取成了组件，将需要显示的文字内容通过slot传入的话，还需要进行额外处理。在canvans渲染完成后，新增finish事件传递出去，控制传入slot组件的元素在finish事件触发后再显示。
js
<script setup>
import { ref } from 'vue'
const drawFinish = ref(false)
const drawFinished = () => {
emits('finished')
drawFinish.value = true
}
/**
* Circle组件渲染
* 当前进度值变化时重新渲染Circle组件
*/
const doReRender = () => {
drawFinish.value = false;
... // 渲染逻辑
// 渲染完成更新状态
drawFinished();
}
</script>
<template v-if="drawFinish">
<view v-if="!text" class="hd-circle-text">
<!-- 自定义提示内容 -->
<slot></slot>
</view>
<!-- #ifdef MP-WEIXIN -->
<cover-view v-else class="hd-circle-text"> {{ text }} </cover-view>
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<!-- eslint-disable-next-line vue/valid-v-else -->
<text v-else class="hd-circle-text"> {{ text }} </text>
<!-- #endif -->
</template>简单代码贴在上面，这是我今天踩的坑，希望能让碰到这些问题的朋友少绕点弯路嘿嘿😊。