<!-- eslint-disable vue/multi-word-component-names -->
<script setup lang="ts" name="TheWelcome">
import { ref, defineExpose } from "vue";
/*
function showLog() {
  console.log(document.getElementById("title2"));
}
*/
// eslint-disable-next-line prefer-const
let title2 = ref()
// eslint-disable-next-line prefer-const
let a = ref(0)
// eslint-disable-next-line prefer-const
let b = ref(1)
// eslint-disable-next-line prefer-const
let c = ref(2)

function showLog() {
  console.log(title2.value);
}

 defineExpose({ a, b, c })
</script>

<template>
  <div class="TheWelcome">
    <h2>中国</h2>
    <h2>北京</h2>
    <h2 ref="title2">上海</h2>
    <h2>深圳</h2>
    <button @click="showLog">点击显示h2</button>
  </div>
</template>

<style scoped>
.TheWelcome {
  background-color: skyblue; /* 设置背景颜色 */
  box-shadow: 0 0 10px; /* 添加阴影效果 */
  border-radius: 10px; /* 设置圆角半径 */
  padding: 20px; /* 设置内边距 */
}

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

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