add clickoutside

packages/dialog/src/component.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="el-dialog__wrapper" v-if="visible" transition="dialog-fade" @click.self="handleWrapperClick">
-    <div class="el-dialog {{ sizeClass }} {{ customClass }}" v-el:dialog :style="{ 'margin-bottom': size !== 'full' ? '50px' : '', 'top': size !== 'full' ? dynamicTop + 'px' : '0' }">
+    <div class="el-dialog" :class="[sizeClass, customClass]" v-el:dialog :style="{ 'margin-bottom': size !== 'full' ? '50px' : '', 'top': size !== 'full' ? dynamicTop + 'px' : '0' }">
       <div class="el-dialog__header">
         <span class="el-dialog__title">{{title}}</span>
         <div class="el-dialog__headerbtn">

packages/switch/src/component.vue

@@ -11,7 +11,7 @@
       @click="handleMiscClick"
       :style="{ 'width': width + 'px' }"
       transition="label-fade">
-      <i class="{{ onIconClass }}" v-if="onIconClass"></i>
+      <i :class="[onIconClass]" v-if="onIconClass"></i>
       <span v-if="onText">{{ onText }}</span>
     </div>
     <div
@@ -20,7 +20,7 @@
       @click="handleMiscClick"
       :style="{ 'width': width + 'px' }"
       transition="label-fade">
-      <i class="{{ offIconClass }}" v-if="offIconClass"></i>
+      <i :class="[offIconClass]" v-if="offIconClass"></i>
       <span v-if="offText">{{ offText }}</span>
     </div>
   </div>

src/utils/clickoutside.js

@@ -0,0 +1,32 @@
+/**
+ * v-clickoutside
+ * @desc 点击元素外面才会触发的事件
+ * @example
+ * ```vue
+ * <div v-element-clickoutside="handleClose">
+ * ```
+ */
+let handler;
+
+export default {
+  bind(el, binding, vnode) {
+    const expression = binding.expression;
+    handler = function(e) {
+      if (vnode.context && !el.contains(e.target)) {
+        vnode.context[expression]();
+      }
+    };
+    document.addEventListener('click', handler);
+  },
+
+  unbind() {
+    document.removeEventListener('click', handler);
+  },
+
+  install(Vue) {
+    Vue.directive('clickoutside', {
+      bind: this.bind,
+      unbind: this.unbind
+    });
+  }
+};