TALL-MUI-4/components/Reviewer/Reviewer.vue

<template>
  <view class="border border-solid border-gray-300 rounded-md mt-3 p-2" @click="collapsed = !collapsed">
    <view class="top flex justify-between">
      <view class="mr-3 text-sm">审核人</view>

      <!-- 展示选择的审核人 -->
      <view class="flex item-center truncate justify-end flex-1 text-sm">
        <view v-for="item in showCheckers" class="mx-1">
            <!-- <u-badge :is-dot="true" is-center></u-badge> -->
            {{ item.name }}
        </view>
        <view class="mx-1" v-show="checkedCheckers.length > 3">...</view>
      </view>

      <!-- 点击更换图标 -->
      <u-icon :name="collapsed ? 'arrow-down' : 'arrow-up'"></u-icon>
    </view>

    <!-- 隐藏的审核人选项 -->
    <view v-show="!collapsed" class="foot mt-2 flex flex-wrap">
      <u-button v-for="item in checkers" :type="item.checked ? 'primary' : 'default'" size="mini" class="my-1 mx-2" @click="item.checked = !item.checked">{{ item.name }}</u-button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { useStore } from 'vuex';

const store = useStore();
// 图标切换
const collapsed = ref(true);

// 审核人员列表 从store获取真实的项目成员列表
// 项目加载之初 就已经获取了
const checkers = computed(() => store.state.role.members);

// 所有选中的审核人
const checkedCheckers = computed(() => checkers.value.filter(item => item.checked));
// 折叠状态 显示的选中的检查人
const showCheckers = computed(() => {
  return checkedCheckers.value.length > 3 ? checkedCheckers.value.slice(0, 3) : checkedCheckers.value;
})
</script>