update popover and tooltip

2016-08-05 17:02:01 +08:00 · 2016-08-05 17:02:01 +08:00 · 1c1417f536
parent 82b4582c7e
commit 1c1417f536
7 changed files with 115 additions and 121 deletions
--- a/examples/docs/popover.md
+++ b/examples/docs/popover.md
@ -117,7 +117,7 @@

 <div class="demo-box demo-popover">
  <el-popover
-    v-ref:popover1
+    ref="popover1"
    placement="top-start"
    title="标题"
    width="200"
@ -126,7 +126,7 @@
  </el-popover>

  <el-popover
-    v-ref:popover2
+    ref="popover2"
    placement="bottom"
    title="标题"
    width="200"
@ -135,7 +135,7 @@
  </el-popover>

  <el-popover
-    v-ref:popover3
+    ref="popover3"
    placement="right"
    title="标题"
    width="200"
@ -146,13 +146,13 @@
  <el-button v-popover:popover1>hover 激活</el-button>
  <el-button v-popover:popover2>click 激活</el-button>

-  <el-input :value="model" v-popover:popover3 placeholder="focus 激活"></el-input>
+  <el-input v-model="model" v-popover:popover3 placeholder="focus 激活"></el-input>
 </div>


 ```html
 <el-popover
-  v-ref:popover1
+  ref="popover1"
  placement="top-start"
  title="标题"
  width="200"
@ -161,7 +161,7 @@
 </el-popover>

 <el-popover
-  v-ref:popover2
+  ref="popover2"
  placement="bottom"
  title="标题"
  width="200"
@ -170,7 +170,7 @@
 </el-popover>

 <el-popover
-  v-ref:popover3
+  ref="popover3"
  placement="right"
  title="标题"
  width="200"
@ -188,7 +188,7 @@

 <div class="demo-box demo-popover">
  <el-popover
-    v-ref:popover4
+    ref="popover4"
    placement="right"
    width="400"
    trigger="click">
@ -204,7 +204,7 @@

 ```html
 <el-popover
-  v-ref:popover4
+  ref="popover4"
  placement="right"
  width="400"
  trigger="click">
@ -224,7 +224,7 @@

 <div class="demo-box demo-popover">
  <el-popover
-    v-ref:popover5
+    ref="popover5"
    placement="top"
    width="160"
    :visible.sync="visible2">
@ -240,7 +240,7 @@

 ```html
 <el-popover
-  v-ref:popover5
+  ref="popover5"
  placement="top"
  width="160"
  :visible.sync="visible2">
--- a/examples/docs/tooltip.md
+++ b/examples/docs/tooltip.md
@ -30,73 +30,49 @@
  }
 </style>

-<script>
-  module.exports = {
-    data() {
-      return {
-        value: true
-      }
-    },
-
-    computed: {
-      effect() {
-        return this.value ? 'dark' : 'light';
-      }
-    }
-  }
-</script>
-
-<el-switch
-  v-model="value"
-  on-text="黑色"
-  off-text="白色"
-  on-color="#1f2d3d"
-  off-color="#ccc">
-</el-switch>
-
 <div class="box">
  <div class="top">
-    <el-tooltip class="item" :effect="effect" content="Top Left 提示文字" placement="top-start">
+    <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
      <el-button>上左</el-button>
    </el-tooltip>
-    <el-tooltip class="item" :effect="effect" content="Top Center 提示文字" placement="top">
+    <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
      <el-button>上边</el-button>
    </el-tooltip>
-    <el-tooltip class="item" :effect="effect" content="Top Right 提示文字" placement="top-end">
+    <el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">
      <el-button>上右</el-button>
    </el-tooltip>
  </div>
  <div class="left">
-    <el-tooltip class="item" :effect="effect" content="Left Top 提示文字" placement="left-start">
+    <el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">
      <el-button>左上</el-button>
    </el-tooltip>
-    <el-tooltip class="item" :effect="effect" content="Left Center 提示文字" placement="left">
+    <el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">
      <el-button>左边</el-button>
    </el-tooltip>
-    <el-tooltip class="item" :effect="effect" content="Left Bottom 提示文字" placement="left-end">
+    <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">
      <el-button>左下</el-button>
    </el-tooltip>
  </div>

  <div class="right">
-    <el-tooltip class="item" :effect="effect" content="Right Top 提示文字" placement="right-start">
+    <el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">
      <el-button>右上</el-button>
    </el-tooltip>
-    <el-tooltip class="item" :effect="effect" content="Right Center 提示文字" placement="right">
+    <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
      <el-button>右边</el-button>
    </el-tooltip>
-    <el-tooltip class="item" :effect="effect" content="Right Bottom 提示文字" placement="right-end">
+    <el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">
      <el-button>右下</el-button>
    </el-tooltip>
  </div>
  <div class="bottom">
-    <el-tooltip class="item" :effect="effect" content="Bottom Left 提示文字" placement="bottom-start">
+    <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
      <el-button>下左</el-button>
    </el-tooltip>
-    <el-tooltip class="item" :effect="effect" content="Bottom Center 提示文字" placement="bottom">
+    <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
      <el-button>下边</el-button>
    </el-tooltip>
-    <el-tooltip class="item" :effect="effect" content="Bottom Right 提示文字" placement="bottom-end">
+    <el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">
      <el-button>下右</el-button>
    </el-tooltip>
  </div>
--- a/package.json
+++ b/package.json
@ -9,7 +9,7 @@
  ],
  "scripts": {
    "dev": "node bin/build-entry.js && cooking watch -c scripts/cooking.demo.js",
-    "dist": "rm -rf lib && cooking build -p && cooking build -c scripts/cooking.component.js -p",
+    "dist": "rm -rf lib && cooking build -c scripts/cooking.conf.js -p && cooking build -c scripts/cooking.component.js -p",
    "deploy": "cooking build -c scripts/cooking.demo.js -p",
    "gh-docs": "cooking build -c scripts/cooking.demo.js -p && gh-pages -d examples/element-ui --remote origin",
    "prepublish": "make dist"
--- a/packages/popover/src/main.vue
+++ b/packages/popover/src/main.vue
@ -1,13 +1,14 @@
 <template>
-  <div
-    class="el-popover"
-    v-el:popper
-    v-show="visible"
-    :transition="transition"
-    :style="{ width: width + 'px' }">
-    <div class="el-popover__title" v-if="title" v-text="title"></div>
-    <slot>{{ content }}</slot>
-  </div>
+  <transition :name="transition">
+    <div
+      class="el-popover"
+      ref="popper"
+      v-show="showPopper"
+      :style="{ width: width + 'px' }">
+      <div class="el-popover__title" v-if="title" v-text="title"></div>
+      <slot>{{ content }}</slot>
+    </div>
+  </transition>
 </template>

 <script>
@ -16,10 +17,8 @@ import Vue from 'vue';
 import { on, off } from 'wind-dom/src/event';

 Vue.directive('popover', {
-  update() {
-    this.vm.$nextTick(() => {
-      this.vm.$refs[this.arg].reference = this.el;
-    });
+  bind(el, binding, vnode) {
+    vnode.context.$refs[binding.arg].$refs.reference = el;
  }
 });

@ -36,9 +35,7 @@ export default {
    },
    title: String,
    content: String,
-    reference: {
-      default: 'body'
-    },
+    reference: {},
    width: {},
    visibleArrow: {
      default: true
@ -56,61 +53,64 @@ export default {
    }
  },

-  ready() {
+  mounted() {
    let _timer;
+    const reference = this.reference || this.$refs.reference;

    this.$nextTick(() => {
      if (this.trigger === 'click') {
-        on(this.reference, 'click', () => { this.visible = !this.visible; });
+        on(reference, 'click', () => { this.showPopper = !this.showPopper; });
        on(document, 'click', (e) => {
          if (!this.$el ||
-              !this.reference ||
+              !reference ||
              this.$el.contains(e.target) ||
-              this.reference.contains(e.target)) return;
-          this.visible = false;
+              reference.contains(e.target)) return;
+          this.showPopper = false;
        });
      } else if (this.trigger === 'hover') {
-        on(this.reference, 'mouseenter', () => {
-          this.visible = true;
+        on(reference, 'mouseenter', () => {
+          this.showPopper = true;
          clearTimeout(_timer);
        });
-        on(this.reference, 'mouseleave', () => {
+        on(reference, 'mouseleave', () => {
          _timer = setTimeout(() => {
-            this.visible = false;
+            this.showPopper = false;
          }, 200);
        });
      } else {
-        if (this.reference.hasChildNodes()) {
-          const children = this.reference.childNodes;
+        if (reference.hasChildNodes()) {
+          const children = reference.childNodes;

          for (let i = 0; i < children.length; i++) {
            if (children[i].nodeName === 'INPUT') {
-              on(children[i], 'focus', () => { this.visible = true; });
-              on(children[i], 'blur', () => { this.visible = false; });
+              on(children[i], 'focus', () => { this.showPopper = true; });
+              on(children[i], 'blur', () => { this.showPopper = false; });
              break;
            }
          }
        } else if (
-            this.reference.nodeName === 'INPUT' ||
-            this.reference.nodeName === 'TEXTAREA'
+            reference.nodeName === 'INPUT' ||
+            reference.nodeName === 'TEXTAREA'
          ) {
-          on(this.reference, 'focus', () => { this.visible = true; });
-          on(this.reference, 'blur', () => { this.visible = false; });
+          on(reference, 'focus', () => { this.showPopper = true; });
+          on(reference, 'blur', () => { this.showPopper = false; });
        } else {
-          on(this.reference, 'mousedown', () => { this.visible = true; });
-          on(this.reference, 'mouseup', () => { this.visible = false; });
+          on(reference, 'mousedown', () => { this.showPopper = true; });
+          on(reference, 'mouseup', () => { this.showPopper = false; });
        }
      }
    });
  },

  destroyed() {
-    off(this.reference, 'mouseup');
-    off(this.reference, 'mousedown');
-    off(this.reference, 'focus');
-    off(this.reference, 'blur');
-    off(this.reference, 'mouseleave');
-    off(this.reference, 'mouseenter');
+    const reference = this.reference || this.$refs.reference;
+
+    off(reference, 'mouseup');
+    off(reference, 'mousedown');
+    off(reference, 'focus');
+    off(reference, 'blur');
+    off(reference, 'mouseleave');
+    off(reference, 'mouseenter');
  }
 };
 </script>
--- a/packages/theme-default/src/common/transition.css
+++ b/packages/theme-default/src/common/transition.css
@ -6,11 +6,16 @@
  transition: var(--fade-transition);
 }

-.fade-in-linear-transition {
+.fade-in-linear-enter-active {
  opacity: 1;
  transition: var(--fade-linear-transition);
 }

+.fade-in-linear-leave-active {
+  opacity: 0;
+  transition: var(--fade-linear-transition);
+}
+
 .fade-in-enter,
 .fade-in-leave,
 .fade-in-linear-enter,
--- a/packages/tooltip/src/main.vue
+++ b/packages/tooltip/src/main.vue
@ -1,20 +1,21 @@
 <template>
  <div
    class="el-tooltip"
-    @mouseenter="visible = true"
-    @mouseleave="visible = false">
-    <div class="el-tooltip__rel" v-el:reference>
+    @mouseenter="showPopper = true"
+    @mouseleave="showPopper = false">
+    <div class="el-tooltip__rel" ref="reference">
      <slot></slot>
    </div>

-    <div
-      class="el-tooltip__popper"
-      :class="['is-' + effect]"
-      v-el:popper
-      v-show="!disabled && visible"
-      :transition="transition">
-      <slot name="content"><div v-text="content"></div></slot>
-    </div>
+    <transition :name="transition">
+      <div
+        class="el-tooltip__popper"
+        :class="['is-' + effect]"
+        ref="popper"
+        v-show="!disabled && showPopper">
+        <slot name="content"><div v-text="content"></div></slot>
+      </div>
+    </transition>
  </div>
 </template>

--- a/src/utils/vue-popper.js
+++ b/src/utils/vue-popper.js
@ -34,9 +34,21 @@ export default {
    }
  },

+  data() {
+    return {
+      showPopper: false
+    };
+  },
+
  watch: {
-    'visible'(val) {
-      if (this.popperDestroying) return;
+    visible: {
+      immediate: true,
+      handler(val) {
+        this.showPopper = val;
+      }
+    },
+
+    showPopper(val) {
      val ? this.updatePopper() : this.destroyPopper();
    }
  },
@ -47,32 +59,32 @@ export default {
        return;
      }

-      this.popper = this.popper || this.$refs.popper;
-      this.reference = this.reference || this.$refs.reference;
-
-      if (!this.popper || !this.reference) {
-        return;
-      }
+      const options = this.options;
+      const popper = this.popper || this.$refs.popper;
+      const reference = this.reference || this.$refs.reference;

+      if (!popper || !reference) return;
      if (this.visibleArrow) {
-        this.appendArrow(this.popper);
+        this.appendArrow(popper);
      }

      if (this.popperJS && this.popperJS.hasOwnProperty('destroy')) {
        this.popperJS.destroy();
      }

-      this.$set('options.placement', this.placement);
-      this.$set('options.offset', this.offset);
+      options.placement = this.placement;
+      options.offset = this.offset;

-      this.popperJS = new PopperJS(
-        this.reference,
-        this.popper,
-        this.options
-      );
-      this.popperJS.onCreate(popper => {
-        this.resetTransformOrigin(popper);
-        this.$emit('created', this);
+      this.$nextTick(() => {
+        this.popperJS = new PopperJS(
+          reference,
+          popper,
+          options
+        );
+        this.popperJS.onCreate(popper => {
+          this.resetTransformOrigin(popper);
+          this.$emit('created', this);
+        });
      });
    },

@ -85,7 +97,7 @@ export default {
    },

    doDestroy() {
-      if (this.visible) return;
+      if (this.showPopper) return;

      this.popperJS._popper.removeEventListener('transitionend', this.doDestroy);
      this.popperJS.destroy();