<!-- eslint-disable vue/multi-word-component-names -->
 <!--下载依赖vite-plugin-vue-setup-  extend-->
<script setup lang="ts" name="TheWelcome">
let name = "请问";
let age = 18;
// eslint-disable-next-line prefer-const
let tel = "12312312312";

// 定义方法
function changeName() {
      name = "qw";
    }

    function changeAge() {
      age += 3;
    }

    function showTel() {
      alert(tel);
    }
</script>

<template>
  <!-- 主要容器，应用了`.TheWelcome`类以应用样式 -->
  <div class="TheWelcome">
    <!-- 动态显示用户的名字 -->
    <h2>姓名：{{ name }}</h2>

    <!-- 动态显示用户的年龄 -->
    <h2>年龄：{{ age }}</h2>

    <!-- 按钮，点击时调用`changeName`方法修改名字 -->
    <button @click="changeName">点击修改名字</button>

    <!-- 按钮，点击时调用`changeAge`方法增加年龄 -->
    <button @click="changeAge">点击修改年龄</button>

    <!-- 按钮，点击时调用`showTel`方法显示电话号码 -->
    <button @click="showTel">点击查看号码</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;
}
</style>
