diff --git a/package.json b/package.json
index aa1c7deb0adb6e6aea5a1380426189ac24eee7a7..6ea0a5fe89dee89ebf7336e9415f4ccbfc1b9123 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "preview": "vite preview --port 4173"
   },
   "dependencies": {
+    "element-plus": "^2.3.5",
     "guess": "^1.0.2",
     "vue": "^3.2.37"
   },
diff --git a/src/App.vue b/src/App.vue
index c105e5f00e11eb8bdd779d02f76ac1dff6b5d5a4..8461e78daf6382114e9c7f895ae6320b706726b8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,6 +2,7 @@
 import parent from './page/ziChuanFuVal/parent.vue';
 import watchEffect from './page/watchEffect/watchEffect.vue';
 import erzi from './page/fuChuanZiVal/erzi.vue';
+import elementplusxx from './page/test1/elementplusxx.vue';
 
 let name = '小明'
 </script>
@@ -9,7 +10,8 @@ let name = '小明'
 <template>
   <!-- <parent></parent> -->
   <!-- <watchEffect></watchEffect> -->
-  <erzi :title="name"></erzi>
+  <!-- <erzi :title="name"></erzi> -->
+  <elementplusxx></elementplusxx>
 </template>
 
 <style scoped>
diff --git a/src/page/test1/elementplusxx.vue b/src/page/test1/elementplusxx.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c53b09c61fc32da1c88766f9d35082a6ac8cbafe
--- /dev/null
+++ b/src/page/test1/elementplusxx.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="container">
+    <div v-for="(item, index) in items" :key="index" class="item" @mouseover="showCloseIcon(index)" @mouseleave="hideCloseIcon(index)">
+      <span>{{ item }}</span>
+      <el-button v-if="showClose === index" class="close-icon" type="text" icon="el-icon-close" @click="deleteItem(index)">x</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+// import 'element-plus/lib/theme-chalk/index.css'
+import { ElButton } from 'element-plus'
+
+export default {
+  components: {
+    ElButton
+  },
+  setup() {
+    const items = ref(['item 1', 'item 2', 'item 3'])
+    const showClose = ref(-1)
+
+    const showCloseIcon = (index) => {
+      showClose.value = index
+    }
+
+    const hideCloseIcon = (index) => {
+      showClose.value = -1
+    }
+
+    const deleteItem = (index) => {
+      items.value.splice(index, 1)
+    }
+
+    return {
+      items,
+      showClose,
+      showCloseIcon,
+      hideCloseIcon,
+      deleteItem
+    }
+  }
+}
+</script>
+
+<style>
+.container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 10px;
+  padding: 10px;
+  background-color: #f0f0f0;
+}
+
+.close-icon {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  visibility: hidden;
+}
+
+.item:hover .close-icon {
+  visibility: visible;
+}
+</style>