用element-plus框架插入一个九宫格生成vue3生成vue3格式 script setup代码要求所有方法或箭头函数都用function定义要求所有变量为ref响应式无需任何文字说明只要源码即可

<template>
  <div class="grid-container">
    <div class="grid-item" v-for="item in gridItems" :key="item.id" @click="handleClick(item)">
      {{ item.id }}
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const gridItems = ref([
  { id: 1 },
  { id: 2 },
  { id: 3 },
  { id: 4 },
  { id: 5 },
  { id: 6 },
  { id: 7 },
  { id: 8 },
  { id: 9 },
]);

function handleClick(item) {
  ElMessage({
    message: `你点击了第 ${item.id} 个方块`,
    type: 'success',
  });
}
</script>
<style scoped>
.grid-container {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  margin: 0 auto;
}

.grid-item {
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid #ccc;
  cursor: pointer;
}
</style>