动态生成多个uni-Card、actions及card-actions-item

Question

1.动态生成多个uni-Card
2.在每个card下面生成多个actions
3.在每个actions下面生成多个card-actions-item

<template>
    <view>
        <template>     
            
            <view class="container">
                <uni-card title="presser" sub-title="7" extra="min:0,max:100" :thumbnail="avatar" @click="onClick">
                    <view slot="actions" class="card-actions">
                        <view class="card-actions-item" @click="actionsClick('S')">
                            <uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
                            <h3>SP:</h3><input class="uni-input" type="digit" placeholder="70" value="70" />
                        </view>
                        <view class="card-actions-item start-loop" @click="actionsClick('Start')">
                            <button class="mini-btn" type="warn" size="mini">Open</button>
                            <button type="default" hover-start-time="20" size="mini">Close</button>
                        </view>
                    </view>
                </uni-card>
            </view>
        </template>
 
    </view>
</template>
 

Answer 1

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

要实现动态生成多个 uni-Card，并在每个卡片下生成多个 actions 和 card-actions-item，你需要使用 Vue 的数据绑定和循环渲染功能。以下是详细的步骤和修改后的代码：

解决方案

1. 定义数据模型：创建一个包含卡片信息的数据模型。
2. 循环渲染卡片：使用 v-for 指令来循环渲染卡片。
3. 动态生成 actions 和 card-actions-item：在每个卡片中使用嵌套的 v-for 指令来生成 actions 和 card-actions-item。

修改后的代码

<template>
    <view>
        <!-- 使用 v-for 循环渲染卡片 -->
        <view v-for="(card, index) in cards" :key="index" class="container">
            <uni-card :title="card.title" :sub-title="card.subtitle" :extra="card.extra" :thumbnail="card.thumbnail" @click="onClick(card)">
                <!-- 动态生成 actions -->
                <view slot="actions" class="card-actions">
                    <view v-for="(action, actionIndex) in card.actions" :key="actionIndex" class="card-actions-item" @click="actionsClick(action.type)">
                        <!-- 根据 action 类型生成不同的内容 -->
                        <template v-if="action.type === 'S'">
                            <uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
                            <h3>SP:</h3><input class="uni-input" type="digit" placeholder="70" :value="action.value" />
                        </template>
                        <template v-else-if="action.type === 'Start'">
                            <button class="mini-btn" type="warn" size="mini">Open</button>
                            <button type="default" hover-start-time="20" size="mini">Close</button>
                        </template>
                    </view>
                </view>
            </uni-card>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // 定义卡片数据模型
            cards: [
                {
                    title: "Presser",
                    subtitle: "7",
                    extra: "min:0,max:100",
                    thumbnail: "avatar",
                    actions: [
                        {
                            type: "S",
                            value: 70
                        },
                        {
                            type: "Start"
                        }
                    ]
                },
                // 可以添加更多的卡片
                {
                    title: "Another Presser",
                    subtitle: "5",
                    extra: "min:0,max:100",
                    thumbnail: "avatar",
                    actions: [
                        {
                            type: "S",
                            value: 50
                        },
                        {
                            type: "Start"
                        }
                    ]
                }
            ]
        };
    },
    methods: {
        onClick(card) {
            console.log("Card clicked:", card);
        },
        actionsClick(type) {
            console.log("Action clicked:", type);
        }
    }
};
</script>

<style scoped>
.container {
    margin-bottom: 20px;
}
.card-actions-item {
    display: inline-block;
    margin-right: 10px;
}
</style>

说明

1. 数据模型：在 data 函数中定义了一个 cards 数组，每个卡片包含标题、副标题、额外信息、缩略图和动作数组。
2. 循环渲染卡片：使用 v-for 指令循环渲染卡片，并为每个卡片分配唯一的键值。
3. 动态生成 actions：在每个卡片中使用嵌套的 v-for 指令循环渲染 actions，并根据动作类型生成不同的内容。
4. 事件处理：为卡片和动作添加点击事件处理函数。

通过以上步骤，你可以动态生成多个 uni-Card，并在每个卡片下生成多个 actions 和 card-actions-item。