feat:发布版本0.7.0

TaleLin · Jan 12, 2020 · 4756163 · 4756163
2 parents 15fe170 + 36f620e
commit 4756163
Show file tree

Hide file tree

Showing 70 changed files with 1,620 additions and 59 deletions.
diff --git a/dist/album/index.js b/dist/album/index.js
@@ -0,0 +1,166 @@
+// miniprogram_npm/lin-ui/album/index.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  externalClasses: ['l-class', 'l-single-image-class', 'l-multi-image-class'],
+  properties: {
+    urls: {
+      type: Array
+    },
+    // 是否可以预览
+    preview: {
+      type: Boolean,
+      value: true
+    },
+    gapRow: {
+      type: Number,
+      value: 10,
+    },
+    gapColumn: {
+      type: Number,
+      value: 10,
+    },
+    // 单图时长边大小
+    singleSize: {
+      type: Number,
+      value: 360,
+    },
+    // 多图时图片边长
+    multipleSize: {
+      type: Number,
+      value: 158,
+    },
+    // 单图显示模式
+    singleMode: {
+      type: String,
+      value: 'aspectFit',
+    },
+    // 多图显示模式
+    multipleMode: {
+      type: String,
+      value: 'aspectFill',
+    },
+    key: {
+      type: String,
+      value: 'url'
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    // 传值方式是新方式还是旧方式
+    newType: true,
+    // 单图短边大小
+    shortSideValue: 0,
+    // 图片排列几行
+    row: 0,
+    // 图片排列几列
+    colum: 0,
+  },
+
+  /**
+   * 组件的生命周期
+   */
+  lifetimes: {
+    attached() {
+      // 在组件实例进入页面节点树时执行
+
+      //判断传入urls长度
+      if (this.data.urls.length > 9) {
+        const urls = this.data.urls.slice(0, 9);
+        this.setData({
+          urls
+        });
+        console.warn('超过9张图片！');
+      }
+
+      this.preview();
+
+    },
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    // 判断传入的urls是字符串列表(old模式)还是对象列表(new模式) 
+    judgeType() {
+      const urls = this.data.urls;
+      if (urls.length != 0) {
+        if (typeof (urls[0]) !== 'object') {
+          return false;
+        }
+      }
+      return true;
+    },
+
+    //判断照片是横屏还是竖屏并计算短边的长度
+    //如不指定短边的长度，短边会默认显示image组件的长度
+    horizontalOrVertical: function (src) {
+      wx.getImageInfo({
+        src: src,
+        success: (res) => {
+          const longSide = res.width >= res.height ? res.width : res.height;
+          const shortSide = res.width >= res.height ? res.height : res.width;
+          this.setData({
+            horizontalScreen: res.width >= res.height ? true : false,
+            shortSideValue: shortSide * this.data.singleSize / longSide
+          });
+        }
+      });
+    },
+
+    // 显示图片
+    preview: function () {
+      // 判断传入模式
+      const newType = this.judgeType();
+      this.setData({
+        newType
+      });
+      //显示图片
+      const urls = this.data.urls;
+      const key = this.data.key;
+
+      if (urls.length == 1) {
+        this.horizontalOrVertical(newType ? urls[0][key] : urls[0]);
+      }
+    },
+
+    onPreviewTap(e) {
+      const index = e.currentTarget.id;
+      const urls = this.data.urls;
+      let tempFilePath = '';
+      let previewImageList = [];
+      const newType = this.data.newType;
+      const key = this.data.key;
+
+      if (newType) {
+        tempFilePath = urls[index][key];
+        for (let i = 0; i < urls.length; i++) {
+          previewImageList.push(urls[i][key]);
+        }
+      } else {
+        tempFilePath = urls[index];
+        previewImageList = urls;
+      }
+
+      let detail = {
+        index, // 下标
+        current: urls[index], // 当前显示图片的http链接
+        all: urls // 需要预览的图片http链接列表
+      };
+      let option = {};
+      if (this.data.preview === true) {
+        wx.previewImage({
+          current: tempFilePath, // 当前显示图片的http链接
+          urls: previewImageList // 需要预览的图片http链接列表
+        });
+      }
+      this.triggerEvent('lintap', detail, option);
+    }
+
+  }
+});
diff --git a/dist/album/index.json b/dist/album/index.json
@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "usingComponents": {
+  }
+}
diff --git a/dist/album/index.wxml b/dist/album/index.wxml
@@ -0,0 +1,6 @@
+<wxs src="index.wxs" module="album"></wxs>
+<view class="container l-class" style="{{album.containerStyle(urls, multipleSize, gapRow, gapColumn)}}">
+    <block wx:for="{{urls}}" wx:key="index">
+        <image id='{{index}}' bind:tap="onPreviewTap" class="{{album.blockClass(urls, horizontalScreen)}}" style="{{album.blockStyle(urls, horizontalScreen, shortSideValue, singleSize, multipleSize)}}" src="{{newType?item[key]:item}}" mode="{{urls.length == 1?singleMode:multipleMode}}" />
+    </block>
+</view>
diff --git a/dist/album/index.wxs b/dist/album/index.wxs
@@ -0,0 +1,39 @@
+var containerStyle = function (urls, multipleSize, gapRow, gapColumn) {
+    urls.length == 2 || urls.length == 4 ? 'width:' + (2 * multipleSize + gapRow) + 'rpx;' : 'width:' + (3 * multipleSize + 2 * gapRow) + 'rpx;'
+    if (urls.length == 2 || urls.length == 4) {
+        return 'width:' + (2 * multipleSize + gapRow) + 'rpx; grid-row-gap:' + gapColumn + 'rpx; grid-column-gap:' + gapRow + 'rpx;grid-template-columns:repeat(auto-fit, ' + multipleSize + 'rpx);'
+    } else {
+        return 'width:' + (3 * multipleSize + 2 * gapRow) + 'rpx; grid-row-gap:' + gapColumn + 'rpx; grid-column-gap:' + gapRow + 'rpx;grid-template-columns:repeat(auto-fit, ' + multipleSize + 'rpx);'
+    }
+
+}
+
+var blockClass = function (urls, horizontalScreen) {
+    if (urls.length == 1) {
+        if (horizontalScreen) {
+            return 'l-single-image-class'
+        } else {
+            return 'vertical l-single-image-class'
+        }
+    } else {
+        return 'l-multi-image-class'
+    }
+}
+
+var blockStyle = function (urls, horizontalScreen, shortSideValue, singleSize, multipleSize) {
+    if (urls.length == 1) {
+        if (horizontalScreen) {
+            return 'height:' + shortSideValue + 'rpx;width:' + singleSize + 'rpx;'
+        } else {
+            return 'width:' + shortSideValue + 'rpx;height:' + singleSize + 'rpx;'
+        }
+    } else {
+        return 'height:' + multipleSize + 'rpx;width:' + multipleSize + 'rpx;'
+    }
+}
+
+module.exports = {
+    containerStyle: containerStyle,
+    blockClass: blockClass,
+    blockStyle: blockStyle
+}
diff --git a/dist/album/index.wxss b/dist/album/index.wxss
@@ -0,0 +1 @@
+.container{display:grid}.vertical{height:360rpx}
diff --git a/dist/card/index.wxml b/dist/card/index.wxml
@@ -1,6 +1,6 @@
 <view class="l-class card-container {{'card-container-' + type}} {{'card-container-' + type + '-' + position}} {{full?'card-container-full':'card-container-unfull'}}">
   <block wx:if="{{type ==='primary' || type ==='cover'}}">
-    <image wx:if="{{!plaintext}}" class="l-img-class {{full?'cover-img-full':'cover-img-unfull'}} {{ 'card-img-' + type }} {{ 'card-img-' + type + '-' + position }}" mode="aspectFill" lazy-load="{{true}}" src="{{image}}"></image>
+    <image wx:if="{{!plaintext}}" class="l-img-class {{full?'cover-img-full':'cover-img-unfull'}} {{ 'card-img-' + type }} {{ 'card-img-' + type + '-' + position }}" mode="{{imageMode}}" lazy-load="{{true}}" src="{{image}}"></image>
     <view class="card-content">
       <text class="l-title-class card-title {{'card-title-' + type}}">{{title}}</text>
       <slot />

diff --git a/dist/combined-tabs/index.js b/dist/combined-tabs/index.js
@@ -10,9 +10,6 @@ Component({
     linked() {
       // 每次有子节点被插入时执行，target是该节点实例对象，触发在该节点attached生命周期之后
       this.initTabs();
-    },
-    unlinked() {
-      this.initTabs();
     }
   },
   options: {

diff --git a/dist/popup/index.js b/dist/popup/index.js
@@ -71,8 +71,7 @@ Component({
         });
         setTimeout(()=>{
           this.setData({
-            show: false,
-            status: 'show'
+            show: false
           });
         },300);
       };

diff --git a/dist/popup/index.wxss b/dist/popup/index.wxss
@@ -1 +1 @@
-.container-popup{visibility:hidden;position:fixed;top:0;left:0;right:0;bottom:0}.popup-show{visibility:visible}.popup-show .container-bg{display:block;opacity:1}.container-bg{opacity:0;position:fixed;top:0;left:0;right:0;bottom:0;z-index:6;background:rgba(0,0,0,.4);transition:all .3s ease-in-out}.popup-bg{height:100%;width:100%;position:absolute;z-index:90}.popup-content{position:absolute;z-index:100;width:100%;max-width:100%;height:100%}.center{display:flex;height:100%;width:100%;flex-direction:row;align-items:center;justify-content:center}.left{display:flex;flex-direction:row;height:100%}.right{display:flex;flex-direction:row;justify-content:flex-end;height:100%}.bottom{display:flex;flex-direction:column-reverse;width:100%}.popup-fade-center-active-show{animation:popup-center-fadein .4s}.popup-fade-center-active-hide{animation:popup-center-fadeout .4s}.popup-fade-top-active-show{animation:popup-top-fadein .3s ease-in-out}.popup-fade-top-active-hide{animation:popup-top-fadeout .3s ease-in-out}.popup-fade-right-active-show{animation:popup-right-fadein .3s ease-in-out}.popup-fade-right-active-hide{animation:popup-right-fadeout .3s ease-in-out}.popup-fade-left-active-show{animation:popup-left-fadein .3s ease-in-out}.popup-fade-left-active-hide{animation:popup-left-fadeout .3s ease-in-out}.popup-fade-bottom-active-show{animation:popup-bottom-fadein .3s ease-in-out}.popup-fade-bottom-active-hide{animation:popup-bottom-fadeout .3s ease-in-out}@keyframes popup-center-fadein{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@keyframes popup-center-fadeout{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1)}100%{transform:scale(.8);opacity:0}}@keyframes popup-top-fadein{0%{transform:translate3d(0,-100%,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-top-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,-100%,0);opacity:.1}}@keyframes popup-left-fadein{0%{transform:translate3d(-100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-left-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(-100%,0,0);opacity:.1}}@keyframes popup-right-fadein{0%{transform:translate3d(100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-right-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(100%,0,0);opacity:.1}}@keyframes popup-bottom-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,100%,0);opacity:.1}}
+.container-popup{visibility:hidden;position:fixed;top:0;left:0;right:0;bottom:0}.popup-show{visibility:visible}.popup-show .container-bg{display:block;opacity:1}.container-bg{opacity:0;position:fixed;top:0;left:0;right:0;bottom:0;z-index:6;background:rgba(0,0,0,.4);transition:all .3s ease-in-out}.popup-bg{height:100%;width:100%;position:absolute;z-index:90}.popup-content{position:absolute;z-index:100;width:100%;max-width:100%;height:100%}.center{display:flex;height:100%;width:100%;flex-direction:row;align-items:center;justify-content:center}.left{display:flex;flex-direction:row;height:100%}.right{display:flex;flex-direction:row;justify-content:flex-end;height:100%}.bottom{display:flex;flex-direction:column-reverse;width:100%}.popup-fade-center-active-show{animation:popup-center-fadein .4s}.popup-fade-center-active-hide{animation:popup-center-fadeout .4s}.popup-fade-top-active-show{animation:popup-top-fadein .3s ease-in-out}.popup-fade-top-active-hide{animation:popup-top-fadeout .3s ease-in-out}.popup-fade-right-active-show{animation:popup-right-fadein .3s ease-in-out}.popup-fade-right-active-hide{animation:popup-right-fadeout .3s ease-in-out}.popup-fade-left-active-show{animation:popup-left-fadein .3s ease-in-out}.popup-fade-left-active-hide{animation:popup-left-fadeout .3s ease-in-out}.popup-fade-bottom-active-show{animation:popup-bottom-fadein .3s ease-in-out}.popup-fade-bottom-active-hide{animation:popup-bottom-fadeout .3s ease-in-out}@keyframes popup-center-fadein{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}@keyframes popup-center-fadeout{0%{transform:scale(1);opacity:1}50%{transform:scale(1.1)}100%{transform:scale(.8);opacity:0}}@keyframes popup-top-fadein{0%{transform:translate3d(0,-100%,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-top-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,-100%,0);opacity:.1}}@keyframes popup-left-fadein{0%{transform:translate3d(-100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-left-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(-100%,0,0);opacity:.1}}@keyframes popup-right-fadein{0%{transform:translate3d(100%,0,0);opacity:.1}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-right-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(100%,0,0);opacity:.1}}@keyframes popup-bottom-fadein{0%{transform:translate3d(0,100%,0);opacity:0}100%{transform:translate3d(0,0,0);opacity:1}}@keyframes popup-bottom-fadeout{0%{transform:translate3d(0,0,0);opacity:1}100%{transform:translate3d(0,100%,0);opacity:.1}}
diff --git a/dist/segment/index.js b/dist/segment/index.js
@@ -33,9 +33,6 @@ Component({
       linked() {
         // 每次有子节点被插入时执行，target是该节点实例对象，触发在该节点attached生命周期之后
         this.initTabs();
-      },
-      unlinked() {
-        this.initTabs();
       }
     },
   },
@@ -75,6 +72,20 @@ Component({
     itemWidth: Number
   },
 
+  observers: {
+    'activeKey': function (newKey) {
+      if(!newKey) return;
+      const index = this.data.tabList.findIndex(tab=>tab.key===newKey);
+      this.setData({
+        currentIndex:index
+      },() => {
+        if (this.data.scrollable) {
+          this.queryMultipleNodes();
+        }
+      });
+    }
+  },
+
   /**
      * 组件的初始数据
      */

diff --git a/dist/skeleton/index.js b/dist/skeleton/index.js
@@ -0,0 +1,96 @@
+Component({
+  /**
+   * 组件的属性列表
+   */
+  externalClasses: [
+    'l-class',
+    'l-title-class',
+    'l-avatar-class',
+    'l-row-class'
+  ],
+  properties: {
+    loading: {
+      type: Boolean,
+      value: true
+    },
+    title: {
+      type: Boolean,
+      value: true
+    },
+    paragraph: {
+      type: Boolean,
+      value: true
+    },
+    active: {
+      type: Boolean,
+      value: true
+    },
+    avatar: Boolean,
+    titleWidth: String,
+    avatarSize: String,
+    avatarShape: {
+      type: String,
+      value: 'circle'
+    },
+    rowsWidth: {
+      type: Array,
+      optionalTypes: [Array, String],
+      value: '60%'
+    },
+    rowsHeight: {
+      type: Array,
+      optionalTypes: [Array, String],
+      value: '34rpx'
+    },
+    rows: Number
+  },
+
+  observers: {
+    'rows,rowsWidth,rowsHeight': function(rows, rowsWidth, rowsHeight) {
+      this._getResult(rows, rowsWidth, 'rowsW', '100%');
+      this._getResult(rows, rowsHeight, 'rowsH', '34rpx');
+      this._toRows(rows);
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    _arrRepeat(target, n) {
+      const r = [];
+      for (let i = 0; i < n-1; i++) {
+        r.push(target);
+      }
+      return r;
+    },
+    _getResult(rows, rowsPro, key, target) {
+      if (Array.isArray(rowsPro)) {
+        this.data[key] = rowsPro;
+      } else {
+        const r = this._arrRepeat(target, rows);
+        r.push(rowsPro);
+        this.data[key] = r;
+      }
+    },
+    _toRows(rows) {
+      let r = [];
+      for (let i = 0; i < rows; i++) {
+        r.push({
+          width: this.data.rowsW[i],
+          height: this.data.rowsH[i]
+        });
+      }
+      this.setData({
+        r
+      });
+    }
+  }
+});
diff --git a/dist/skeleton/index.json b/dist/skeleton/index.json
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}