Vue3 Composition API重写签名板代码示例

在Vue3中，可以使用Composition API来重写上述代码。首先，需要在组件中引入ref和onMounted方法。\n\njavascript\nimport { ref, onMounted } from 'vue';\n\nexport default {\n setup() {\n const touched = ref(false);\n const visible = ref(true);\n let boundInfo = null;\n let canvasContext = null;\n const points = ref([]);\n\n const show = () => {\n touched.value = false;\n visible.value = true;\n\n setTimeout(() => {\n const canvas = canvasRef.value;\n boundInfo = canvas.getBoundingClientRect();\n canvas.height = canvas.offsetHeight;\n canvas.width = canvas.offsetWidth;\n canvasContext = canvas.getContext('2d');\n canvasContext.lineWidth = 4;\n canvasContext.lineJoin = 'round';\n canvasContext.lineCap = 'round';\n canvasContext.strokeStyle = '#ff461f';\n canvasContext.fillStyle = 'rgba(255, 255, 255, 0)';\n canvasContext.fillRect(0, 0, boundInfo.width, boundInfo.height);\n points.value = [];\n }, 100);\n };\n\n onMounted(() => {\n show();\n });\n\n return {\n touched,\n visible,\n boundInfo,\n canvasContext,\n points,\n show\n };\n }\n};\n\n\n在以上代码中，我们使用了ref来声明touched、visible和points等响应式数据，并通过onMounted来在组件挂载后执行show方法。在show方法中，我们使用了canvasRef来获取canvas元素的引用，并使用canvasContext来绘制画布。\n\n注意，在Vue3中，我们使用ref来替代Vue2中的data属性，使用onMounted来替代Vue2中的mounted钩子函数。