From eeb4dbd5594d7c39bce5a4a8a1e37e81e9ef823c Mon Sep 17 00:00:00 2001
From: 62651a3279fbdd78c800902f <62651a3279fbdd78c800902f@devide>
Date: Wed, 24 May 2023 12:23:00 +0000
Subject: [PATCH] Wed May 24 12:23:00 UTC 2023 inscode

---
 package.json                     |  1 +
 src/App.vue                      |  4 +-
 src/page/test1/elementplusxx.vue | 72 ++++++++++++++++++++++++++++++++
 3 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 src/page/test1/elementplusxx.vue

diff --git a/package.json b/package.json
index aa1c7de..6ea0a5f 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 c105e5f..8461e78 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 0000000..c53b09c
--- /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>
-- 
GitLab