@cloudbase/weda-ui 0.2.13 → 0.2.16

package/src/mp/components/navLayout/index.js

@@ -0,0 +1,123 @@
+Component({
+  options: {
+    virtualHost: true,
+    multipleSlots: true,
+  },
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    navOption: { type: Array, value: [] },
+    mobileCol: {
+      type: Number,
+      value: 4,
+    },
+    pcCol: {
+      type: Number,
+      value: 4,
+    },
+    iconSize: {
+      type: String,
+      value: 'default',
+    },
+    textColor: {
+      type: String,
+      value: 'rgb(0, 0, 0)"',
+    },
+    fontWeight: {
+      type: String,
+      value: 'normal',
+    },
+    lineHeight: {
+      type: String,
+      value: 'auto',
+    },
+    maxLines: {
+      type: Number,
+      value: 2,
+    },
+    fontSize: {
+      type: Number,
+      value: 14,
+    },
+  },
+  data: {
+    cls: '',
+    optionList: [],
+    titleStyle: '',
+  },
+
+  methods: {
+    navigaTo: function (itemInfo) {
+      const item = itemInfo?.currentTarget?.dataset?.item;
+      if (item.tapStatus == 'inside') {
+        const paramObj = [];
+        if (item.withParams && item?.params) {
+          for (let info of item.params) {
+            paramObj.push(info.key + '=' + info.value);
+          }
+        }
+        item.paramObj = paramObj;
+        if (item.withParams && item.params.length > 0) {
+          wx.navigateTo({
+            url:
+              '/pages/' + item?.insideUrl + '/index?' + item.paramObj.join('&'),
+          });
+        } else {
+          wx.navigateTo({
+            url: '/pages/' + item?.insideUrl + '/index',
+          });
+        }
+      }
+    },
+  },
+  observers: {
+    'navOption,mobileCol': function (navOption, mobileCol) {
+      let list = [];
+      list.length = Math.floor(navOption.length / mobileCol);
+      list.forEach((item, index) => {
+        list[index] = [];
+      });
+      navOption.forEach((item, index) => {
+        if (item.icon.includes('td:')) {
+          item['tdicon'] = item.icon.split(':')[1];
+        }
+        const _index = Math.floor(index / mobileCol);
+        if (!list[_index] || list[_index].length <= 0) {
+          // 保证每个col 的数据都是有的，列入总共7个数据，那么第二行的3， 4，5数据是undefined, 占位
+          list[_index] = Array.apply(null, Array(mobileCol));
+        }
+        list[_index][index - _index * mobileCol] = item;
+      });
+      const optionList = list;
+      this.setData({
+        optionList,
+      });
+    },
+    'textColor,fontWeight,fontSize,lineHeight': function (
+      textColor,
+      fontWeight,
+      fontSize,
+      lineHeight
+    ) {
+      let titleStyle;
+      // 添加文本颜色属性
+      if (textColor !== '') {
+        titleStyle = `color:${textColor}`;
+      }
+
+      // 添加对齐属性
+      if (fontWeight !== '') {
+        titleStyle = `${titleStyle};font-weight: ${fontWeight};font-size:${fontSize};line-height:${
+          lineHeight == 'auto' ? 'normal' : lineHeight
+        }`;
+      }
+      this.setData({ titleStyle });
+    },
+  },
+});

package/src/mp/components/navLayout/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "mp-cells": "weui-miniprogram/cells/cells"
+  }
+}

package/src/mp/components/navLayout/index.wxml

@@ -0,0 +1,25 @@
+<view class="weda-grid-navigation" style="{{style}}">
+  <view class="weda-grid-navigation__wrapper">
+    <block wx:for="{{optionList}}" wx:key="colIndex" wx:for-item="row">
+      <view class="weda-grid weda-grid-navigation__row">
+        <block wx:for="{{row}}" wx:key="colIndex" wx:for-item="col">
+          <view class="weda-col weda-grid__item weda-grid-navigation__col weda-grid-navigation__col--{{iconSize}}" style="width: {{(1 / mobileCol)*100}}%" data-item="{{col}}" bindtap="navigaTo">
+            <view class="weda-grid__box">
+              <view class="weda-grid-navigation__col">
+                <view wx:if="{{col.icon!='自定义图片'}}" class="weda-grid-navigation__icon">
+
+                    <view wx:if="{{col.tdicon}}" class="weda-icon t-icon t-icon-{{col.tdicon}}"></view>
+
+                  <view wx:if="{{!col.tdicon}}" class="weda-icon lcap-icon-padding lcap-icon lcap-icon-{{col.icon}}">
+                  </view>
+                </view>
+                <image wx:if="{{col.icon=='自定义图片'&&col.iconSrc}}" src="{{col.iconSrc}}" class="weda-grid-navigation__img"></image>
+              </view>
+              <view class="weda-grid-navigation__text" wx-if="{{col.title}}" style="-webkit-line-clamp:{{maxLines?maxLines:'revert'}};{{titleStyle}}">{{col.title}}</view>
+            </view>
+          </view>
+        </block>
+      </view>
+    </block>
+  </view>
+</view>