完成tooltip组件的开发

Readme.md

@@ -16,7 +16,7 @@
 
 - wkit 针对`web components`的核心封装库, 以数据驱动, 可以更方便的开发 wc 组件
 
-### 开发进度 && 计划 (42/56)
+### 开发进度 && 计划 (43/56)
 
 - [x] `wc-card` 卡片组件
 - [x] `wc-space` 间隔组件
@@ -66,7 +66,7 @@
 - [x] `wc-timeline` 时间线组件
 - [ ] `wc-layout` 布局组件
 - [x] `wc-tag` 标签组件
-- [ ] `wc-tooltip` 文字提示组件
+- [x] `wc-tooltip` 文字提示组件
 - [x] `wc-popconfirm` 气泡确认框组件
 - [ ] `wc-chatbubble` 聊天气泡组件
 - [x] `wc-divider` 分割线组件

src/tooltip/index.js

@@ -48,12 +48,14 @@ class Tooltip extends Component {
           background: var(--wc-tooltip-background, #fff);
           content: '';
           transform: rotate(45deg);
+          box-shadow: -1px -1px 0 var(--wc-tooltip-shadow, rgba(0, 0, 0, 0.1));
         }
 
         &[placement='left-top'] {
           &::after {
             right: 16px;
             bottom: -4px;
+            box-shadow: 1px 1px 0 var(--wc-tooltip-shadow, rgba(0, 0, 0, 0.1));
           }
         }
         &[placement='left-bottom'] {
@@ -66,6 +68,7 @@ class Tooltip extends Component {
           &::after {
             left: 16px;
             bottom: -4px;
+            box-shadow: 1px 1px 0 var(--wc-tooltip-shadow, rgba(0, 0, 0, 0.1));
           }
         }
         &[placement='right-bottom'] {
@@ -79,49 +82,43 @@ class Tooltip extends Component {
   ]
 
   mounted() {
-    console.log(this.clientWidth, this.offsetHeight)
     bind(this.$refs.wrap, 'mouseenter', ev => {
-      console.log(ev.pageX, ev.pageY)
       let { left, top } = offset(this)
       let placement = 'left'
       let styles = { display: 'block' }
 
-      if (left < 200 || left + this.clientWidth < 360) {
+      if (left < 360 || (left > 360 && window.innerWidth - left > 360)) {
         placement = 'right'
         styles.left = left + 'px'
       } else {
         let right = window.innerWidth - left - this.clientWidth
-        console.log('right: ', right)
-
         styles.right = right + 'px'
       }
 
-      top += 8 + this.clientHeight
+      if (top < 96) {
-      if (top < 100) {
+        top += 8 + this.clientHeight
         placement += '-bottom'
         styles.top = top + 'px'
       } else {
-        // top -= 8
+        let bottom = window.innerHeight - top + 8
         placement += '-top'
-        styles.bottom = top + 'px'
+        styles.bottom = bottom + 'px'
       }
-      console.log(placement)
       //
       this.$refs.tips.setAttribute('placement', placement)
       this.$refs.tips.style.cssText = styleMap(styles)
+      this.$refs.tips.$animate()
     })
     bind(this.$refs.wrap, 'mouseleave', ev => {
-      console.log(ev.pageX, ev.pageY)
+      this.$refs.tips.$animate(true)
-      //
-      this.$refs.tips.style.cssText = styleMap({ display: 'none' })
     })
   }
 
   render() {
     return html`
-      <main class="container" ref="wrap">
+      <main class="container">
-        <div class="wrapper"><slot></slot></div>
+        <div class="wrapper" ref="wrap"><slot></slot></div>
-        <div class="tooltip" ref="tips">
+        <div class="tooltip" ref="tips" #animation=${{}}>
           <slot name="title">${this.title}</slot><i class="trigon"></i>
         </div>
       </main>