字体

src/views/CalligraphyMaster/cread.vue

@@ -652,6 +652,10 @@ export default {
             value: 'robot',
             img: require('../../assets/teacherdev/img2.png')
         },
+        {
+            value: 'iconFont',
+            img: require('../../assets/teacherdev/img1.png')
+        },
       ]
     //   let fontArray = [
     //     "FZLTH",
@@ -682,12 +686,13 @@ export default {
     //   ];
 
       let fontSelectHTML =
-        '<div class="font-select-box"><input class="font-select-value" value="" /><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="FZLTH" 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' : ''
         fontSelectHTML +=
           '<li value="' +
           fontArray[i].value +
-          '" ><img src="'+fontArray[i].img+'" /></li>';
+          '" class="'+classname+'"><img src="'+fontArray[i].img+'" /></li>';
       }
       fontSelectHTML += "</ul></div>";
 
@@ -695,14 +700,20 @@ export default {
         ".tui-image-editor-menu-text .tie-text-effect-button"
       );
       textMenuAlign.insertAdjacentHTML("afterbegin", fontSelectHTML);
-
-      document
-        .querySelector(".font-selector li")
-        .addEventListener("click", (e) =>
-        console.log($(this))
-
-        //   this.TUI_updateFontOnText($(".font-selector li:click").val())
-        );
+      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')
+      });
+      $(".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);
@@ -711,7 +722,6 @@ export default {
       this.loading.close();
     },
     TUI_updateFontOnText(font) {
-      console.log("TUI_updateFontOnText", font, this.TUI_selectedItem.id);
 
       if (font) {
         this.TUI_selectedFont = font;
@@ -727,7 +737,7 @@ export default {
       console.log("TUI_updateFontSelected", layer);
 
       if (layer.fontFamily) {
-        document.querySelector(".font-selector").value = layer.fontFamily;
+        document.querySelector(".font-select-box input").value = layer.fontFamily;
         this.TUI_selectedFont = layer.fontFamily;
       }
     },
@@ -786,7 +796,7 @@ export default {
         type: undefined,
       });
       var aLink = document.createElement("a");
-      aLink.download = "图片名称.jpg"; //这里写保存时的图片名称
+      aLink.download = "书法大师.jpg"; //这里写保存时的图片名称
       aLink.href = URL.createObjectURL(blob);
       aLink.click();
     },
@@ -1141,16 +1151,29 @@ export default {
   .font-select-box{
     position: relative;
     width: 100px;
+    display: inline-block;
     input{
         width: 100%;
         height: 30px;
         border: none;
+        outline: none;
+        display: block;
+        margin-bottom: 2px;
+        border-radius: 2px;
+        padding: 0 3px;
     }
   }
   .font-select-list{
     display: flex;
     width: 100px;
     flex-flow: wrap;
+    position: absolute;
+    z-index: 1;
+    left: 0;
+    top: 30px;
+    display: none;
+    max-height: 120px;
+    overflow: auto;
     li{
         background: #ffffff;
         font-size: 0;
@@ -1159,6 +1182,12 @@ export default {
         img{
             width: 100%;
         }
+        &:hover{
+            background: #cfcfcf;
+        }
+        &.active{
+            background: #dbdbdb;
+        }
     }
     
   }