vue3项目这个功能咋实现 初始页面文本框内默认展示名称：“企业名称”+员工专属福利活动，“企业名称”从立项平台获取，举例：企业名称为“娃哈哈集团”，则企业专属福利活动名称为：娃哈哈集团员工专属福利活动。

要在 Vue3 项目中实现这样的功能，你可以这样做：

首先，你需要从立项平台获取企业名称，并将其存储在一个响应式的状态变量中。这里假设你已经有了一个 API 接口来获取企业名称，或者已经将该信息保存在 Vuex store 或者自定义的 reactive 对象中。

1. 创建状态和方法：

<template>
  <div>
    <input type="text" v-model="enterpriseNameAndActivity">
  </div>
</template>

<script>
import { ref, computed } from 'vue';
export default {
  data() {
    return {
      enterpriseName: ref(null), // 初始化为空，后续从接口获取
      activityTemplate: "企业名称：{{ enterpriseName }} 员工专属福利活动",
    };
  },
  async created() {
    // 从立项平台获取企业名称并更新到 state
    this.enterpriseName.value = await getEnterpriseNameFromPlatform();
  },
  methods: {
    async getEnterpriseNameFromPlatform() {
      // 使用axios或其他HTTP库发起API请求
      const response = await axios.get('platform/api/enterpriseName');
      return response.data.name; // 假设响应的数据结构是{name: '娃哈哈集团'}
    },
  },
  computed: {
    enterpriseNameAndActivity() {
      // 计算属性，组合企业名称和活动模板
      return this.activityTemplate.replace('{{ enterpriseName }}', this.enterpriseName.value);
    },
  },
};
</script>

2. 简化版计算属性：
如果你希望每次`enterpriseName`变化时自动更新文本框的内容，也可以直接在计算属性中进行替换：

computed: {
  enterpriseNameAndActivity() {
    return `${this.enterpriseName.value} 员工专属福利活动`;
  },
},
watch: {
  enterpriseName(newValue) {
    this.enterpriseNameAndActivity = newValue ? `${newValue} 员工专属福利活动` : '';
  },
},

现在，初始页面的文本框会显示预定义的企业名称加活动名称，当你从立项平台获取到新的企业名称后，输入框的内容会实时更新。