Vue3 如何实现印章徽章组件

在 Vue3 的项目开发中，实现一个印章徽章组件能为界面增添独特的视觉效果与交互体验。下面将详细介绍其实现过程。

创建一个新的 Vue 组件文件，比如 SealBadge.vue。在这个文件的 <template> 部分，构建组件的基本结构。我们可以使用 SVG 来绘制印章徽章的外形，因为 SVG 具有良好的可扩展性与兼容性，无论在何种设备上都能保持清晰的显示效果。

<template>
  <div class="seal-badge">
    <svg :width="width" :height="height" viewBox="0 0 100 100">
      <!-- 绘制圆形作为印章的轮廓 -->
      <circle cx="50" cy="50" r="45" stroke="red" stroke-width="3" fill="lightcoral" />
      <!-- 在印章内添加文字 -->
      <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="white">{{ text }}</text>
    </svg>
  </div>
</template>

接着，在 <script setup> 部分定义组件的属性与逻辑。我们需要定义一些属性来控制印章徽章的样式与内容，比如宽度、高度以及显示的文字。

import { ref } from 'vue';

const width = ref(100);
const height = ref(100);
const text = ref('');

为了让组件更具通用性，可以通过 props 接收外部传递的参数来动态设置这些属性。

const props = defineProps({
  width: {
    type: Number,
    default: 100
  },
  height: {
    type: Number,
    default: 100
  },
  text: {
    type: String,
    default: ''
  }
});

最后，在 <style scoped> 部分添加一些样式来美化组件。这里使用 scoped 确保样式只作用于当前组件。

.seal-badge {
  display: inline-block;
  margin: 10px;
}

通过上述步骤，一个简单的 Vue3 印章徽章组件就完成了。在实际应用中，你可以将这个组件引入到其他需要的地方，并通过传递不同的 props 参数来展示不同样式与内容的印章徽章。例如：

<template>
  <div>
    <SealBadge :width="150" :height="150" text="重要" />
    <SealBadge :width="80" :height="80" text="新品" />
  </div>
</template>

<script setup>
import SealBadge from './SealBadge.vue';
</script>

这样，就能根据具体需求灵活运用印章徽章组件，提升项目的界面设计感与信息传达效率。