微信小程序-组件的使用

组件的使用

在页面上需要将数据显示为树形结构，多个页面上使用，所以将树形结构封装成一个组件，在页面上引用即可

tree 结构

在文件夹下新建一个component的文件夹

<!-- tree.wxml -->
<view wx:for="{{tree}}" wx:key="index" class="c-tree">
    <view class="tree-item tree-item-select {{selectKey == item.id ? 'tree-item-name-select' : '' }}">
        <view class="tree-item_text">
            <view class="tree-item-onOff" wx:if="{{item.children && item.children.length > 0}}" bindtap="isOpen" data-index="{{index}}">
                <image src="/assets/u1490.svg" class="icon-image {{item.open ? 'tree-item-onOff-open' : 'tree-item-onOff-closed'}}"></image>
            </view>
            <view class="tree-item-onOff" wx:else></view>
            <view class="tree-item-name" bindtap="select" data-item="{{item}}" data-index="{{index}}">
                <view class="name">{{item.name}}</view>
                <view class="img">
                    <!-- <image wx:if="{{selectKey == item.id }}" src="/assets/icon/u435.svg"></image> -->
                </view>
            </view>
        </view>
        <!-- <view class="typeItem_btn">
            <view class="btn_btn" bindtap="deleteList" data-obj="{{item}}">
                <text class="iconfont icon-delete_light"></text>
            </view>
            <view class="btn_btn btn_btn2" bindtap="editList" data-obj="{{item}}">
                <text class="iconfont icon-edit"></text>
            </view>
        </view> -->
    </view>
    <view style='padding-left: 25rpx;' >
      <c-tree wx:if="{{item.children && item.children.length > 0 && item.open }}" dataTree='{{ item.children }}' selectKey="{{selectKey}}" isSelectLastNode="{{isSelectLastNode}}" isOpenAll="{{isOpenAll}}"></c-tree>
    </view>
</view>

// json
{
    "component": true,
    "usingComponents": {
      "c-tree": "/component/c-tree/tree"
    }
  }

// ts
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    isOpenAll: {
      //是否展开全部节点
      type: Boolean,
      value: false,
    },
    dataTree: {
      type: Array,
      value: [],
      observer: function (newVal, oldVal) {
        console.log(newVal, oldVal);
        if (newVal) {
          newVal.forEach((v: any) => {
            // v.open = this.properties.isOpenAll; // 是否展开
            v.open = false
          });
          console.log('===newVal===', newVal)
          this.setData({
            tree: newVal,
          });
        }
      },
    },
    selectKey: {
      // 选中的节点id
      type: String,
      value: "",
      observer: function(newVal, oldVal) {
        console.log('selectKey', newVal, oldVal)
      }
    },
    isSelectLastNode: {
      //是否必须选中最后一节点
      type: Boolean,
      value: false,
    },
  },
  observers: {
    dataTree: function (params) {
      console.log(params);
      params.forEach((v: any) => {
        v.open = this.properties.isOpenAll; // 是否展开
      });
      this.setData({
        tree: params,
      });
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
    tree: [
      {
        id: 1,
        name: "设备类型",
        open: "false",
      },
    ],
  },

  /**
   * 组件的方法列表
   */
  methods: {
    isOpen(e: any) {
      const open = "tree[" + e.currentTarget.dataset.index + "].open";
      this.setData({
        [open]: !this.data.tree[e.currentTarget.dataset.index].open,
      });
    },
    select(e: any) {
      const item = e.currentTarget.dataset.item;
      console.log(item)
      // this.triggerEvent('select', { item: item})
      if (this.properties.isSelectLastNode) {
        console.log(item);
        if (!item.children || item.children.length == 0) {
          this.triggerEvent(
            "select",
            { item: item },
            { bubbles: true, composed: true }
          );
        } else {
          // this.triggerEvent(
          //   "select",
          //   { tips: "必须选择最后一个节点" },
          //   { bubbles: true, composed: true }
          // );
          this.triggerEvent(
            "select",
            { item: item },
            { bubbles: true, composed: true }
          );
        }
      } else {
        this.triggerEvent(
          "select",
          { item: item },
          { bubbles: true, composed: true }
        );
      }
    },
    deleteList(e: any) {
      console.log(e.currentTarget.dataset.obj);
      this.triggerEvent("deleteList", e.currentTarget.dataset.obj, { bubbles: true, composed: true });
    },
    editList(e: any) {
      console.log(e.currentTarget);
      this.triggerEvent("editList", e.currentTarget.dataset.obj, { bubbles: true, composed: true });
    },
  },

  // attached: function () {
  //     console.log('===attached===', this.data.dataTree)
  //     this.setData({
  //         tree: this.data.dataTree
  //     })
  // },
});

@import '../../style/icon.wxss';
.c-tree {
    text-align: left;
    /* height: 45px;
    line-height: 45px; */
    .tree-item-name-select {
        background: #ECF7FA;
        color: #0079FE;
    }
    .tree-item {
        height: 30px;
        line-height: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .tree-item_text {
            display: flex;
            .tree-item-onOff {
                width: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
                .icon-image {
                    width: 9px;
                    height: 5px;
                    display: block;
                    transition: 0.4s;
                }
                .tree-item-onOff-closed {
                    transform: rotate(-90deg);
                }
                .tree-item-onOff-open {
                    transform: rotate(0deg);
                }
            }
            .tree-item-name {
                display: flex;
                .name {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                
                .img {
                    width: 50px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
        .typeItem_btn {
            display: flex;
            .btn_btn {
                padding: 0 5px;
                .iconfont {
                    font-size: 20px;
                }
            }
            .btn_btn2 {
                color: #0071bd;
            }
        }
        /* padding-left: 15px; */
        
    }
}

在页面上引用

// me.json
{
    "usingComponents": {
      "tree": "/component/c-tree/tree"
    },
    "navigationBarTitleText": "首页"
  }
  // ts
  data: {
      clickIndex: '',
      repair_type_arr: [
        {
          superType: "顶层",
          machineType: "机械故障",
          name: "机械故障",
          showModalStatus: false,
          id: 1,
          children: [
            {
              superType: "机械故障",
              machineType: "二层机械故障",
              name: "二层机械故障",
              id: 11,
            },
            {
              superType: "机械故障",
              machineType: "二层机械故障222",
              name: "二层机械故障222",
              id: 12,
            },
            {
              superType: "机械故障",
              machineType: "二层机械故障333",
              name: "二层机械故障333",
              id: 13,
            },
          ],
        },
        {
          superType: "顶层",
          machineType: "电气故障",
          name: "电气故障",
          showModalStatus: false,
          id: 2,
        },
        {
          superType: "顶层",
          machineType: "其他",
          name: "其他",
          showModalStatus: false,
          id: 3,
        },
      ]
    },
    handleSelect(e: any) {
      console.log(e.detail);
      this.setData({
        clickIndex: e.detail.item.id
      });
    },

<view class="container1">
<tree dataTree="{{repair_type_arr}}" selectKey="{{clickIndex}}" bind:select="handleSelect" isSelectLastNode="true" isOpenAll="false"></tree>
</view>