eoss-mobiles 0.3.95 → 0.3.97

package/packages/grid/src/main.vue

@@ -1,486 +1,486 @@
-<template>
-  <div class="em-grid" @click="showHide = false">
-    <van-grid
-      v-bind="$attrs"
-      v-on="$listeners"
-      :border="border"
-      :column-num="columnNum"
-    >
-      <draggable
-        v-if="draggable"
-        v-model="newData"
-        style="width: 100%;"
-        class="menu-list-draggable"
-      >
-        <transition-group class="menu-list-draggable-item" style="width: 100%;">
-          <div
-            :style="`display: inline-block;width:${100 / columnNum}%`"
-            class="van-grid-item"
-            v-for="item of newData"
-            @mousedown.stop="onMouseDown(item)"
-            @mouseup.stop="onMouseUp($event, item)"
-            :key="item.id"
-          >
-            <div
-              class="van-grid-item__content van-grid-item__content--center van-hairline"
-            >
-              <i
-                class="van-icon  van-grid-item__icon"
-                :class="
-                  item.icon.startsWith('http') && item.icon.indexOf('/') != -1
-                    ? ''
-                    : `van-icon-${item.icon}`
-                "
-                :style="{
-                  fontSize:
-                    item.iconSize || $attrs['icon-size']
-                      ? item.iconSize || $attrs['icon-size']
-                      : ''
-                }"
-              >
-                <img
-                  v-if="
-                    item.icon.startsWith('http') || item.icon.indexOf('/') != -1
-                  "
-                  class="van-icon__image"
-                  :src="item.icon"
-                  :style="{
-                    width:
-                      item.iconSize || $attrs['icon-size']
-                        ? item.iconSize || $attrs['icon-size']
-                        : '',
-                    height:
-                      item.iconSize || $attrs['icon-size']
-                        ? item.iconSize || $attrs['icon-size']
-                        : ''
-                  }"
-                />
-                <div
-                  v-show="item.dot"
-                  :style="{ background: item.dotColor || '' }"
-                  class="van-info van-info--dot"
-                ></div>
-                <div
-                  class="van-info"
-                  :style="{ background: badgeColor || '' }"
-                  v-show="item.badge"
-                >
-                  {{
-                    maxBadge &&
-                    !isNaN(item.badge) &&
-                    Number(maxBadge) < Number(item.badge)
-                      ? maxBadge + '+'
-                      : item.badge
-                  }}
-                </div>
-              </i>
-              <em-popover
-                v-model="item.showPopover"
-                :placement="placement"
-                :theme="popoverTheme"
-                @select="popoverSelect"
-                :actions="popoverActions"
-              ></em-popover>
-              <span class="van-grid-item__text">{{ item.text }}</span>
-              <van-icon
-                v-if="showHide && item.menuType != 'add'"
-                @click.stop="handleHide(item)"
-                name="clear"
-                size="20px"
-                class="em-grid-del"
-              />
-              <div v-if="item.showMenu" class="em-grid-select-box">
-                <van-icon size="30px" color="#fff" name="success" />
-              </div>
-            </div>
-          </div>
-        </transition-group>
-      </draggable>
-      <van-grid-item
-        v-bind="item"
-        v-for="(item, index) of newData"
-        :key="index"
-        :class="{ 'em-grid-ellipsis': textEllipsis }"
-        :style="`width:${100 / columnNum}%;`"
-        @click.stop="goView($event, item)"
-        v-show="newData && newData.length > 0 && !draggable"
-      >
-        <!-- @mousedown.stop="onMouseDown(item)"
-        @mouseup.stop="onMouseUp($event, item)" -->
-        <!-- <div
-        :style="`display: inline-block;width:${100 / columnNum}%`"
-        class="van-grid-item"
-        :class="{'border-none':!border}"
-        v-for="item of newData"
-        @click.stop="goView($event, item)"
-        v-show="newData && newData.length > 0 && !draggable"
-        :key="item.id"
-      >
-        <div
-          class="van-grid-item__content van-grid-item__content--center van-hairline"
-        > -->
-        <i
-          class="van-icon  van-grid-item__icon"
-          :class="
-            item.icon.startsWith('http') && item.icon.indexOf('/') != -1
-              ? ''
-              : `van-icon-${item.icon}`
-          "
-          :style="{
-            fontSize:
-              item.iconSize || $attrs['icon-size']
-                ? item.iconSize || $attrs['icon-size']
-                : ''
-          }"
-        >
-          <em-image
-            v-if="item.icon.startsWith('http') || item.icon.indexOf('/') != -1"
-            class="van-icon__image"
-            :src="item.icon"
-            :error-icon="errorIcon"
-            :style="{
-              width:
-                item.iconSize || $attrs['icon-size']
-                  ? item.iconSize || $attrs['icon-size']
-                  : '',
-              height:
-                item.iconSize || $attrs['icon-size']
-                  ? item.iconSize || $attrs['icon-size']
-                  : ''
-            }"
-          />
-          <div
-            v-show="item.dot"
-            :style="{ background: item.dotColor || '' }"
-            class="van-info van-info--dot"
-          ></div>
-          <div
-            class="van-info"
-            :style="{ background: badgeColor || '' }"
-            v-show="item.badge"
-          >
-            {{
-              maxBadge &&
-              !isNaN(item.badge) &&
-              Number(maxBadge) < Number(item.badge)
-                ? maxBadge + '+'
-                : item.badge
-            }}
-          </div>
-        </i>
-        <em-popover
-          v-model="item.showPopover"
-          :placement="placement"
-          @select="popoverSelect($event, item)"
-          :theme="popoverTheme"
-          :actions="popoverActions"
-        ></em-popover>
-        <span class="van-grid-item__text">{{ item.text }}</span>
-        <van-icon
-          v-if="showHide && item.menuType != 'add'"
-          @click.stop="handleHide(item)"
-          name="clear"
-          size="20px"
-          class="em-grid-del"
-        />
-        <div v-if="item.showMenu" class="em-grid-select-box">
-          <van-icon size="30px" color="#fff" name="success" />
-        </div>
-        <!-- </div>
-      </div> -->
-      </van-grid-item>
-      <slot v-show="newData && newData.length == 0" />
-    </van-grid>
-    <em-popup style="width:80%;height:50%" v-if="show" v-model="show">
-      <div class="em-grid-popup">
-        <p class="em-grid-popup-label">添加菜单</p>
-        <em-grid
-          class="em-grid-popup-content"
-          :data="hideMenuList"
-          v-bind="$attrs"
-          :border="false"
-          :column-num="columnNum"
-          @click="selectMenu"
-        />
-        <div class="em-grid-popup-button">
-          <em-button round style="width:49%" @click="show = false"
-            >取消</em-button
-          >
-          <em-button
-            round
-            style="width:49%"
-            type="primary"
-            @click="handleShowMenu"
-            >确认</em-button
-          >
-        </div>
-      </div>
-    </em-popup>
-  </div>
-</template>
-
-<script>
-import draggable from 'vuedraggable';
-export default {
-  name: 'EmGrid',
-  inheritAttrs: false,
-  components: { draggable },
-  props: {
-    data: {
-      type: Array,
-      default: () => []
-    },
-    columnNum: {
-      type: [Number, String],
-      default: 4
-    },
-    textEllipsis: {
-      type: Boolean,
-      default: false
-    },
-    targetStop: {
-      type: Boolean,
-      default: true
-    },
-    badgeColor: {
-      type: String,
-      default: ''
-    },
-    maxBadge: {
-      type: String,
-      default: ''
-    },
-    isHideMenu: {
-      type: Boolean,
-      default: false
-    },
-    hideMenuKey: {
-      type: String,
-      default: 'id'
-    },
-    hideMenu: {
-      type: [String, Array],
-      default: () => []
-    },
-    addMenuIcon: {
-      type: String,
-      default: 'plus'
-    },
-    addMenuIconSize: {
-      type: String,
-      default: '40px'
-    },
-    draggable: {
-      type: Boolean,
-      default: false
-    },
-    popoverActions: {
-      type: Array,
-      default: () => [{ text: '隐藏菜单', type: 'hideMenu' }]
-    },
-    isTouch: {
-      type: Boolean,
-      default: false
-    },
-    placement: {
-      type: String,
-      default: 'top'
-    },
-    popoverTheme: {
-      type: String,
-      default: 'dark'
-    },
-    border: {
-      type: Boolean,
-      default: true
-    },
-    errorIcon: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      timer: null,
-      showHide: false,
-      isLongPress: false,
-      newData: [],
-      show: false,
-      showPopover: false,
-      selectMenuArr: [],
-      hideMenuList: []
-    };
-  },
-  watch: {
-    hideMenu: {
-      handler(val) {
-        this.defaultHide(val);
-      },
-      deep: true,
-      immediate: true
-    },
-    data: {
-      handler(val) {
-        this.newData = JSON.parse(JSON.stringify(val));
-        this.defaultHide(this.hideMenu);
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-  methods: {
-    popoverSelect(val, item) {
-      if (val.type == 'hideMenu') {
-        this.handleHide(item);
-      } else {
-        this.$emit('touchSelect', { action: val, data: item });
-      }
-    },
-    onMouseDown(item) {
-      // this.showPopover = true
-      if (this.draggable || !this.isTouch) return;
-      this.isLongPress = false;
-      this.timer = setTimeout(() => {
-        if (this.isLongPress === false) {
-          this.isLongPress = true;
-          this.lastTapTime = new Date().getTime();
-          this.$set(item, 'showPopover', true);
-        }
-      }, 500);
-    },
-    onMouseUp($event, item) {
-      if (this.isLongPress === false) {
-        this.lastTapTime = new Date().getTime();
-        this.$set(item, 'showPopover', false);
-        this.goView($event, item);
-        // 执行相应的操作
-      }
-      this.isLongPress = false;
-      clearTimeout(this.timer);
-    },
-    hideDelIcon() {
-      this.showHide = false;
-    },
-    handleShowMenu() {
-      let str = this.selectMenuArr;
-      // let str = this.selectMenuArr.join(',');
-      if (Array.isArray(this.hideMenu)) {
-        let hideArr = this.hideMenuList.filter(
-          x => str.indexOf(x[this.hideMenuKey]) == -1
-        );
-        this.$emit('hide', hideArr);
-      } else {
-        let hide = this.hideMenuList.filter(
-          x => str.indexOf(x[this.hideMenuKey]) == -1
-        );
-        hide = hide.map(x => x[this.hideMenuKey]);
-        this.$emit('hide', hide.join(','));
-      }
-      this.selectMenuArr = [];
-      this.show = false;
-    },
-    selectMenu(val) {
-      if (val.showMenu) {
-        this.selectMenuArr = this.selectMenuArr.filter(
-          x => x != val[this.hideMenuKey]
-        );
-      } else {
-        this.selectMenuArr.push(val[this.hideMenuKey]);
-      }
-      this.$set(val, 'showMenu', !val.showMenu);
-    },
-    defaultHide(val) {
-      if (this.isHideMenu && val != undefined) {
-        if (Array.isArray(val)) {
-          let menuKey = val.map(x => x.id);
-          // let menuKey = val.map(x => x.id).join(',');
-          this.newData = this.data.filter(
-            x => menuKey.indexOf(x[this.hideMenuKey]) == -1
-          );
-          this.hideMenuList = this.data.filter(
-            x => menuKey.indexOf(x[this.hideMenuKey]) != -1
-          );
-        } else {
-          val = val + '';
-          this.newData = this.data.filter(
-            x => val.indexOf(x[this.hideMenuKey]) == -1
-          );
-          this.hideMenuList = this.data.filter(
-            x => val.indexOf(x[this.hideMenuKey]) != -1
-          );
-        }
-      }
-      if (
-        this.isHideMenu != undefined &&
-        (this.newData.length > 0 &&
-        this.newData[this.newData.length - 1].menuType === 'add'
-          ? this.newData.length - 1 < this.data.length
-          : this.newData.length < this.data.length)
-      ) {
-        this.newData.push({
-          icon: this.addMenuIcon || 'plus',
-          iconSize: this.addMenuIconSize,
-          menuType: 'add'
-        });
-      }
-    },
-    handleHide(item) {
-      this.$dialog
-        .confirm({
-          message: `确定要隐藏<span style="color:red;font-weight:bold;margin:0px 5px">${
-            item.text
-          }</span>菜单吗？`
-        })
-        .then(() => {
-          if (Array.isArray(this.hideMenu)) {
-            let hideArr = [...this.hideMenu, item];
-            this.$emit('hide', hideArr);
-          } else {
-            let hideStr = this.hideMenu
-              ? this.hideMenu + ',' + item[this.hideMenuKey]
-              : item[this.hideMenuKey];
-            this.$emit('hide', hideStr);
-          }
-        });
-    },
-    goView(event, val) {
-      if (val.menuType === 'add') {
-        this.show = true;
-        return;
-      }
-      const currentTime = new Date().getTime();
-      const tapLength = currentTime - this.lastTapTime;
-      this.lastTapTime = currentTime;
-      // if (tapLength > 300) {
-      //   return;
-      // }
-      if (this.isHideMenu) {
-        if (tapLength < 300) {
-          this.handleDoubleClick(val);
-          clearTimeout(this.timer);
-          return;
-        }
-        if (this.showHide) {
-          this.showHide = false;
-          return;
-        }
-        this.timer = setTimeout(() => {
-          this.$emit('click', val, event);
-          this.targetStop && event.stopPropagation();
-        }, 300);
-      } else {
-        this.$emit('click', val, event);
-        this.targetStop && event.stopPropagation();
-      }
-    },
-    handleDoubleClick(val) {
-      if (this.isHideMenu) {
-        this.showHide = true;
-      }
-      this.$emit('dbclick', val);
-    }
-  }
-};
-</script>
-
-<style></style>
+<template>
+  <div class="em-grid" @click="showHide = false">
+    <van-grid
+      v-bind="$attrs"
+      v-on="$listeners"
+      :border="border"
+      :column-num="columnNum"
+    >
+      <draggable
+        v-if="draggable"
+        v-model="newData"
+        style="width: 100%;"
+        class="menu-list-draggable"
+      >
+        <transition-group class="menu-list-draggable-item" style="width: 100%;">
+          <div
+            :style="`display: inline-block;width:${100 / columnNum}%`"
+            class="van-grid-item"
+            v-for="item of newData"
+            @mousedown.stop="onMouseDown(item)"
+            @mouseup.stop="onMouseUp($event, item)"
+            :key="item.id"
+          >
+            <div
+              class="van-grid-item__content van-grid-item__content--center van-hairline"
+            >
+              <i
+                class="van-icon  van-grid-item__icon"
+                :class="
+                  item.icon.startsWith('http') && item.icon.indexOf('/') != -1
+                    ? ''
+                    : `van-icon-${item.icon}`
+                "
+                :style="{
+                  fontSize:
+                    item.iconSize || $attrs['icon-size']
+                      ? item.iconSize || $attrs['icon-size']
+                      : ''
+                }"
+              >
+                <img
+                  v-if="
+                    item.icon.startsWith('http') || item.icon.indexOf('/') != -1
+                  "
+                  class="van-icon__image"
+                  :src="item.icon"
+                  :style="{
+                    width:
+                      item.iconSize || $attrs['icon-size']
+                        ? item.iconSize || $attrs['icon-size']
+                        : '',
+                    height:
+                      item.iconSize || $attrs['icon-size']
+                        ? item.iconSize || $attrs['icon-size']
+                        : ''
+                  }"
+                />
+                <div
+                  v-show="item.dot"
+                  :style="{ background: item.dotColor || '' }"
+                  class="van-info van-info--dot"
+                ></div>
+                <div
+                  class="van-info"
+                  :style="{ background: badgeColor || '' }"
+                  v-show="item.badge"
+                >
+                  {{
+                    maxBadge &&
+                    !isNaN(item.badge) &&
+                    Number(maxBadge) < Number(item.badge)
+                      ? maxBadge + '+'
+                      : item.badge
+                  }}
+                </div>
+              </i>
+              <em-popover
+                v-model="item.showPopover"
+                :placement="placement"
+                :theme="popoverTheme"
+                @select="popoverSelect"
+                :actions="popoverActions"
+              ></em-popover>
+              <span class="van-grid-item__text">{{ item.text }}</span>
+              <van-icon
+                v-if="showHide && item.menuType != 'add'"
+                @click.stop="handleHide(item)"
+                name="clear"
+                size="20px"
+                class="em-grid-del"
+              />
+              <div v-if="item.showMenu" class="em-grid-select-box">
+                <van-icon size="30px" color="#fff" name="success" />
+              </div>
+            </div>
+          </div>
+        </transition-group>
+      </draggable>
+      <van-grid-item
+        v-bind="item"
+        v-for="(item, index) of newData"
+        :key="index"
+        :class="{ 'em-grid-ellipsis': textEllipsis }"
+        :style="`width:${100 / columnNum}%;`"
+        @click.stop="goView($event, item)"
+        v-show="newData && newData.length > 0 && !draggable"
+      >
+        <!-- @mousedown.stop="onMouseDown(item)"
+        @mouseup.stop="onMouseUp($event, item)" -->
+        <!-- <div
+        :style="`display: inline-block;width:${100 / columnNum}%`"
+        class="van-grid-item"
+        :class="{'border-none':!border}"
+        v-for="item of newData"
+        @click.stop="goView($event, item)"
+        v-show="newData && newData.length > 0 && !draggable"
+        :key="item.id"
+      >
+        <div
+          class="van-grid-item__content van-grid-item__content--center van-hairline"
+        > -->
+        <i
+          class="van-icon  van-grid-item__icon"
+          :class="
+            item.icon.startsWith('http') && item.icon.indexOf('/') != -1
+              ? ''
+              : `van-icon-${item.icon}`
+          "
+          :style="{
+            fontSize:
+              item.iconSize || $attrs['icon-size']
+                ? item.iconSize || $attrs['icon-size']
+                : ''
+          }"
+        >
+          <em-image
+            v-if="item.icon.startsWith('http') || item.icon.indexOf('/') != -1"
+            class="van-icon__image"
+            :src="item.icon"
+            :error-icon="errorIcon"
+            :style="{
+              width:
+                item.iconSize || $attrs['icon-size']
+                  ? item.iconSize || $attrs['icon-size']
+                  : '',
+              height:
+                item.iconSize || $attrs['icon-size']
+                  ? item.iconSize || $attrs['icon-size']
+                  : ''
+            }"
+          />
+          <div
+            v-show="item.dot"
+            :style="{ background: item.dotColor || '' }"
+            class="van-info van-info--dot"
+          ></div>
+          <div
+            class="van-info"
+            :style="{ background: badgeColor || '' }"
+            v-show="item.badge"
+          >
+            {{
+              maxBadge &&
+              !isNaN(item.badge) &&
+              Number(maxBadge) < Number(item.badge)
+                ? maxBadge + '+'
+                : item.badge
+            }}
+          </div>
+        </i>
+        <em-popover
+          v-model="item.showPopover"
+          :placement="placement"
+          @select="popoverSelect($event, item)"
+          :theme="popoverTheme"
+          :actions="popoverActions"
+        ></em-popover>
+        <span class="van-grid-item__text">{{ item.text }}</span>
+        <van-icon
+          v-if="showHide && item.menuType != 'add'"
+          @click.stop="handleHide(item)"
+          name="clear"
+          size="20px"
+          class="em-grid-del"
+        />
+        <div v-if="item.showMenu" class="em-grid-select-box">
+          <van-icon size="30px" color="#fff" name="success" />
+        </div>
+        <!-- </div>
+      </div> -->
+      </van-grid-item>
+      <slot v-show="newData && newData.length == 0" />
+    </van-grid>
+    <em-popup style="width:80%;height:50%" v-if="show" v-model="show">
+      <div class="em-grid-popup">
+        <p class="em-grid-popup-label">添加菜单</p>
+        <em-grid
+          class="em-grid-popup-content"
+          :data="hideMenuList"
+          v-bind="$attrs"
+          :border="false"
+          :column-num="columnNum"
+          @click="selectMenu"
+        />
+        <div class="em-grid-popup-button">
+          <em-button round style="width:49%" @click="show = false"
+            >取消</em-button
+          >
+          <em-button
+            round
+            style="width:49%"
+            type="primary"
+            @click="handleShowMenu"
+            >确认</em-button
+          >
+        </div>
+      </div>
+    </em-popup>
+  </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable';
+export default {
+  name: 'EmGrid',
+  inheritAttrs: false,
+  components: { draggable },
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
+    columnNum: {
+      type: [Number, String],
+      default: 4
+    },
+    textEllipsis: {
+      type: Boolean,
+      default: false
+    },
+    targetStop: {
+      type: Boolean,
+      default: true
+    },
+    badgeColor: {
+      type: String,
+      default: ''
+    },
+    maxBadge: {
+      type: String,
+      default: ''
+    },
+    isHideMenu: {
+      type: Boolean,
+      default: false
+    },
+    hideMenuKey: {
+      type: String,
+      default: 'id'
+    },
+    hideMenu: {
+      type: [String, Array],
+      default: () => []
+    },
+    addMenuIcon: {
+      type: String,
+      default: 'plus'
+    },
+    addMenuIconSize: {
+      type: String,
+      default: '40px'
+    },
+    draggable: {
+      type: Boolean,
+      default: false
+    },
+    popoverActions: {
+      type: Array,
+      default: () => [{ text: '隐藏菜单', type: 'hideMenu' }]
+    },
+    isTouch: {
+      type: Boolean,
+      default: false
+    },
+    placement: {
+      type: String,
+      default: 'top'
+    },
+    popoverTheme: {
+      type: String,
+      default: 'dark'
+    },
+    border: {
+      type: Boolean,
+      default: true
+    },
+    errorIcon: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      timer: null,
+      showHide: false,
+      isLongPress: false,
+      newData: [],
+      show: false,
+      showPopover: false,
+      selectMenuArr: [],
+      hideMenuList: []
+    };
+  },
+  watch: {
+    hideMenu: {
+      handler(val) {
+        this.defaultHide(val);
+      },
+      deep: true,
+      immediate: true
+    },
+    data: {
+      handler(val) {
+        this.newData = JSON.parse(JSON.stringify(val));
+        this.defaultHide(this.hideMenu);
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    popoverSelect(val, item) {
+      if (val.type == 'hideMenu') {
+        this.handleHide(item);
+      } else {
+        this.$emit('touchSelect', { action: val, data: item });
+      }
+    },
+    onMouseDown(item) {
+      // this.showPopover = true
+      if (this.draggable || !this.isTouch) return;
+      this.isLongPress = false;
+      this.timer = setTimeout(() => {
+        if (this.isLongPress === false) {
+          this.isLongPress = true;
+          this.lastTapTime = new Date().getTime();
+          this.$set(item, 'showPopover', true);
+        }
+      }, 500);
+    },
+    onMouseUp($event, item) {
+      if (this.isLongPress === false) {
+        this.lastTapTime = new Date().getTime();
+        this.$set(item, 'showPopover', false);
+        this.goView($event, item);
+        // 执行相应的操作
+      }
+      this.isLongPress = false;
+      clearTimeout(this.timer);
+    },
+    hideDelIcon() {
+      this.showHide = false;
+    },
+    handleShowMenu() {
+      let str = this.selectMenuArr;
+      // let str = this.selectMenuArr.join(',');
+      if (Array.isArray(this.hideMenu)) {
+        let hideArr = this.hideMenuList.filter(
+          x => str.indexOf(x[this.hideMenuKey]) == -1
+        );
+        this.$emit('hide', hideArr);
+      } else {
+        let hide = this.hideMenuList.filter(
+          x => str.indexOf(x[this.hideMenuKey]) == -1
+        );
+        hide = hide.map(x => x[this.hideMenuKey]);
+        this.$emit('hide', hide.join(','));
+      }
+      this.selectMenuArr = [];
+      this.show = false;
+    },
+    selectMenu(val) {
+      if (val.showMenu) {
+        this.selectMenuArr = this.selectMenuArr.filter(
+          x => x != val[this.hideMenuKey]
+        );
+      } else {
+        this.selectMenuArr.push(val[this.hideMenuKey]);
+      }
+      this.$set(val, 'showMenu', !val.showMenu);
+    },
+    defaultHide(val) {
+      if (this.isHideMenu && val != undefined) {
+        if (Array.isArray(val)) {
+          let menuKey = val.map(x => x.id);
+          // let menuKey = val.map(x => x.id).join(',');
+          this.newData = this.data.filter(
+            x => menuKey.indexOf(x[this.hideMenuKey]) == -1
+          );
+          this.hideMenuList = this.data.filter(
+            x => menuKey.indexOf(x[this.hideMenuKey]) != -1
+          );
+        } else {
+          val = val + '';
+          this.newData = this.data.filter(
+            x => val.indexOf(x[this.hideMenuKey]) == -1
+          );
+          this.hideMenuList = this.data.filter(
+            x => val.indexOf(x[this.hideMenuKey]) != -1
+          );
+        }
+      }
+      if (
+        this.isHideMenu != undefined &&
+        (this.newData.length > 0 &&
+        this.newData[this.newData.length - 1].menuType === 'add'
+          ? this.newData.length - 1 < this.data.length
+          : this.newData.length < this.data.length)
+      ) {
+        this.newData.push({
+          icon: this.addMenuIcon || 'plus',
+          iconSize: this.addMenuIconSize,
+          menuType: 'add'
+        });
+      }
+    },
+    handleHide(item) {
+      this.$dialog
+        .confirm({
+          message: `确定要隐藏<span style="color:red;font-weight:bold;margin:0px 5px">${
+            item.text
+          }</span>菜单吗？`
+        })
+        .then(() => {
+          if (Array.isArray(this.hideMenu)) {
+            let hideArr = [...this.hideMenu, item];
+            this.$emit('hide', hideArr);
+          } else {
+            let hideStr = this.hideMenu
+              ? this.hideMenu + ',' + item[this.hideMenuKey]
+              : item[this.hideMenuKey];
+            this.$emit('hide', hideStr);
+          }
+        });
+    },
+    goView(event, val) {
+      if (val.menuType === 'add') {
+        this.show = true;
+        return;
+      }
+      const currentTime = new Date().getTime();
+      const tapLength = currentTime - this.lastTapTime;
+      this.lastTapTime = currentTime;
+      // if (tapLength > 300) {
+      //   return;
+      // }
+      if (this.isHideMenu) {
+        if (tapLength < 300) {
+          this.handleDoubleClick(val);
+          clearTimeout(this.timer);
+          return;
+        }
+        if (this.showHide) {
+          this.showHide = false;
+          return;
+        }
+        this.timer = setTimeout(() => {
+          this.$emit('click', val, event);
+          this.targetStop && event.stopPropagation();
+        }, 300);
+      } else {
+        this.$emit('click', val, event);
+        this.targetStop && event.stopPropagation();
+      }
+    },
+    handleDoubleClick(val) {
+      if (this.isHideMenu) {
+        this.showHide = true;
+      }
+      this.$emit('dbclick', val);
+    }
+  }
+};
+</script>
+
+<style></style>