动态生成多个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，你需要通过数据绑定和循环渲染来完成。以下是详细的解决方案：

解决方案

1. 定义数据结构：

   • 创建一个数组来存储卡片的数据。
   • 每个卡片包含标题、子标题、额外信息等，并且每个卡片可以有多个 actions。

2. 模板循环渲染：

   • 使用 v-for 指令在模板中循环渲染卡片。
   • 在每个卡片内部再使用 v-for 循环渲染 actions 和 card-actions-item。

3. 事件处理：

   • 为每个按钮添加点击事件处理函数。

修改后的代码

<template>
  <view>
    <!-- 动态生成多个 uni-Card -->
    <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)"
          >
            <uni-icons 
              :type="action.iconType" 
              :size="action.iconSize" 
              :color="action.iconColor"
            />
            <h3>{{ action.label }}:</h3>
            <input 
              v-if="action.type === 'S'" 
              class="uni-input" 
              type="digit" 
              :placeholder="action.placeholder" 
              :value="action.value"
            />
            <button 
              v-if="action.type === 'Start'" 
              class="mini-btn" 
              type="warn" 
              size="mini"
            >{{ action.buttonText }}</button>
            <button 
              v-if="action.type === 'Stop'" 
              type="default" 
              hover-start-time="20" 
              size="mini"
            >{{ action.buttonText }}</button>
          </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",
              iconType: "pengyouquan",
              iconSize: 18,
              iconColor: "#999",
              label: "SP",
              placeholder: "70",
              value: "70"
            },
            {
              type: "Start",
              iconType: "play",
              iconSize: 18,
              iconColor: "#999",
              label: "Action",
              buttonText: "Open"
            }
          ]
        }
        // 可以添加更多的卡片对象
      ]
    };
  },
  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: flex;
  align-items: center;
}
</style>

关键点解释

1. 数据结构：在 data 中定义了一个 cards 数组，每个卡片包含标题、子标题、额外信息以及 actions 数组。
2. 循环渲染：使用 v-for 指令在模板中循环渲染卡片及其内部的 actions。
3. 事件处理：为每个按钮添加了点击事件处理函数，并传递相应的参数。

通过这种方式，你可以轻松地动态生成多个卡片，并在每个卡片下生成多个动作项。