【金秋打卡】第11天 全新升级，基于Vue3新标准，打造后台综合解决方案 第十一讲

课程名称： 全新升级，基于Vue3新标准，打造后台综合解决方案

课程章节： 项目发布解决方案之构建与发布

主讲老师： Sunday

课程内容：

今天学习的内容包括：

如何进行项目发布

课程收获：

11.1 心得：

"use strict";
Component({
    properties: {
        list: {
            type: Array,
            value: [],
            observer: "onListChange"
        },        
    },


    data: {
    },


    methods: {

        onListChange: function onListChange() {
            this.setData({
                list: this.data.list,
            });

        },

        /**
         * 点击Item
         * @param {*} e 
         */
        onClickItem: function onClickItem(e) {
            let data = e.currentTarget.dataset.item;
            this.triggerEvent('onClickItem', data);
        },


        /**
         * 点击清除历史
         * @param {*} e 
         */
        onClickClear: function onClickClear(e) {
            this.triggerEvent('onClickClearHistory', {});
        },
        

    }
});

.container,.history_item_container,.clear_history_container {
  display: flex;
  background-color: #fff;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  flex-direction: column;
}

.history_item_container{
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  margin: 0 32rpx;
  border-bottom: 1rpx solid #F6F6F6;
}

.clear_history_container{
  justify-content: center;
  align-items: center;
  padding: 30rpx 0;
}

.right_arrow{
  width: 15rpx;
  height: 25rpx;
  flex-shrink: 0;
  margin-left: 10rpx;
  margin-right: 10rpx;
}

.history_item_content,.cleart_text{
  line-height: 34rpx;
  font-size: 24rpx;
  flex-shrink: 0;
  text-align: center;
  color: #333333;
}

.clear{
  width: 25rpx;
  height: 24rpx;
  flex-shrink: 0;
  margin-left: 10rpx;
  margin-right: 10rpx;
}

<view class="container">
  <block wx:if="{{list !== null && list.length !== 0}}">
    <block wx:for="{{list}}" wx:for-item="item" wx:key="{{index}}">
      <view class="history_item_container" data-item="{{item}}" bindtap="onClickItem">
        <view class="history_item_content">{{item}}</view>
        <image class="right_arrow" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{'/images/ic_right_gray_arrow.png'}}" />
      </view>
    </block>
    <view class="clear_history_container" bindtap="onClickClear">
      <image class="clear" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{'/images/ic_search_delete.png'}}" />
      <view class="cleart_text">清空搜索记录</view>
    </view>
  </block>

</view>

{
    "component": true,
    "componentGenerics": {
        "list-item": true
    }
}