@aochuang/common 1.0.130 → 1.0.131

package/common/tooltip/popper.js

@@ -4,6 +4,26 @@ import UiTooltip from '../../components/tooltip'
 const TooltipConstructor = Vue.extend(UiTooltip)
 
 let tooltip = null
+let referenceObserver = null
+let referenceElm = null
+
+function isReferenceHidden ($el) {
+  if (!$el || !document.body.contains($el)) {
+    return true
+  }
+  if (!$el.getClientRects().length) {
+    return true
+  }
+  const style = window.getComputedStyle($el)
+  return style.display === 'none' || style.visibility === 'hidden'
+}
+
+function checkReferenceVisible () {
+  if (isReferenceHidden(referenceElm)) {
+    hideTooltip()
+    clearTooltipReferenceWatch()
+  }
+}
 
 export function getTooltip () {
   if (!tooltip) {
@@ -16,3 +36,33 @@ export function getTooltip () {
   }
   return tooltip
 }
+
+export function watchTooltipReference ($el) {
+  clearTooltipReferenceWatch()
+  referenceElm = $el
+  if (!referenceElm || typeof MutationObserver === 'undefined') {
+    return
+  }
+  referenceObserver = new MutationObserver(checkReferenceVisible)
+  referenceObserver.observe(document.body, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ['class', 'style', 'hidden']
+  })
+  checkReferenceVisible()
+}
+
+export function clearTooltipReferenceWatch () {
+  if (referenceObserver) {
+    referenceObserver.disconnect()
+    referenceObserver = null
+  }
+  referenceElm = null
+}
+
+export function hideTooltip () {
+  if (tooltip) {
+    tooltip.visible = false
+  }
+}

package/common/tooltip/tooltip.vue

@@ -1,5 +1,5 @@
 <script>
-import { getTooltip } from './popper'
+import { clearTooltipReferenceWatch, getTooltip, watchTooltipReference } from './popper'
 
 let _timer = null
 
@@ -29,14 +29,17 @@ export default {
         ...context.listeners,
         mouseenter (e) {
           clearTimeout(_timer)
+          const referenceElm = e.currentTarget || e.target
           const tooltip = getTooltip()
           tooltip.visible = true
           tooltip.content = context.props.text
           tooltip.html = context.props.html
-          tooltip.setReferenceElm(e.target)
+          tooltip.setReferenceElm(referenceElm)
+          watchTooltipReference(referenceElm)
         },
         mouseleave () {
           clearTimeout(_timer)
+          clearTooltipReferenceWatch()
           const tooltip = getTooltip()
           tooltip.visible = false
         },

package/components/icon/demo_index.html

@@ -54,6 +54,12 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe6f9;</span>
+                <div class="name">bookmark-3-line</div>
+                <div class="code-name">&amp;#xe6f9;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe6dd;</span>
                 <div class="name">聚合列表</div>
@@ -2400,9 +2406,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1778556659402') format('woff2'),
-       url('iconfont.woff?t=1778556659402') format('woff'),
-       url('iconfont.ttf?t=1778556659402') format('truetype');
+  src: url('iconfont.woff2?t=1785221329948') format('woff2'),
+       url('iconfont.woff?t=1785221329948') format('woff'),
+       url('iconfont.ttf?t=1785221329948') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -2428,6 +2434,15 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-bookmark-3-line"></span>
+            <div class="name">
+              bookmark-3-line
+            </div>
+            <div class="code-name">.icon-bookmark-3-line
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-aggregation-list-line"></span>
             <div class="name">
@@ -5947,6 +5962,14 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-bookmark-3-line"></use>
+                </svg>
+                <div class="name">bookmark-3-line</div>
+                <div class="code-name">#icon-bookmark-3-line</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-aggregation-list-line"></use>

package/components/icon/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4387417 */
-  src: url('iconfont.woff2?t=1778556659402') format('woff2'),
-       url('iconfont.woff?t=1778556659402') format('woff'),
-       url('iconfont.ttf?t=1778556659402') format('truetype');
+  src: url('iconfont.woff2?t=1785221329948') format('woff2'),
+       url('iconfont.woff?t=1785221329948') format('woff'),
+       url('iconfont.ttf?t=1785221329948') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-bookmark-3-line:before {
+  content: "\e6f9";
+}
+
 .icon-aggregation-list-line:before {
   content: "\e6dd";
 }