2020-5-27 提交

discern/src/components/lianxi/lianxi.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="vue-water-easy" ref="waterWrap">
+    <div v-for="(items,clos) in list" :key="clos" :style="waterStyle" class="colsW">
+      <ul>
+        <li v-for="(item,index) in items" :key="index" :style="{marginBottom:gap+'px'}">
+          <slot :item="item" :index="index" :clos="clos"></slot>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    maxCols: {
+      type: Number,
+      default: 3,
+      validator(value) {
+        return value > 1;
+      }
+    },
+    srcKey: {
+      type: String,
+      default: "src"
+    },
+    gap: {
+      type: Number,
+      default: 10,
+      validator(value) {
+        return value > 0;
+      }
+    },
+    imgsArr: {
+      type: Array,
+      required: true
+    }
+  },
+  computed: {
+    waterStyle() {
+      if (this.gap <= 0) {
+        this.gap = 10;
+      }
+      return {
+        margin: `0 ${this.gap / 2}px`
+      };
+    }
+  },
+  watch: {
+    imgsArr(val) {
+      this.$nextTick(() => {
+        this.list = this.initData();
+        this.start(0);
+      });
+    }
+  },
+  data() {
+    let list = this.initData();
+    return {
+      list: list
+    };
+  },
+  mounted() {
+    this.start(0);
+  },
+  methods: {
+    initData() {
+      let list = new Array(this.maxCols);
+      for (let i = 0; i < this.maxCols; i++) {
+        list[i] = [];
+      }
+      return list;
+    },
+    start(i) {
+      const me = this;
+      let imgsArr = me.imgsArr;
+      if (i >= imgsArr.length && this.$refs.waterWrap) {
+        return;
+      }
+      me.loadImg(imgsArr[i], i)
+        .catch(() => {})
+        .finally(() => {
+          me.start(++i);
+        });
+      // for(let i = 0; i < imgsArr.length; i++ ){
+      //     let item = imgsArr[i];
+      //     me.loadImg(item,i);
+      // }
+    },
+    loadImg(item) {
+      const me = this;
+      let srcKey = me.srcKey;
+      return new Promise(function(resolve, reject) {
+        if (item && item[srcKey]) {
+          let src = item[srcKey];
+          let img = new Image();
+          img.src = src;
+          img.crossOrigin = "anonymous";
+          img.onload = function() {
+            var index = me.getMinHeight();
+            me.list[index].push(item);
+            me.$nextTick(() => {
+              resolve(img);
+            });
+          };
+          img.onerror = function(e) {
+            reject(e);
+          };
+        } else {
+          reject("数据错误");
+        }
+      });
+    },
+    getMinHeight() {
+      let index = 0;
+      try {
+        if (!this.$refs.waterWrap) {
+          return index;
+        }
+        let childs = this.$refs.waterWrap.children || [];
+        let minx = childs[0].children[0].offsetHeight;
+        for (let i = 1; i < childs.length; i++) {
+          let element = childs[i];
+          let h = element.children[0].offsetHeight;
+          if (h < minx) {
+            minx = h;
+            index = i;
+          }
+        }
+      } catch (e) {
+        console.warn(e);
+        return index;
+      }
+
+      return index;
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.vue-water-easy {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  div.colsW {
+    flex: 1;
+    box-sizing: border-box;
+    position: relative;
+    &:last-child {
+      margin-right: 0 !important;
+    }
+    &:first-child {
+      margin-left: 0 !important;
+    }
+    ul {
+      list-style: none;
+      width: 100%;
+      li {
+        width: 100%;
+      }
+    }
+  }
+}
+</style>

discern/src/components/lianxi/lianxiA.vue

@@ -1,67 +1,76 @@
+<!--  -->
 <template>
-  <div class="about">
-    <div class="idd">
-      <ul>
-        <li
-          :class="{'active':indexTap == index}"
-          v-for="(item,index) in lists"
-          :key="index"
-          @click="indexTap = index"
-        >{{item}}</li>
-      </ul>
-      <div class="showBox animated bounceInDown" v-if="indexTap == 2">范德萨范德萨</div>
-    </div>
+  <div class>
+    <vueWaterEasy :imgsArr="imgsArr" srcKey="url">
+      <template v-slot="{item}">
+        <img :src="item.src" alt />
+      </template>
+    </vueWaterEasy>
   </div>
 </template>
 
 <script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+import vueWaterEasy from './lianxi.vue'
 export default {
-  name: "about",
+  //import引入的组件需要注入到对象中才能使用
+  components: {
+    vueWaterEasy
+  },
   data() {
+    //这里存放数据
     return {
-      indexTap: 0,
-      lists: [
-        "title01",
-        "title02",
-        "title03",
-        "title04",
-        "title05",
-        "title06",
-        "title07",
-        "title08",
-        "title09",
-        "title010"
+      imgsArr: [
+        {
+          src: './static/timg3.jpg'
+        },
+        {
+          src: './static/timg4.jpg'
+        },
+        {
+          src: './static/4.png'
+        },
+        {
+          src: './static/temporary/1.png'
+        },
+        {
+          src: './static/temporary/2.png'
+        },
+        {
+          src: './static/temporary/3.png'
+        },
+        {
+          src: './static/temporary/4.png'
+        },
+        {
+          src: './static/temporary/5.png'
+        },
+        {
+          src: './static/temporary/6.png'
+        },
       ]
     };
-  }
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
-
-<style lang="scss" scoped>
-ul::-webkit-scrollbar {
-  display: none;
-}
-.active {
-  color: #cd1845;
-  font-weight: bolder;
-}
-.idd {
-  width: 100%;
-  overflow: hidden;
-  ul {
-    display: flex;
-    align-items: center;
-    overflow: auto;
-    padding-left: 0;
-    list-style: none;
-    li {
-      text-align: center;
-      font-size: 16px;
-      -ms-flex-negative: 0;
-      flex-shrink: 0;
-      padding: 10px;
-      margin: 5px;
-    }
-  }
-}
-</style>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+</style>