<!-- eslint-disable vue/multi-word-component-names -->

<script lang="ts" setup name="TheWelcome">
import { ref, computed } from "vue";

// 定义两个响应式引用
const firstName = ref("zhang");
const lastName = ref("san");

// 定义一个带有 `get` 和 `set` 方法的计算属性
const fullName = computed({
  get: () => {
    return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value;
  },
  set(val) {
    const [str1, str2] = val.split('-')
    firstName.value = str1
    lastName.value = str2
  }
});

function changeFullName() {
  // 直接修改计算属性的值会触发 `set` 方法
  fullName.value = 'qing-wen';
}
</script>

<template>
  <div class="TheWelcome">
    姓：<input type="text" v-model="firstName" /><br />
    名：<input type="text" v-model="lastName" /><br />
    全名：<span>{{ fullName }}</span>
    <button @click="changeFullName">更改全名</button>
  </div>
</template>

<style scoped>
/*
  .TheWelcome 类选择器，仅应用于当前组件内部的元素，
  因为使用了`scoped`属性，确保样式不会影响到其他组件
*/
.TheWelcome {
  background-color: skyblue; /* 设置背景颜色 */
  box-shadow: 0 0 10px; /* 添加阴影效果 */
  border-radius: 10px; /* 设置圆角半径 */
  padding: 20px; /* 设置内边距 */
}

/* 设置按钮之间的间距 */
button {
  margin: 0 5px;
}

/* 这个样式规则似乎没有用到，可以考虑移除或注释掉 */
li {
  font-size: 20px;
}
</style>
