vdesign-ui 0.2.19 → 0.3.0

package/dist/components/dropdown/index.vue

@@ -1,218 +1,218 @@
-<template>
-  <div class="vd-dropdown" :class="wrapClasses" v-show="isMask">
-    <!-- <transition :name="isAnimation ? 'vd-dropdown-fade' : ''">
-      <div class="vd-menu-mask" @click.stop="clickMenuMask"></div>
-    </transition> -->
-    <transition :name="isAnimation ? 'vd-dropdown-slide-down' : ''">
-      <div v-clickoutside="clickMenuMask" class="vd-dropdown-menu" v-show="isMask">
-        <template v-if="!isMultiple && !$slots.custom">
-          <div class="vd-dropdown-item" :class="itemClass(item)" v-for="(item, index) in datalist" :key="item.name"
-            @click.stop="selectedItem(item, index)">
-            <span class="vd-dropdown-left">
-              <vd-icon v-if="item.icon" :name="item.icon" svg class="vd-dropdown-icon"></vd-icon>
-              <span class="vd-dropdown-group-cell">
-                <span class="vd-dropdown-text">{{ item.text }}</span>
-                <span v-if="types === 'group'" class="vd-dropdown-group-sub">
-                  <vd-icon v-if="item.subIcon" :name="item.subIcon" svg class="vd-dropdown-sub-icon"></vd-icon>
-                  <span class="vd-dropdown-subtext" v-html="item.subText"></span>
-                </span>
-              </span>
-            </span>
-            <vd-icon v-if="types === 'primary' && item.selected" class="vd-dropdown-active-select"
-              name="icon_btn_singleslt" color="#1BC47D"></vd-icon>
-            <span v-if="types === 'state'" v-html="item.stateText" class="vd-dropdown-state-text"
-              :class="`vd-dropdown-state-text--${item.state}`"></span>
-          </div>
-        </template>
-
-        <template v-if="isMultiple">
-          <div class="vd-dropdown-item" :class="itemClass(item)" v-for="item in datalist" :key="item.name">
-            <vd-checkbox v-model="item.selected" :disabled="!item.selected && max <= selectedCount">
-              {{ item.text }}
-            </vd-checkbox>
-            <vd-icon v-if="types === 'primary' && item.selected" class="vd-dropdown-active-select"
-              name="icon_btn_singleslt" color="#1BC47D"></vd-icon>
-          </div>
-          <div class="vd-dropdown--btn">
-            <vd-button block size="small" type="tertiary_grey" @click="resetMenu">{{ resetBtnTxt }}</vd-button>
-            <vd-button block size="small" @click="sureMenu">{{ okBtnTxt }}</vd-button>
-          </div>
-        </template>
-
-        <div class="vd-dropdown-item" v-if="$slots.custom">
-          <slot name="custom">{{ custom }}</slot>
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script>
-import clickoutside from "../mixins/clickoutside.js";
-import VdIcon from '../icon';
-import VdButton from '../button';
-const prefixCls = 'vd-dropdown';
-export default {
-  name: 'vd-dropdown',
-  components: {
-        VdIcon,
-        VdButton
-    },
-  directives: {
-    clickoutside
-  },
-  props: {
-    isAnimation: {
-      type: Boolean,
-      default: false
-    },
-    types: {
-      type: String,
-      default: 'primary',
-      validator: value => ['primary', 'secondary', 'state', 'group'].includes(value)
-    },
-    value: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    isMultiple: {
-      type: Boolean,
-      default: false
-    },
-    alignment: {
-      type: String,
-      default: 'center',
-      validator: value => ['start', 'end', 'center'].includes(value)
-    },
-    col: {
-      type: [Number, String],
-      default: 1
-    },
-    max: {
-      type: [Number, String],
-      default: 5
-    },
-    custom: {
-      type: String,
-      default: ''
-    },
-    list: {
-      type: Array,
-      default: () => []
-    },
-    for: {
-      type: String,
-      default: ''
-    },
-  },
-  data() {
-    return {
-      datalist: []
-    };
-  },
-  watch: {
-    list: {
-      immediate: true,
-      handler(val) {
-        this.datalist = [...val];
-      }
-    },
-    value(val){
-      if(!val){
-        this.$emit('close')
-      }
-    }
-  },
-  computed: {
-    isMask() {
-      return this.value;
-    },
-    wrapClasses() {
-      return {
-        [`${prefixCls}-${this.types}`]: this.types,
-        [`${prefixCls}--divided`]: this.types !== 'state',
-        [`${prefixCls}-${this.alignment}`]: this.alignment
-      };
-    },
-    okBtnTxt() {
-      return '确定';
-    },
-    resetBtnTxt() {
-      return '重置';
-    },
-    selectedCount() {
-      return this.datalist.filter(item => item.selected).length;
-    }
-  },
-  methods: {
-    itemClass(item) {
-      return {
-        [`${prefixCls}--disabled`]: item.disabled,
-        [`${prefixCls}--active`]: item.selected
-      };
-    },
-    findParentWithNameAttr(element, nameValue) {
-      // 如果当前元素具有 name 属性且与传入的值匹配，返回该元素
-      if (element.getAttribute && element.getAttribute('alias-name') === nameValue) {
-        return element;
-      }
-      // 如果已经到达根元素 (document 或 null)，停止查找
-      if (element.parentElement) {
-        return this.findParentWithNameAttr(element.parentElement, nameValue); // 递归查找父元素
-      }
-      return null; // 没有找到带 name 属性的匹配元素
-    },
-    clickMenuMask(e) {      
-      if (this.value) {
-        if(this.for){
-          const nameElement = this.findParentWithNameAttr(e, this.for)    
-          // 如果没找到就说明点外面了
-          if (!nameElement) {            
-            this.$emit('input', false);
-          }   
-        }        
-      }
-    },
-    selectedItem(item, index) {
-      this.$emit('change', item, index); // 通知父组件选中项改变
-    },
-    resetMenu() {
-      this.datalist.forEach(item => (item.selected = false));
-      this.$emit('reset', this.datalist);
-    },
-    sureMenu() {
-      this.$emit('close'); // 关闭菜单
-      this.$emit('ok', this.datalist); // 确认并返回数据
-    }
-  }
-};
-</script>
-
-
-<style lang="less">
-@import './style.less';
-
-.vd-dropdown-fade-enter-active,
-.vd-dropdown-fade-leave-active {
-  transition: opacity 0.5s;
-}
-
-.vd-dropdown-fade-enter,
-.vd-dropdown-fade-leave-to {
-  opacity: 0;
-}
-
-.vd-dropdown-slide-down-enter-active,
-.vd-dropdown-slide-down-leave-active {
-  transition: transform 0.5s;
-}
-
-.vd-dropdown-slide-down-enter,
-.vd-dropdown-slide-down-leave-to {
-  transform: translateY(-20px);
-}
-</style>
+<template>
+  <div class="vd-dropdown" :class="wrapClasses" v-show="isMask">
+    <!-- <transition :name="isAnimation ? 'vd-dropdown-fade' : ''">
+      <div class="vd-menu-mask" @click.stop="clickMenuMask"></div>
+    </transition> -->
+    <transition :name="isAnimation ? 'vd-dropdown-slide-down' : ''">
+      <div v-clickoutside="clickMenuMask" class="vd-dropdown-menu" v-show="isMask">
+        <template v-if="!isMultiple && !$slots.custom">
+          <div class="vd-dropdown-item" :class="itemClass(item)" v-for="(item, index) in datalist" :key="item.name"
+            @click.stop="selectedItem(item, index)">
+            <span class="vd-dropdown-left">
+              <vd-icon v-if="item.icon" :name="item.icon" svg class="vd-dropdown-icon"></vd-icon>
+              <span class="vd-dropdown-group-cell">
+                <span class="vd-dropdown-text">{{ item.text }}</span>
+                <span v-if="types === 'group'" class="vd-dropdown-group-sub">
+                  <vd-icon v-if="item.subIcon" :name="item.subIcon" svg class="vd-dropdown-sub-icon"></vd-icon>
+                  <span class="vd-dropdown-subtext" v-html="item.subText"></span>
+                </span>
+              </span>
+            </span>
+            <vd-icon v-if="types === 'primary' && item.selected" class="vd-dropdown-active-select"
+              name="icon_btn_singleslt" color="#1BC47D"></vd-icon>
+            <span v-if="types === 'state'" v-html="item.stateText" class="vd-dropdown-state-text"
+              :class="`vd-dropdown-state-text--${item.state}`"></span>
+          </div>
+        </template>
+
+        <template v-if="isMultiple">
+          <div class="vd-dropdown-item" :class="itemClass(item)" v-for="item in datalist" :key="item.name">
+            <vd-checkbox v-model="item.selected" :disabled="!item.selected && max <= selectedCount">
+              {{ item.text }}
+            </vd-checkbox>
+            <vd-icon v-if="types === 'primary' && item.selected" class="vd-dropdown-active-select"
+              name="icon_btn_singleslt" color="#1BC47D"></vd-icon>
+          </div>
+          <div class="vd-dropdown--btn">
+            <vd-button block size="small" type="tertiary_grey" @click="resetMenu">{{ resetBtnTxt }}</vd-button>
+            <vd-button block size="small" @click="sureMenu">{{ okBtnTxt }}</vd-button>
+          </div>
+        </template>
+
+        <div class="vd-dropdown-item" v-if="$slots.custom">
+          <slot name="custom">{{ custom }}</slot>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import clickoutside from "../mixins/clickoutside.js";
+import VdIcon from '../icon';
+import VdButton from '../button';
+const prefixCls = 'vd-dropdown';
+export default {
+  name: 'vd-dropdown',
+  components: {
+        VdIcon,
+        VdButton
+    },
+  directives: {
+    clickoutside
+  },
+  props: {
+    isAnimation: {
+      type: Boolean,
+      default: false
+    },
+    types: {
+      type: String,
+      default: 'primary',
+      validator: value => ['primary', 'secondary', 'state', 'group'].includes(value)
+    },
+    value: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    isMultiple: {
+      type: Boolean,
+      default: false
+    },
+    alignment: {
+      type: String,
+      default: 'center',
+      validator: value => ['start', 'end', 'center'].includes(value)
+    },
+    col: {
+      type: [Number, String],
+      default: 1
+    },
+    max: {
+      type: [Number, String],
+      default: 5
+    },
+    custom: {
+      type: String,
+      default: ''
+    },
+    list: {
+      type: Array,
+      default: () => []
+    },
+    for: {
+      type: String,
+      default: ''
+    },
+  },
+  data() {
+    return {
+      datalist: []
+    };
+  },
+  watch: {
+    list: {
+      immediate: true,
+      handler(val) {
+        this.datalist = [...val];
+      }
+    },
+    value(val){
+      if(!val){
+        this.$emit('close')
+      }
+    }
+  },
+  computed: {
+    isMask() {
+      return this.value;
+    },
+    wrapClasses() {
+      return {
+        [`${prefixCls}-${this.types}`]: this.types,
+        [`${prefixCls}--divided`]: this.types !== 'state',
+        [`${prefixCls}-${this.alignment}`]: this.alignment
+      };
+    },
+    okBtnTxt() {
+      return '确定';
+    },
+    resetBtnTxt() {
+      return '重置';
+    },
+    selectedCount() {
+      return this.datalist.filter(item => item.selected).length;
+    }
+  },
+  methods: {
+    itemClass(item) {
+      return {
+        [`${prefixCls}--disabled`]: item.disabled,
+        [`${prefixCls}--active`]: item.selected
+      };
+    },
+    findParentWithNameAttr(element, nameValue) {
+      // 如果当前元素具有 name 属性且与传入的值匹配，返回该元素
+      if (element.getAttribute && element.getAttribute('alias-name') === nameValue) {
+        return element;
+      }
+      // 如果已经到达根元素 (document 或 null)，停止查找
+      if (element.parentElement) {
+        return this.findParentWithNameAttr(element.parentElement, nameValue); // 递归查找父元素
+      }
+      return null; // 没有找到带 name 属性的匹配元素
+    },
+    clickMenuMask(e) {      
+      if (this.value) {
+        if(this.for){
+          const nameElement = this.findParentWithNameAttr(e, this.for)    
+          // 如果没找到就说明点外面了
+          if (!nameElement) {            
+            this.$emit('input', false);
+          }   
+        }        
+      }
+    },
+    selectedItem(item, index) {
+      this.$emit('change', item, index); // 通知父组件选中项改变
+    },
+    resetMenu() {
+      this.datalist.forEach(item => (item.selected = false));
+      this.$emit('reset', this.datalist);
+    },
+    sureMenu() {
+      this.$emit('close'); // 关闭菜单
+      this.$emit('ok', this.datalist); // 确认并返回数据
+    }
+  }
+};
+</script>
+
+
+<style lang="less">
+@import './style.less';
+
+.vd-dropdown-fade-enter-active,
+.vd-dropdown-fade-leave-active {
+  transition: opacity 0.5s;
+}
+
+.vd-dropdown-fade-enter,
+.vd-dropdown-fade-leave-to {
+  opacity: 0;
+}
+
+.vd-dropdown-slide-down-enter-active,
+.vd-dropdown-slide-down-leave-active {
+  transition: transform 0.5s;
+}
+
+.vd-dropdown-slide-down-enter,
+.vd-dropdown-slide-down-leave-to {
+  transform: translateY(-20px);
+}
+</style>