eoss-mobiles 0.2.38 → 0.2.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eoss-mobiles",
-  "version": "0.2.38",
+  "version": "0.2.40",
   "description": "eoss内部移动端业务组件",
   "main": "lib/eoss-mobile.common.js",
   "files": [

package/packages/grid/src/main.vue

@@ -1,17 +1,91 @@
 <template>
-  <div class="em-grid">
+  <div class="em-grid" @click="showHide = false">
     <van-grid v-bind="$attrs" v-on="$listeners" :column-num="columnNum">
       <van-grid-item
         v-bind="item"
         :class="{ 'em-grid-ellipsis': textEllipsis }"
         :style="`width:${100 / columnNum}%;`"
-        @click="goView($event, item)"
-        v-show="$attrs.data && $attrs.data.length > 0"
-        v-for="(item, index) of $attrs.data"
+        @click.stop="goView($event, item)"
+        v-show="newData && newData.length > 0"
+        v-for="(item, index) of newData"
         :key="index"
-      />
-      <slot v-show="$attrs.data && $attrs.data.length == 0" />
+      >
+        <i
+          class="van-icon  van-grid-item__icon"
+          :class="
+            item.icon.startsWith('http') && item.icon.indexOf('/') != -1
+              ? ''
+              : `van-icon-${item.icon}`
+          "
+          :style="{ size: item.iconSize ? item.iconSize : '' }"
+        >
+          <img
+            v-if="item.icon.startsWith('http') || item.icon.indexOf('/') != -1"
+            class="van-icon__image"
+            :src="item.icon"
+            :style="{
+              width: item.iconSize ? item.iconSize : '',
+              height: item.iconSize ? item.iconSize : ''
+            }"
+          />
+          <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>
+        <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>
+      </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="$attrs.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>
 
@@ -20,6 +94,10 @@ export default {
   name: 'EmGrid',
   inheritAttrs: false,
   props: {
+    data: {
+      type: Array,
+      default: () => []
+    },
     columnNum: {
       type: [Number, String],
       default: 4
@@ -31,12 +109,178 @@ export default {
     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: ''
+    }
+  },
+  data() {
+    return {
+      lastTapTime: 0,
+      timer: null,
+      showHide: false,
+      newData: [],
+      show: 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: {
+    hideDelIcon() {
+      this.showHide = false;
+    },
+    handleShowMenu() {
+      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).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) {
-      this.$emit('click', val);
-      this.targetStop && event.stopPropagation();
+      if (val.menuType === 'add') {
+        this.show = true;
+        return;
+      }
+      const currentTime = new Date().getTime();
+      const tapLength = currentTime - this.lastTapTime;
+      this.lastTapTime = currentTime;
+      if (this.isHideMenu) {
+        if (tapLength < 500) {
+          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();
+        }, 500);
+      } else {
+        this.$emit('click', val, event);
+        this.targetStop && event.stopPropagation();
+      }
+    },
+    handleDoubleClick(val) {
+      if (this.isHideMenu) {
+        this.showHide = true;
+      }
+      this.$emit('dbclick', val);
     }
   }
 };

package/packages/theme-chalk/lib/grid.css

@@ -0,0 +1 @@
+.em-grid-popup,.em-grid-popup-button{display:-webkit-box;display:-ms-flexbox}.em-grid-del{position:absolute;top:5px;right:5px}.em-grid-popup{padding:10px;height:100%;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.em-grid-popup-label{text-align:center;font-size:16px;color:#000;font-weight:700;margin-bottom:10px}.em-grid-popup-content{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:auto;overflow-x:hidden}.em-grid-popup-button{display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-top:10px}.em-grid-select-box{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.em-grid .van-popup{border-radius:5px}