在container的view下,生成多个uni-card，其中slot不固定

Question

1.在container的view下,生成多个uni-card
2.uni-card中的slot不固定个数，且其text值来源于动态数据

    <view class="container">            
                <uni-card title="High"  extra="14" :thumbnail="avatar" @click="onClick">
                    <view slot="actions" class="card-actions">
                        <view class="card-actions-item" @click="actionsClick('S')">
                            <uni-icons type="arrow-down" size="18" color="#999"></uni-icons>
                            <text>Stirrer</text>
                        </view>
                        <view class="card-actions-item" @click="actionsClick('Start')">                            
                            <text>89(0Dollar)</text>
                        </view>                            
                    </view>
                    <view slot="actions" class="card-actions">
                        <view class="card-actions-item" @click="actionsClick('S')">
                            <uni-icons type="arrow-down" size="18" color="#999"></uni-icons>
                            <text>Pump</text>
                        </view>
                        <view class="card-actions-item" @click="actionsClick('Start')">                            
                            <text>89(0R/M)</text>
                        </view>                            
                    </view>
                    <view slot="actions" class="card-actions">
                        <view class="card-actions-item" @click="actionsClick('S')">
                            <uni-icons type="arrow-up" size="18" color="#999"></uni-icons>
                            <text>Value</text>
                        </view>
                        <view class="card-actions-item" @click="actionsClick('Start')">                            
                            <text>89(0R/M)</text>
                        </view>                            
                    </view>
                </uni-card>    
            </view>

Answer 1

晚上好🌙🌙🌙
本答案参考通义千问

要实现在一个<view>容器下生成多个<uni-card>组件，并且每个<uni-card>的slot内容不固定，可以从动态数据源中获取数据来生成这些卡片。以下是具体的解决方案：

解决方案

1. 准备动态数据：首先，你需要有一个包含卡片数据的数据源。这个数据源可以是数组，每个元素代表一个卡片需要显示的内容。

2. 使用v-for指令：利用Vue.js的v-for指令遍历数据源，并为每个数据项创建一个<uni-card>组件。

3. 动态添加slot内容：你可以通过在循环中动态地插入不同的slot内容来实现slot内容的不固定性。

示例代码

假设你的数据源如下：

data() {
    return {
        cardsData: [
            { title: 'High', extra: '14', actions: ['Stirrer', 'Pump', 'Value'] },
            { title: 'Medium', extra: '12', actions: ['Mix', 'Blend'] }
        ]
    };
}

然后，你可以这样编写模板：

<template>
    <view class="container">
        <uni-card 
            v-for="(card, index) in cardsData" 
            :key="index" 
            :title="card.title" 
            :extra="card.extra" 
            :thumbnail="avatar"
            @click="onClick">
            <view slot="actions" class="card-actions">
                <view 
                    v-for="(action, actionIndex) in card.actions" 
                    :key="actionIndex" 
                    class="card-actions-item" 
                    @click="actionsClick(action)">
                    <uni-icons 
                        :type="getIconType(action)" 
                        size="18" 
                        color="#999"></uni-icons>
                    <text>{{ getActionText(action) }}</text>
                </view>
            </view>
        </uni-card>
    </view>
</template>

<script>
export default {
    data() {
        return {
            avatar: 'path/to/avatar',
            cardsData: [
                { title: 'High', extra: '14', actions: ['Stirrer', 'Pump', 'Value'] },
                { title: 'Medium', extra: '12', actions: ['Mix', 'Blend'] }
            ]
        };
    },
    methods: {
        onClick() {
            console.log('Card clicked');
        },
        actionsClick(action) {
            console.log(`Action ${action} clicked`);
        },
        getIconType(action) {
            if (action === 'Stirrer' || action === 'Pump') {
                return 'arrow-down';
            } else if (action === 'Value') {
                return 'arrow-up';
            } else {
                return 'info'; // 默认图标类型
            }
        },
        getActionText(action) {
            if (action === 'Stirrer' || action === 'Pump') {
                return '89(0R/M)';
            } else if (action === 'Value') {
                return '89(0R/M)';
            } else {
                return `${action}`; // 返回默认文本
            }
        }
    }
};
</script>

说明

• 动态数据：cardsData数组包含了卡片的数据。
• v-for指令：在<uni-card>上使用v-for遍历cardsData数组，为每个卡片生成一个实例。
• 动态插槽内容：通过在<uni-card>内使用v-for指令，为每个动作（action）生成相应的slot内容。
• 方法：定义了几个方法来决定图标类型和动作文本的具体内容。

这样，你就可以根据实际数据动态生成具有不同slot内容的<uni-card>了。