Vant 4 实战指南：van-circle自定义圆圈内文字

引言

Vant 是一款基于 Vue.js 的轻量级移动端组件库，提供了丰富的 UI 组件和交互效果，方便开发者快速构建移动端应用。其中，van-circle 是 Vant 4 中的一个圆形进度条组件，允许开发者通过自定义 Slot 的方式来灵活定制圆圈内的显示内容。在本文中，我们将介绍如何使用 van-circle 的 Slot 功能，通过示例代码展示如何实现自定义圆圈内文字。

代码示例

<template>
  <van-circle v-model:current-rate="currentRate" :rate="50" :speed="100">
    <div class="custom-text">
      <span>{{ text }}</span>
      <span>完成度</span>
    </div>
  </van-circle>
</template>

<script setup>
import { ref, computed } from 'vue'

const currentRate = ref(0)
const text = computed(() => {
  return `${currentRate.value}%`
})
</script>

<style lang="scss">
.custom-text {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.custom-text span {
  font-size: 14px;
}

.custom-text span:first-child {
  color: #1989fa;
  font-size: 18px;
  font-weight: bold;
}
</style>

代码解析

Template 部分

在模板中，我们使用 van-circle 组件，并通过 v-model:current-rate 绑定了当前的完成率。在 van-circle 的内部，我们通过自定义 Slot 的方式插入了一个包含两个 span 元素的 div，分别用于显示动态的完成率和静态的文字 "完成度"。

Script 部分

在 Script 部分，我们使用了 Vue 3 的 script setup 语法，引入了 ref 和 computed。通过 ref 定义了 currentRate 变量，用于存储当前的完成率。同时，使用 computed 计算属性，实时更新 text 变量，以便动态展示完成率的文字信息。

Style 部分

样式部分主要定义了自定义文字的样式，使其居中显示，并设置了合适的字体大小和颜色，以保证良好的视觉效果。

结语

通过上述示例，我们展示了如何利用 Vant 4 的 van-circle 组件以及 Vue 3 的 script setup 语法，实现了自定义圆圈内文字的效果。这种灵活的 Slot 使用方式使得开发者能够更加方便地定制组件的显示内容，满足各种个性化的需求。希望这个例子能够帮助你更好地理解 Vant 4 的使用和自定义功能。