vue-konva添加自定义样式label

在Vue-Konva库中，要为Konva节点（如Label）添加自定义样式，你需要在组件中使用`style`属性，并结合CSS语法。以下是一个基本示例：

<template>
  <div id="app">
    <konva Label :x="x" :y="y" :text="text" ref="myLabel" style="{ fill: 'red', fontSize: '20px', fontFamily: 'Arial', borderRadius: '5px' }">
      {{ text }}
    </konva Label>
  </div>
</template>

<script>
import { Konva } from '@konvajs/konva';

export default {
  data() {
    return {
      x: 100,
      y: 100,
      text: 'Hello, Custom Style!'
    };
  },
  mounted() {
    this.$refs.myLabel.node().setStyle({
      fill: 'blue', // 这里可以动态更改样式
      strokeWidth: 2,
      stroke: 'black'
    });
  }
};
</script>

在这个例子中，我们首先在模板上创建了一个Label组件，并指定了初始样式。然后，在`mounted()`钩子函数中，通过`$refs`获取到Label的底层Konva实例并设置动态样式。