小箭头替换成css绘制

Author: buuing

src/search-node.vue

@@ -27,12 +27,10 @@ export default {
     let hideMisses = root.filterNode(deepCopy(data)) && (!root.hideMisses || data.visible)
     return hideMisses ? <ul class="tree-ul">
       <li class="tree-li">
-        <svg t="1585220115926" class="tree-icon point" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2222" width="10" height="10" style={{
+        <i class="tree-triangle point" style={{
           transform: `rotate(${data.expand ? '0' : '-90'}deg)`,
           visibility: data[children].length ? 'visible' : 'hidden'
-        }} onClick={e => this.handlerExpand(e)}>
-          <path d="M151.476947 199.553918l718.53082 0c39.763632 0 71.922053 31.909757 71.922053 71.675436 0 18.485003-7.095605 35.205826-18.486026 47.872311L568.114019 793.227056c-23.810289 31.400151-68.641333 37.993313-100.29731 14.183024-5.570879-4.052293-10.384511-8.873088-14.183024-14.190187L94.235245 314.041416c-23.547299-31.407314-17.217127-76.479859 14.436804-100.041484 12.922311-9.881045 27.864628-14.43885 42.804898-14.43885l0 0L151.476947 199.553918zM151.476947 199.553918" p-id="2223" fill="#c0c4cc"></path>
-        </svg>
+        }} onClick={e => this.handlerExpand(e)}></i>
         {
           root.showCheckbox && <zCheckbox
             theme-color={root.themeColor}
@@ -51,7 +49,7 @@ export default {
             root.$scopedSlots.default ? root.$scopedSlots.default(data) : <p class="tree-text">
               {
                 data.$keys.length ? data[name].split('').map((curr, i) => {
-                  return <span class={ data.$keys.includes(i) ? 'red': 'gary' }>{curr}</span>
+                  return <span class={ data.$keys.includes(i) ? 'red' : 'gary' }>{curr}</span>
                 }) : <span class="gary">{data[name]}</span>
               }
             </p>
@@ -128,6 +126,13 @@ export default {
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .tree-triangle {
+    width: 0px;
+    height: 0px;
+    border-top: #c0c4cc 6px solid;
+    border-right: transparent 4px solid;
+    border-left: transparent 4px solid;
+  }
   .tree-content {
     width: 100%;
     margin: 0 0 0 3px;