图层新增删除功能

src/page-subspecialty/views/modules/imgEditorFabric/img-editor/layer.vue

@@ -11,7 +11,7 @@
     <el-divider v-if="list.length" plain orientation="left">图层</el-divider>
     <div class="layer-box">
       <div
-        v-for="item in list"
+        v-for="(item,index) in list"
         :key="item.id"
         :class="isSelect(item) && 'active'"
         @click="select(item.id)"
@@ -21,7 +21,12 @@
           placement="left"
         >
           <div class="ellipsis">
-            <span :class=" isSelect(item) && 'active' " v-html="iconType(item.type)" /> | {{ textType(item.type, item) }}
+            <div>
+              <span :class=" isSelect(item) && 'active' " v-html="iconType(item.type)" /> | {{ textType(item.type, item) }}
+            </div>
+            <div class="deleteImg" @click="deleteImg(item.id,index)">
+              <i class="el-icon-delete" />
+            </div>
           </div>
         </el-tooltip>
       </div>
@@ -54,6 +59,11 @@ export default {
     this.canvas.c.on('after:render', this.getList)
   },
   methods: {
+    deleteImg(id, index) {
+      this.list.splice(index, 1)
+      const info = this.canvas.c.getObjects().find(item => item.id === id)
+      this.canvas.c.remove(info)
+    },
     // 是否选中元素
     isSelect(item) {
       return (item.id === this.mSelectId || this.mSelectIds.includes(item.id))
@@ -163,6 +173,8 @@ export default {
     text-overflow: ellipsis;
     white-space: nowrap;
     cursor: pointer;
+    display: flex;
+    justify-content: space-between;
   }
   & > div {
     padding: 0px 5px;
@@ -186,6 +198,10 @@ svg {
   background: #29292a;
   color: #fff;
 }
+.deleteImg{
+  color: red;
+  font-size: 18px;
+}
 </style>
 
 <style lang="less">

src/page-subspecialty/views/modules/imgEditorFabric/img-editor/tools.vue

@@ -123,7 +123,7 @@ export default {
   methods: {
     addText() {
       this.closeLineMode()
-      const text = new this.fabric.IText('万事大吉', {
+      const text = new this.fabric.IText('病灶', {
         ...defaultPosition,
         fontSize: 40, id: uuid()
       })
@@ -143,7 +143,7 @@ export default {
     },
     addTextBox() {
       this.closeLineMode()
-      const text = new this.fabric.Textbox('诸事顺遂', {
+      const text = new this.fabric.Textbox('病灶', {
         ...defaultPosition,
         splitByGrapheme: true, width: 300,
         fontSize: 40, id: uuid()