在自定义组件中使用canvas组件并且设置position
<canvas class="my-canvas" canvas-id="myCanvas" id="myCanvas"
:style="{position: 'fixed', top: '-1000px', opacity: 0, width: '200px', height: '200px'}">
</canvas>
seasins
- 发布：2022-12-26 15:49
- 更新：2022-12-27 10:46
- 阅读：214
产品分类： uniapp/H5
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： windows server 2022
HBuilderX类型： 正式
HBuilderX版本号： 3.6.14
浏览器平台： Edge
浏览器版本： 108.0.1462.54
项目创建方式： HBuilderX
操作步骤：
预期结果：
<uni-canvas class="my-canvas" canvas-id="myCanvas" id="myCanvas"
style="position: fixed; top: -1000px; opacity: 0; width: 200px; height: 200px;">
</uni-canvas>
<uni-canvas class="my-canvas" canvas-id="myCanvas" id="myCanvas"
style="position: fixed; top: -1000px; opacity: 0; width: 200px; height: 200px;">
</uni-canvas>实际结果：
<uni-canvas class="my-canvas" canvas-id="myCanvas" id="myCanvas"
style="position: relative; top: -1000px; opacity: 0; width: 200px; height: 200px;">
</uni-canvas>
<uni-canvas class="my-canvas" canvas-id="myCanvas" id="myCanvas"
style="position: relative; top: -1000px; opacity: 0; width: 200px; height: 200px;">
</uni-canvas>bug描述：
canvas组件在自定义组件中使用时自动添加样式 position: relative; 覆盖了原本写的 position: fixed
原本是这样写的：
<canvas class="my-canvas" canvas-id="myCanvas" id="myCanvas"
:style="{position: 'fixed', top: '-1000px', opacity: 0, width: '200px', height: '200px'}">
</canvas>浏览器打开是这样的：
<uni-canvas class="my-canvas" canvas-id="myCanvas" id="myCanvas"
style="position: relative; top: -1000px; opacity: 0; width: 200px; height: 200px;">
</uni-canvas>position变成了relative
如果不在style里面加position，打开后也会有position: relative
如果在class中定义position也会被自动添加的position: relative覆盖
1 个回复
DCloud_UNI_WZF
测试未复现该问题，请检查代码编写，如确认框架问题，请提供测试工程