Merge pull request #420 from zqy1151215064/handle-clickoutside

refactor: replace old clickoutside file references
hug-sun · Nov 27, 2020 · a0886c8 · a0886c8
2 parents fcb8024 + 17afe2d
commit a0886c8
Show file tree

Hide file tree

Showing 8 changed files with 171 additions and 158 deletions.
diff --git a/examples/components/theme-configurator/editor/color-picker/src/main.vue b/examples/components/theme-configurator/editor/color-picker/src/main.vue
@@ -3,188 +3,201 @@
     :class="[
       'el-color-picker',
       colorDisabled ? 'is-disabled' : '',
-      colorSize ? `el-color-picker--${ colorSize }` : ''
+      colorSize ? `el-color-picker--${colorSize}` : ''
     ]"
-    v-clickoutside="hide">
+    v-clickoutside="hide"
+  >
     <div class="el-color-picker__mask" v-if="colorDisabled"></div>
     <div class="el-color-picker__trigger" @click="handleTrigger">
       <span class="el-color-picker__color" :class="{ 'is-alpha': showAlpha }">
-        <span class="el-color-picker__color-inner"
+        <span
+          class="el-color-picker__color-inner"
           :style="{
             backgroundColor: displayedColor
-          }"></span>
-        <span class="el-color-picker__empty el-icon-close" v-if="!value && !showPanelColor"></span>
+          }"
+        ></span>
+        <span
+          class="el-color-picker__empty el-icon-close"
+          v-if="!value && !showPanelColor"
+        ></span>
       </span>
-      <span class="el-color-picker__icon el-icon-arrow-down" v-show="value || showPanelColor"></span>
+      <span
+        class="el-color-picker__icon el-icon-arrow-down"
+        v-show="value || showPanelColor"
+      ></span>
     </div>
     <picker-dropdown
-       ref="dropdown"
-       :class="['el-color-picker__panel', popperClass || '']"
-       v-model="showPicker"
-       @pick="confirmValue"
-       @clear="clearValue"
-       :color="color"
-       :show-alpha="showAlpha"
-       :predefine="predefine"
-       :colorList="colorList">
+      ref="dropdown"
+      :class="['el-color-picker__panel', popperClass || '']"
+      v-model="showPicker"
+      @pick="confirmValue"
+      @clear="clearValue"
+      :color="color"
+      :show-alpha="showAlpha"
+      :predefine="predefine"
+      :colorList="colorList"
+    >
     </picker-dropdown>
   </div>
 </template>
 
 <script>
-  import Color from './color';
-  import PickerDropdown from './components/picker-dropdown.vue';
-  import Clickoutside from 'element-ui/src/utils/clickoutside';
-  import Emitter from 'element-ui/src/mixins/emitter';
-
-  export default {
-    name: 'ElColorPicker',
-
-    mixins: [Emitter],
-
-    props: {
-      value: String,
-      showAlpha: Boolean,
-      colorFormat: String,
-      disabled: Boolean,
-      size: String,
-      popperClass: String,
-      predefine: Array,
-      colorList: Array
+import Color from './color'
+import PickerDropdown from './components/picker-dropdown.vue'
+import Clickoutside from 'element-ui/src/directives/clickoutside'
+import Emitter from 'element-ui/src/mixins/emitter'
+
+export default {
+  name: 'ElColorPicker',
+
+  mixins: [Emitter],
+
+  props: {
+    value: String,
+    showAlpha: Boolean,
+    colorFormat: String,
+    disabled: Boolean,
+    size: String,
+    popperClass: String,
+    predefine: Array,
+    colorList: Array
+  },
+
+  inject: {
+    elForm: {
+      default: ''
     },
+    elFormItem: {
+      default: ''
+    }
+  },
 
-    inject: {
-      elForm: {
-        default: ''
-      },
-      elFormItem: {
-        default: ''
-      }
-    },
-
-    directives: { Clickoutside },
-
-    computed: {
-      displayedColor() {
-        if (!this.value && !this.showPanelColor) {
-          return 'transparent';
-        }
-
-        return this.displayedRgb(this.color, this.showAlpha);
-      },
-
-      _elFormItemSize() {
-        return (this.elFormItem || {}).elFormItemSize;
-      },
-
-      colorSize() {
-        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
-      },
+  directives: { Clickoutside },
 
-      colorDisabled() {
-        return this.disabled || (this.elForm || {}).disabled;
+  computed: {
+    displayedColor() {
+      if (!this.value && !this.showPanelColor) {
+        return 'transparent'
       }
+
+      return this.displayedRgb(this.color, this.showAlpha)
     },
 
-    watch: {
-      value(val) {
-        if (!val) {
-          this.showPanelColor = false;
-        } else if (val && val !== this.color.value) {
-          this.color.fromString(val);
-        }
-      },
-      color: {
-        deep: true,
-        handler() {
-          this.showPanelColor = true;
-        }
-      },
-      displayedColor(val) {
-        if (!this.showPicker) return;
-        const currentValueColor = new Color({
-          enableAlpha: this.showAlpha,
-          format: this.colorFormat
-        });
-        currentValueColor.fromString(this.value);
-
-        const currentValueColorRgb = this.displayedRgb(currentValueColor, this.showAlpha);
-        if (val !== currentValueColorRgb) {
-          this.$emit('active-change', val);
-        }
-      }
+    _elFormItemSize() {
+      return (this.elFormItem || {}).elFormItemSize
     },
 
-    methods: {
-      handleTrigger() {
-        if (this.colorDisabled) return;
-        this.showPicker = !this.showPicker;
-      },
-      confirmValue(selection) {
-        const value = selection || this.color.value;
-        this.$emit('input', value);
-        this.$emit('change', value);
-        this.dispatch('ElFormItem', 'el.form.change', value);
-        this.showPicker = false;
-      },
-      clearValue() {
-        this.$emit('input', null);
-        this.$emit('change', null);
-        if (this.value !== null) {
-          this.dispatch('ElFormItem', 'el.form.change', null);
-        }
-        this.showPanelColor = false;
-        this.showPicker = false;
-        this.resetColor();
-      },
-      hide() {
-        this.showPicker = false;
-        this.resetColor();
-      },
-      resetColor() {
-        this.$nextTick(_ => {
-          if (this.value) {
-            this.color.fromString(this.value);
-          } else {
-            this.showPanelColor = false;
-          }
-        });
-      },
-      displayedRgb(color, showAlpha) {
-        if (!(color instanceof Color)) {
-          throw Error('color should be instance of Color Class');
-        }
+    colorSize() {
+      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size
+    },
 
-        const { r, g, b } = color.toRgb();
-        return showAlpha
-          ? `rgba(${ r }, ${ g }, ${ b }, ${ color.get('alpha') / 100 })`
-          : `rgb(${ r }, ${ g }, ${ b })`;
+    colorDisabled() {
+      return this.disabled || (this.elForm || {}).disabled
+    }
+  },
+
+  watch: {
+    value(val) {
+      if (!val) {
+        this.showPanelColor = false
+      } else if (val && val !== this.color.value) {
+        this.color.fromString(val)
       }
     },
-
-    mounted() {
-      const value = this.value;
-      if (value) {
-        this.color.fromString(value);
+    color: {
+      deep: true,
+      handler() {
+        this.showPanelColor = true
       }
-      this.popperElm = this.$refs.dropdown.$el;
     },
-
-    data() {
-      const color = new Color({
+    displayedColor(val) {
+      if (!this.showPicker) return
+      const currentValueColor = new Color({
         enableAlpha: this.showAlpha,
         format: this.colorFormat
-      });
+      })
+      currentValueColor.fromString(this.value)
+
+      const currentValueColorRgb = this.displayedRgb(
+        currentValueColor,
+        this.showAlpha
+      )
+      if (val !== currentValueColorRgb) {
+        this.$emit('active-change', val)
+      }
+    }
+  },
 
-      return {
-        color,
-        showPicker: false,
-        showPanelColor: false
-      };
+  methods: {
+    handleTrigger() {
+      if (this.colorDisabled) return
+      this.showPicker = !this.showPicker
+    },
+    confirmValue(selection) {
+      const value = selection || this.color.value
+      this.$emit('input', value)
+      this.$emit('change', value)
+      this.dispatch('ElFormItem', 'el.form.change', value)
+      this.showPicker = false
+    },
+    clearValue() {
+      this.$emit('input', null)
+      this.$emit('change', null)
+      if (this.value !== null) {
+        this.dispatch('ElFormItem', 'el.form.change', null)
+      }
+      this.showPanelColor = false
+      this.showPicker = false
+      this.resetColor()
     },
+    hide() {
+      this.showPicker = false
+      this.resetColor()
+    },
+    resetColor() {
+      this.$nextTick(() => {
+        if (this.value) {
+          this.color.fromString(this.value)
+        } else {
+          this.showPanelColor = false
+        }
+      })
+    },
+    displayedRgb(color, showAlpha) {
+      if (!(color instanceof Color)) {
+        throw Error('color should be instance of Color Class')
+      }
 
-    components: {
-      PickerDropdown
+      const { r, g, b } = color.toRgb()
+      return showAlpha
+        ? `rgba(${r}, ${g}, ${b}, ${color.get('alpha') / 100})`
+        : `rgb(${r}, ${g}, ${b})`
     }
-  };
+  },
+
+  mounted() {
+    const value = this.value
+    if (value) {
+      this.color.fromString(value)
+    }
+    this.popperElm = this.$refs.dropdown.$el
+  },
+
+  data() {
+    const color = new Color({
+      enableAlpha: this.showAlpha,
+      format: this.colorFormat
+    })
+
+    return {
+      color,
+      showPicker: false,
+      showPanelColor: false
+    }
+  },
+
+  components: {
+    PickerDropdown
+  }
+}
 </script>
diff --git a/packages/autocomplete/src/autocomplete.vue b/packages/autocomplete/src/autocomplete.vue
@@ -61,7 +61,7 @@
 <script>
 import { debounce } from 'throttle-debounce'
 import ElInput from '../../input'
-import Clickoutside from '../../../src/utils/clickoutside'
+import Clickoutside from '../../../src/directives/clickoutside'
 import ElAutocompleteSuggestions from './autocomplete-suggestions.vue'
 import Emitter from '../../../src/mixins/emitter'
 import Migrating from '../../../src/mixins/migrating'

diff --git a/packages/date-picker/src/panel/date-range.vue b/packages/date-picker/src/panel/date-range.vue
@@ -238,7 +238,7 @@ import {
   extractDateFormat,
   extractTimeFormat
 } from '../../../../src/utils/date-util'
-import Clickoutside from '../../../../src/utils/clickoutside'
+import Clickoutside from '../../../../src/directives/clickoutside'
 import Locale from '../../../../src/mixins/locale'
 import TimePicker from './time'
 import DateTable from '../basic/date-table'

diff --git a/packages/date-picker/src/panel/date.vue b/packages/date-picker/src/panel/date.vue
@@ -193,7 +193,7 @@ import {
   extractTimeFormat,
   timeWithinRange
 } from '../../../../src/utils/date-util'
-import Clickoutside from '../../../../src/utils/clickoutside'
+import Clickoutside from '../../../../src/directives/clickoutside'
 import Locale from '../../../../src/mixins/locale'
 import ElInput from '../../../input'
 import ElButton from '../../../button'

diff --git a/packages/date-picker/src/panel/month-range.vue b/packages/date-picker/src/panel/month-range.vue
@@ -102,7 +102,7 @@ import {
   nextYear,
   nextMonth
 } from '../../../../src/utils/date-util'
-import Clickoutside from '../../../../src/utils/clickoutside'
+import Clickoutside from '../../../../src/directives/clickoutside'
 import Locale from '../../../../src/mixins/locale'
 import MonthTable from '../basic/month-table'
 import ElInput from '../../../input'

diff --git a/packages/date-picker/src/picker.vue b/packages/date-picker/src/picker.vue
@@ -90,7 +90,7 @@
 </template>
 
 <script>
-import Clickoutside from '../../../src/utils/clickoutside'
+import Clickoutside from '../../../src/directives/clickoutside'
 import {
   formatDate,
   parseDate,