书签菜单点击编辑阻止冒泡事件

ruoyi-ui/src/assets/styles/base.css

@@ -37,6 +37,10 @@
   .sousouleft-switch{
     display: block;
   }
+
+  .sousouright-icon{
+    margin-right: 13px;
+  }
 }
 /* iphone6 7 8 plus */
 @media screen and (max-width: 414px) {

ruoyi-ui/src/views/bookmark/content/index.vue

@@ -9,7 +9,7 @@
               <span class="el-dropdown-link">
             <span>按时间排序(正)</span> <i class="el-icon-caret-bottom"></i>
               </span>
-            <el-dropdown-menu slot="dropdown" >
+            <el-dropdown-menu slot="dropdown" class="filter-sort-dropdown">
               <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按时间排序(正)</el-dropdown-item>
               <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按时间排序(反)</el-dropdown-item>
               <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按字母A-Z排序</el-dropdown-item>
@@ -66,7 +66,10 @@
               <div class="info-wrap">
                 <div class="info">
                   <div class="bookmark-icon">
-                    <img :err-src='bm.icon'   :ng-src="bm.icon"  :src="bm.icon"  />
+<!--                    <img :err-src='bm.icon'   :ng-src="bm.icon"  :src="bm.icon"  />-->
+                    <img :ng-src="'https://favicon.lucq.fun/?url=http://'+bm.urls" :src="'https://favicon.lucq.fun/?url=http://'+bm.urls" onerror="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAmVJREFUSMftlG1IU2EUx8+5jRHzg+5OiD64WTBBjSY5ZybUJMaMiIUICUKFIGmoIIogYWKFBmtDxN1tBKIWvlS6SR+iLFDBXqSMgmzbvQ7fkAjcINmQ5u7pQwyCiOvWx/p/fPj9/5znnPM8AP+VolRTjjHhTlmZipzEk9GYao4sVaMYxXp62NgIdpLBCuLP05mZZHOYZA3p5KgMjBcUwCmw4PfVVYiBGmbW1zMzOU4QCgtTvdAeRESEyNZyJbx+dDTjVv/9YFSjSScnfabsbPYMF+AbxsYS3F5TfwPZAacpMNfUBEAljK24mMJwlLIUClTAdfwok9FXWBTtc3Phzqv7c/RWa8KnrHZM8VltbRjC92AxGkEPRpSJInjJQPpIBJoZC6nn50M19dM5J/v6/lhRxgXXDX9Qp1POcmHh2sTEQbfbvVmrUCTbr4RPaeMe8Q0eTyI36VkrW50mftjrPWCyDn9oSUuTdj4Y/1Qpl7NdzkNC98iIqsIxHdQVFaU8eWW1U1guLy1lr3Acr3O7pXi227EhDLpcCZ8UL/kK8LIYjxtDIRhEP8xGIlI8bcAKvY3FGB/zYvf81pYUL/0PvGTKoTUvjzbgCx5ZWlJq3a5lQa1Ge3yTWnp64ASYqVcUoXn3Jtja2/EpRtHj89FF8Tb25ufDOwCo8/lSL0BF/eDPzcVXeA7WDAa6J9rES1VVdJqx41JHBwCE8BgA3JU9B+3AACziMwjv7MAaPQb/wgIAnP2rDpCWtpkncjm+Ro34bWgo3FkX0O6bnARARCT6hSR6YzazXa7DfLyigo7TNtObxNb/s/oB7V8JFvW/8IQAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMDItMDJUMTg6MTE6NTgrMDg6MDCoc6tpAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIwLTAyLTAyVDE4OjExOjU4KzA4OjAw2S4T1QAAAGd0RVh0c3ZnOmJhc2UtdXJpAGZpbGU6Ly8vaG9tZS9hZG1pbi9pY29uLWZvbnQvdG1wL2ljb25fNWhyOG55Nmo1bWMvamluZ2RpYW5hbmxpX2tvbmd3dWppYW94aW5nX3Nob3VjYW5nLnN2Z4/vilwAAAAASUVORK5CYII='" alt=""  ng-show="bm.urls">
+
+
                   </div>
                   <div class="bookmark-official">{{bm.urls}}&nbsp;·&nbsp;</div><div class="bookmark-time">{{bm.createTime|changeTime}}</div>
                 </div>
@@ -106,17 +109,6 @@
         data: function () {
             return {
               loading:true,
-              bookmark:[
-                {id:1,title:"最大的骄傲于最大的自卑都表示心灵的最软弱无力。——斯宾诺莎",description:"阅读使人充实，会谈使人敏捷，写作使人精确。——培根",official:"www.baidu.com",time:"2020-10-08",icon:"https://favicon.lucq.fun/?url=https://www.sogou.com/"},
-                {id:1,title:"意志坚强的人能把世界放在手中像泥块一样任意揉捏。——歌德",description:"最具挑战性的挑战莫过于提升自我。——迈克尔·F·斯特利",official:"www.baidu.com",time:"2020-10-08",icon:"https://favicon.lucq.fun/?url=https://www.sogou.com/"},
-                {id:1,title:"要知道对好事的称颂过于夸大，也会招来人们的反感轻蔑和嫉妒。——培根",description:"意志命运往往背道而驰，决心到最后会全部推倒。——莎士比亚",official:"www.baidu.com",time:"2020-10-08",icon:"https://favicon.lucq.fun/?url=https://www.sogou.com/"},
-                {id:1,title:"要使整个人生都过得舒适、愉快，这是不可能的，因为人类必须具备一种能应付逆境的态度。——卢梭",description:"只有把抱怨环境的心情，化为上进的力量，才是成功的保证。——罗曼·罗兰",official:"www.baidu.com",time:"2020-10-08",icon:"https://favicon.lucq.fun/?url=https://www.sogou.com/"},
-                {id:1,title:"希望的灯一旦熄灭，生活刹那间变成了一片黑暗。——普列姆昌德",description:"到很多东西的诀窍，就是一下子不要学很多。——洛克",official:"www.baidu.com",time:"2020-10-08",icon:"https://favicon.lucq.fun/?url=https://www.sogou.com/"},
-                {id:1,title:"我这个人走得很慢，但是我从不后退。——亚伯拉罕·林肯",description:"重复别人所说的话，只需要教育；而要挑战别人所说的话，则需要头脑。——玛丽·佩蒂博恩·普尔",official:"www.baidu.com",time:"2020-10-08",icon:"https://favicon.lucq.fun/?url=https://www.sogou.com/"},
-                {id:1,title:"我们若已接受最坏的，就再没有什么损失。——卡耐基",description:"书籍把我们引入最美好的社会，使我们认识各个时代的伟大智者。——史美尔斯",official:"www.baidu.com",time:"2020-10-08",icon:"https://favicon.lucq.fun/?url=https://www.sogou.com/"},
-                {id:1,title:"我的努力求学没有得到别的好处，只不过是愈来愈发觉自己的无知。——笛卡儿",description:"少而好学，如日出之阳；壮而好学，如日中之光；志而好学，如炳烛之光。——刘向",official:"www.baidu.com",time:"2020-10-08",icon:"https://favicon.lucq.fun/?url=https://www.sogou.com/"},
-
-              ],
               queryParams: {
                 pageNum: 1,
                 pageSize: 15,
@@ -184,4 +176,13 @@
    margin-top: 0;
   }
 
+  .filter-sort-dropdown{
+    top:65px!important;
+    box-shadow: 0 2px 15px 0 rgba(0,0,0,.2)!important;
+    font-weight: 600!important;
+  }
+  .filter-sort-dropdown div{
+    display: none!important;
+  }
+
 </style>

ruoyi-ui/src/views/bookmark/index/index.vue

@@ -67,7 +67,7 @@
               <span class="el-dropdown-link">
           <i class="el-icon-plus" style="font-size: 18px;"/>
              </span>
-            <el-dropdown-menu  slot="dropdown" >
+            <el-dropdown-menu  slot="dropdown" class="sq-dropdown">
               <el-dropdown-item class="filter-item" icon="el-icon-plus" command="a">添加连接</el-dropdown-item>
               <el-dropdown-item class="filter-item" icon="el-icon-plus" command="b">添加文本</el-dropdown-item>
               <el-dropdown-item class="filter-item" icon="el-icon-plus" command="d" >导入书签</el-dropdown-item>
@@ -86,13 +86,11 @@
               <span class="el-dropdown-link">
            <el-avatar  :size="28" src="https://up.raindrop.io/collection/templates/social-media-logos-6/97social.png"></el-avatar>
               </span>
-            <el-dropdown-menu  slot="dropdown" >
+            <el-dropdown-menu  slot="dropdown" class="sq-dropdown">
               <el-dropdown-item class="filter-item" icon="el-icon-plus" command="a">外观显示</el-dropdown-item>
               <el-dropdown-item class="filter-item" icon="el-icon-plus" command="b">用户中心</el-dropdown-item>
               <el-dropdown-item class="filter-item" icon="el-icon-plus" command="d" >建议反馈</el-dropdown-item>
-              <el-dropdown-item class="filter-item" icon="el-icon-plus" command="e" divided>退出登录</el-dropdown-item>
+              <el-dropdown-item class="filter-item" icon="el-icon-plus" command="e" >退出登录</el-dropdown-item>
-
-
             </el-dropdown-menu>
           </el-dropdown>
         </div>
@@ -127,7 +125,7 @@
 
 
 </template>
-
+<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 
 <script>
   // 下面的是单个Vue组件引用的外部静态文件，也可以在main.js文件中引用
@@ -278,7 +276,7 @@
   	if (confCount>0) return;
   	//if (treeNode.parentNode && treeNode.parentNode.id!=1) return;
   	var switchObjspan = $("#" + treeNode.tId + "_span");
-  	var editStr = "<span class="+treeNode.tId+"_sz onclick='alert(2222);return false;' style='color: #9e9e9e;float:right;display: inline-block;margin-right: 15px;font-size:8px' onfocus='this.blur();'><i class='el-icon-edit'></i></span>";
+  	var editStr = "<span class="+treeNode.tId+"_sz onclick='editBookmark()' style='color: #9e9e9e;float:right;display: inline-block;margin-right: 15px;font-size:8px' onfocus='this.blur();'><i class='el-icon-edit'></i></span>";
   	switchObjspan.after(editStr);
 
     $("." + treeNode.tId + "_count").unbind().remove();
@@ -302,6 +300,7 @@
   },
   //点击展开
    beforeClick:function(treeId, treeNode) {
+
     //if (treeNode.level != 19990 ) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.expandNode(treeNode);
@@ -332,24 +331,28 @@
 
 
 
+      editBookmark:function(e){
 
-      editBookmark:function(){
-        var that=this;
         alert("this button");
-// //如果提供了事件对象，则这是一个非IE浏览器
+
-//         if ( e && e.stopPropagation )
+        if ( e && e.stopPropagation )
-//         //因此它支持W3C的stopPropagation()方法
+        //因此它支持W3C的stopPropagation()方法
-//           e.stopPropagation();
+          e.stopPropagation();
-//         else
+        else
-//         //否则，我们需要使用IE的方式来取消事件冒泡
+        //否则，我们需要使用IE的方式来取消事件冒泡
-//           window.event.cancelBubble = true;
+          window.event.cancelBubble = true;
+
+        return false;
+
 
       },
 
     },
     mounted(){
 
-
+      window['editBookmark'] = () => {
+        this.editBookmark()
+      }
 
     },
     handleCommand(command) {
@@ -360,8 +363,6 @@
 
 
 
-
-
   }
 </script>
 <style >
@@ -707,6 +708,15 @@
     margin-right: 24px;
     margin-top: 10px;
   }
+  .sq-dropdown{
+    top:33px!important;
+    box-shadow: 0 2px 15px 0 rgba(0,0,0,.2)!important;
+    font-weight: 800!important;
+  }
+  .sq-dropdown div{
+    display: none!important;
+  }
+