关于组件传值

最新推荐文章于 2024-10-31 16:52:57 发布

努力努力再努力U

最新推荐文章于 2024-10-31 16:52:57 发布

阅读量112

点赞数

分类专栏： vue3 vue 文章标签： elementui vue.js

本文链接：https://blog.csdn.net/qq_42980244/article/details/125219965

版权

vue 同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

这段代码展示了如何在微信小程序中处理商品卡片数据，包括图片懒加载、商品名称、价格和数量的显示。通过getters函数获取值，并根据useMap和valueMap进行映射。商品卡片包含爆炸文本、店铺图片、名称、代码、价格和数量等关键信息。

摘要由CSDN通过智能技术生成

 result = result.map((item) => {
                            return {
                                values: {
                                    shopImg: item.returnRequestEntryDTOList[0].picUrl,
                                },
                                ...item,
                            };
                        });

 <wxs src="./index.wxs" module="computed" />
<view class="card-main content-class" wx:if="{{useMain}}">
        <view class="card-left">
            <view class="card-img-box">
                <image
                    catch:tap="handleClickImg"
                    lazy-load="{{true}}"
                    class="card-img"
                    src="{{computed.getters('shopImg',values,valueMap,useMap)}}"
                    data-url="{{computed.getters('shopImg',values,valueMap,useMap)}}"
                    data-imgs="{{computed.getters('imgs',values,valueMap,useMap)}}"
                    mode="widthFix"
                />
                <view class="content-class-explosion" wx:if="{{explosionText}}">{{explosionText}}</view>
            </view>
            <view class="card-name-box">
                <slot name="info" wx:if="{{useInfoSlotMain}}"></slot>
                <view class="card-name" wx:else>{{computed.getters("shopName",values,valueMap,useMap)}}</view>
                <slot name="code" wx:if="{{useCodeSlotMain}}"></slot>
                <block wx:else>
                    <view class="card-number">{{mainTitle}}{{computed.getters("shopCode",values,valueMap,useMap)}}</view>
                    <view class="card-number">{{purchaseAgent}}{{computed.getters("purchaser",values,valueMap,useMap)}}</view>
                    <view class="card-number">{{purchaseAccount}}{{computed.getters("purchaseNumber",values,valueMap,useMap)}}</view>
                </block>
            </view>
        </view>
        <view class="card-right content-price-class">
            <view class="card-price">{{computed.getters("shopPrice",values,valueMap,useMap)}}</view>
            <view class="card-num">{{computed.getters("shopNum",values,valueMap,useMap)}}</view>
        </view>
    </view>



function getters(key, values, map, flag) {
    return !flag ? values[key] : values[map[key]];
}
module.exports = {
    getters: getters,
};


base-card-shop的js

 useMap: {
            type: Boolean,
            value: true,
        },
 valueMap: {
            type: Object,
            value: {
                titleVal: "code",
                time: "time",
                footTitle: "total",
                footVal: "value",
                stateInfo: "name",
                stateVal: "state",
                shopName: "shopName",
                shopCode: "shopCode",
                shopImg: "shopImg",
                shopPrice: "shopPrice",
                shopNum: "shopNum",
                imgs: [],
                purchaser: "purchaser",
                purchaseNumber: "purchaseNumber",
            },
        },