vue3中 const GroupActivityName = ref(‘哇哈哈集团员工专属福利活动’) 要校验“企业专属福利活动名称”录入内容是否为2-100个字符，否则提示“企业专属福利活动名称不能为空，需录入2-100个字符。怎么写

在 Vue 3 中，你可以结合 `ref` 和自定义的输入验证函数来实现这个需求。首先，你需要创建一个引用类型的变量 `GroupActivityName` 来存储用户输入：

<template>
  <div>
    <input v-model="groupActivityName" :placeholder="placeholder" />
    <span v-if="invalidActivityName" class="error-message">{{ errorMessage }}</span>
  </div>
</template>

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

const GroupActivityName = ref('');
const placeholder = '企业专属福利活动名称';
let invalidActivityName = false;
let errorMessage = '';

function validateActivityName(input) {
  if (input.length < 2 || input.length > 100) {
    invalidActivityName = true;
    errorMessage = '企业专属福利活动名称不能为空，需录入2-100个字符。';
  } else {
    invalidActivityName = false;
    errorMessage = '';
  }
}

// 更新输入值的同时触发验证
Object.defineProperty(groupActivityName, 'value', {
  get() {
    return GroupActivityName.value;
  },
  set(value) {
    GroupActivityName.value = value;
    validateActivityName(value);
  },
});

// 使用 computed 计算显示错误消息的状态
const isInvalid = computed(() => invalidActivityName);
</script>

<style scoped>
.error-message {
  color: red;
}
</style>

在这个例子中，我们有一个输入框 (`v-model` 绑定了 `groupActivityName`)，当用户输入时会自动触发 `validateActivityName` 函数进行检查。如果验证失败，会显示错误消息。`isInvalid` 是一个计算属性，用于判断输入是否有效，以便在模板中动态显示提示。