Wed May 24 12:23:00 UTC 2023 inscode

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"
   },

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>

src/page/test1/elementplusxx.vue

+<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>