修改切换字体问题

src/views/CalligraphyMaster/cread.vue

@@ -635,70 +635,78 @@ export default {
         usageStatistics: false,
       });
       $(".tie-mask-apply").css("display", "none");
-      let fontArray = null
-      if(sessionStorage.getItem("fontSelectList")){
-        fontArray = JSON.parse(sessionStorage.getItem("fontSelectList"))
-      }else{
+      let fontArray = null;
+      if (sessionStorage.getItem("fontSelectList")) {
+        fontArray = JSON.parse(sessionStorage.getItem("fontSelectList"));
+      } else {
         fontArray = [
-            {
-                value: 'FZJCGFKTK',
-                img: require('../../assets/teacherdev/img1.png')
-            },
-            {
-                value: 'FZLTH',
-                img: require('../../assets/teacherdev/img2.png')
-            },
-            {
-                value: 'sourceR',
-                img: require('../../assets/teacherdev/img1.png')
-            },
-            {
-                value: 'robot',
-                img: require('../../assets/teacherdev/img2.png')
-            },
-            {
-                value: 'iconFont',
-                img: require('../../assets/teacherdev/img1.png')
-            },
-        ]
+          {
+            value: "FZJCGFKTK",
+            img: require("../../assets/teacherdev/img1.png"),
+          },
+          {
+            value: "FZLTH",
+            img: require("../../assets/teacherdev/img2.png"),
+          },
+          {
+            value: "sourceR",
+            img: require("../../assets/teacherdev/img1.png"),
+          },
+          {
+            value: "robot",
+            img: require("../../assets/teacherdev/img2.png"),
+          },
+          {
+            value: "iconFont",
+            img: require("../../assets/teacherdev/img1.png"),
+          },
+        ];
       }
-      
-    //   let fontArray = [
-    //     "FZLTH",
-    //     "Arial",
-    //     "Arial Black",
-    //     "Caveat",
-    //     "Comic Sans MS",
-    //     "Courier New",
-    //     "Georgia1",
-    //     "Impact",
-    //     "Lobster Two",
-    //     "Lucida Console",
-    //     "Luckiest Guy",
-    //     "Open Sans",
-    //     "Pacifico",
-    //     "Palatino Linotype",
-    //     "Press Start 2P",
-    //     "Roboto",
-    //     "Tahoma",
-    //     "Tangerine",
-    //     "Times New Roman",
-    //     "Tourney",
-    //     "Ultra",
-    //     "Verdana",
-    //     "Symbol",
-    //     "Webdings",
-    //     "Wingdings",
-    //   ];
+
+      //   let fontArray = [
+      //     "FZLTH",
+      //     "Arial",
+      //     "Arial Black",
+      //     "Caveat",
+      //     "Comic Sans MS",
+      //     "Courier New",
+      //     "Georgia1",
+      //     "Impact",
+      //     "Lobster Two",
+      //     "Lucida Console",
+      //     "Luckiest Guy",
+      //     "Open Sans",
+      //     "Pacifico",
+      //     "Palatino Linotype",
+      //     "Press Start 2P",
+      //     "Roboto",
+      //     "Tahoma",
+      //     "Tangerine",
+      //     "Times New Roman",
+      //     "Tourney",
+      //     "Ultra",
+      //     "Verdana",
+      //     "Symbol",
+      //     "Webdings",
+      //     "Wingdings",
+      //   ];
 
       let fontSelectHTML =
-        '<div class="font-select-box tui-image-editor-button"><input class="font-select-value" value="'+fontArray[0].value+'" readonly /><label>字体</label><ul #fontselect class="form-select font-selector font-select-list">';
+        '<div class="font-select-box tui-image-editor-button"><input class="font-select-value" value="' +
+        fontArray[0].value +
+        '" readonly /><label>字体</label><ul #fontselect class="form-select font-selector font-select-list">';
       for (let i = 0; i < fontArray.length; i++) {
-        let classname = i===0 ? 'active' : ''
+        let classname = i === 0 ? "active" : "";
         fontSelectHTML +=
           '<li value="' +
           fontArray[i].value +
-          '" class="'+classname+'"><img src="'+fontArray[i].img+'" /><p>'+fontArray[i].value+'</p></li>';
+          '" class="' +
+          classname +
+          '"><img src="' +
+          fontArray[i].img +
+          '" /><p>' +
+          fontArray[i].value +
+          "</p></li>";
       }
       fontSelectHTML += "</ul></div>";
 
@@ -706,26 +714,34 @@ export default {
         ".tui-image-editor-menu-text .tui-image-editor-submenu-item"
       );
       textMenuAlign.insertAdjacentHTML("afterbegin", fontSelectHTML);
-      let _this = this
-      $(".font-selector li").click(function () {
-        _this.TUI_updateFontOnText($(this).attr("value"))
-        $(".font-select-box input").val($(this).attr("value"))
-        $(".font-selector").css("display","none")
-        $(this).addClass('active').siblings().removeClass('active')
-        let index = $(this).index()
-        let arr = JSON.parse(JSON.stringify(fontArray[index]))
-        fontArray.splice(index, 1)
-        fontArray.unshift(arr)
-        sessionStorage.setItem("fontSelectList", JSON.stringify(fontArray));
-        sessionStorage.setItem("fontSelectFamily", JSON.stringify(fontArray[0].value));
-      });
-      $(".font-select-box input").click(function(){
-        if($(".font-selector").css("display")=='flex'){
-            $(".font-selector").css("display","none")
-        }else{
-            $(".font-selector").css("display","flex")
+      let _this = this;
+     
+      $(".font-selector li")
+        .off("click")
+        .bind("click", function () {
+          let value = $(this).attr("value");
+          _this.TUI_updateFontOnText(value);
+          $(".font-select-box input").val(value);
+          $(".font-selector").css("display", "none");
+          $(this).addClass("active").siblings().removeClass("active");
+          sessionStorage.setItem("fontSelectFamily", JSON.stringify(value));
+          let index = $(this).index();
+          let arr = JSON.parse(JSON.stringify(fontArray[index]));
+          let fontSelectList = JSON.parse(JSON.stringify(fontArray));
+          fontSelectList.splice(index, 1);
+          fontSelectList.unshift(arr);
+          sessionStorage.setItem(
+            "fontSelectList",
+            JSON.stringify(fontSelectList)
+          );
+        });
+      $(".font-select-box input").click(function () {
+        if ($(".font-selector").css("display") == "flex") {
+          $(".font-selector").css("display", "none");
+        } else {
+          $(".font-selector").css("display", "flex");
         }
-      })
+      });
       this.instance.on("objectActivated", (props) => {
         this.TUI_selectedItem = props;
         this.TUI_updateFontSelected(props);
@@ -734,7 +750,6 @@ export default {
       this.loading.close();
     },
     TUI_updateFontOnText(font) {
-
       if (font) {
         this.TUI_selectedFont = font;
       }
@@ -749,7 +764,8 @@ export default {
       console.log("TUI_updateFontSelected", layer);
 
       if (layer.fontFamily) {
-        document.querySelector(".font-select-box input").value = layer.fontFamily;
+        document.querySelector(".font-select-box input").value =
+          layer.fontFamily;
         this.TUI_selectedFont = layer.fontFamily;
       }
     },
@@ -1160,22 +1176,22 @@ export default {
       line-height: 32px;
     }
   }
-  .font-select-box{
+  .font-select-box {
     position: relative;
     width: 100px;
     display: inline-block;
-    input{
-        width: 100%;
-        height: 30px;
-        border: none;
-        outline: none;
-        display: block;
-        margin-bottom: 5px;
-        border-radius: 2px;
-        padding: 0 3px;
+    input {
+      width: 100%;
+      height: 30px;
+      border: none;
+      outline: none;
+      display: block;
+      margin-bottom: 5px;
+      border-radius: 2px;
+      padding: 0 3px;
     }
   }
-  .font-select-list{
+  .font-select-list {
     display: flex;
     width: 100px;
     flex-flow: wrap;
@@ -1186,28 +1202,27 @@ export default {
     display: none;
     max-height: 120px;
     overflow: auto;
-    li{
-        background: #ffffff;
-        font-size: 0;
-        padding: 10px 5px;
-        cursor: pointer;
-        img{
-            width: 100%;
-        }
-        p{
-            color: #0f0f0f;
-            font-size: 14px;
-            text-align: left;
-            line-height: 20px;
-        }
-        &:hover{
-            background: #cfcfcf;
-        }
-        &.active{
-            background: #dbdbdb;
-        }
+    li {
+      background: #ffffff;
+      font-size: 0;
+      padding: 10px 5px;
+      cursor: pointer;
+      img {
+        width: 100%;
+      }
+      p {
+        color: #0f0f0f;
+        font-size: 14px;
+        text-align: left;
+        line-height: 20px;
+      }
+      &:hover {
+        background: #cfcfcf;
+      }
+      &.active {
+        background: #dbdbdb;
+      }
     }
-    
   }
 }
 </style>