优化

package.json

@@ -19,6 +19,7 @@
     "terser-webpack-plugin": "^1.3.0",
     "viewerjs": "^1.3.6",
     "vue": "^2.6.10",
+    "vue-clipboard2": "^0.3.0",
     "vue-count-to": "^1.0.13",
     "vue-i18n": "^8.12.0",
     "vue-json-viewer": "^2.2.0",

src/main.js

@@ -9,12 +9,14 @@ import './assets/css/public.css'
 import './element-variables.scss'
 import FormMaking from '@/views/formDesign/index'
 import VueParticles from 'vue-particles'
+import VueClipboard from 'vue-clipboard2'
 import { messages } from './assets/js/common'
 // 引入字体文件
 import '@/assets/icon/iconfont.css'
 import '@/assets/icon/iconfont.js'
 Vue.use(VueParticles)
 Vue.use(FormMaking)
+Vue.use(VueClipboard)
 //全局挂载提示框
 Vue.prototype.$message = messages
 Vue.config.productionTip = false

src/views/component/editor.vue

@@ -1,54 +1,65 @@
 <template>
-    <div class="editor-container">
-        <p class="expain">富文本编辑器是重要并且核心的功能，我们最终选择了vue2-editor，轻量高效，详细请见官方<a href="https://www.awesomes.cn/repo/davidroyer/vue2-editor" target="_blank">文档</a></p>
-        <vue-editor id='editor' useCustomImageHandler @imageAdded="handleImageAdded" v-model="content"></vue-editor>
-    </div>
+  <div class="editor-container">
+    <p class="expain">
+      富文本编辑器是重要并且核心的功能，我们最终选择了vue2-editor，轻量高效，详细请见官方
+      <a href="https://www.awesomes.cn/repo/davidroyer/vue2-editor" target="_blank">文档</a>
+    </p>
+    <vue-editor id="editor" useCustomImageHandler @imageAdded="handleImageAdded" v-model="content"></vue-editor>
+  </div>
 </template>
 <script>
-import {upload} from '@/api/api.js'
+import { upload } from "@/api/api.js";
+import {VueEditor} from "vue2-editor/dist/vue2-editor.core.js";
 export default {
-    data() {
-       return {
-         content: '<h1>你好，zyh</h1>'  
-       }
-     },
-     methods:{
-         /** 
-          * @param {Object} file 图片参数
-          * @param {Object} Editor 编辑器实例
-         */
-         handleImageAdded(file, Editor, cursorLocation){
-            let formData=new FormData();
-            formData.append('image',file)
-            //上传图片
-            upload(formData).then(res=>{
-                let  url = res.data.url 
-                Editor.insertEmbed(cursorLocation, 'image', url);
-            }).catch(e=>{
-
-            })
-         }
-     }
-}
+  data() {
+    return {
+      content: "<h1>你好，zyh</h1>"
+    };
+  },
+  components: {
+    VueEditor
+  },
+  methods: {
+    /**
+     * @param {Object} file 图片参数
+     * @param {Object} Editor 编辑器实例
+     */
+    handleImageAdded(file, Editor, cursorLocation) {
+      let formData = new FormData();
+      formData.append("image", file);
+      //上传图片
+      upload(formData)
+        .then(res => {
+          let url = res.data.url;
+          Editor.insertEmbed(cursorLocation, "image", url);
+        })
+        .catch(e => {});
+    }
+  }
+};
 </script>
 
 <style >
-.editor-container{
-    padding: 40px;
-    
+@import "~vue2-editor/dist/vue2-editor.css";
+
+/* Import the Quill styles you want */
+@import '~quill/dist/quill.core.css';
+@import '~quill/dist/quill.bubble.css';
+@import '~quill/dist/quill.snow.css';
+.editor-container {
+  padding: 40px;
 }
-.expain{
-    font-size: 16px;
-    line-height: 60px;
-    background: #F2F6FC;
-    margin-bottom: 20px;
+.expain {
+  font-size: 16px;
+  line-height: 60px;
+  background: #f2f6fc;
+  margin-bottom: 20px;
 }
-.expain a{
-    color: #bdb7ff
+.expain a {
+  color: #bdb7ff;
 }
-#editor{
-    height: 400px;
+#editor {
+  height: 400px;
 }
-
 </style>
 

src/views/icons/iconfont.vue

@@ -2,12 +2,12 @@
   <div class="icon-container">
     <el-row>
       <el-col :span="4" v-for="(item,index) in iconfonts" :key="index">
-        <div class="grid-content bg-purple">
+        <div class="grid-content bg-purple" @dblclick="doCopy(item)">
           <!-- <i :class="`${'iconfont '+item}`"></i> -->
           <svg class="icon-font">
-            <use :xlink:href="`${'#'+item}`"></use>
+            <use :xlink:href="`${'#'+item}`" />
           </svg>
-          <br>
+          <br />
           <el-tooltip :content="item" placement="top">
             <span>{{item}}</span>
           </el-tooltip>
@@ -19,10 +19,28 @@
 <script>
 import { iconfont } from "@/assets/js/iconfont";
 export default {
+  mounted() {
+    this.$notify.info({
+      title: "消息",
+      message: "双击剪切"
+    });
+  },
   data() {
     return {
       iconfonts: iconfont
     };
+  },
+  methods: {
+    doCopy(item) {
+      this.$copyText(item)
+        .then(res => {
+          this.$message("success", "复制成功");
+        })
+        .catch(e => {
+          this.$message("error", "复制失败");
+          console.log(e);
+        });
+    }
   }
 };
 </script>
@@ -59,9 +77,9 @@ export default {
     }
   }
 }
-.icon-font{
+.icon-font {
   width: 32px;
-  height:32px;
+  height: 32px;
 }
 </style>
 

src/views/layout/components/Header.vue

@@ -83,6 +83,7 @@ export default {
     // 用户名下拉菜单选择事件
     logout(command) {
       this.$store.commit('TAGES_LIST',[])
+      this.$store.commit('SET_BREAD',['home'])
       this.$router.push("/login");
     },
     // 全屏事件