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

<template>
	<view class="deliverFoot border border-solid border-gray-300 rounded-md mt-3 p-2">
		<view class="top flex justify-between">
		    <view class="mr-3 text-sm">
		       审核人
		     </view>
         <!-- 展示选择的审核人 -->
		    <view class="flex approver item-center truncate justify-end flex-1 text-sm" v-show="isUicon">
		       <view v-for="item in computedDelivers">
		          <view v-show="item.checked" class="mx-1">
		             {{item.name}}
		           </view>
		       </view>
		    </view>
          <!-- 点击更换图标 -->
        <view>
		       <u-icon v-if="isUicon" name="arrow-down" @click="isUicon = !isUicon"></u-icon>
		       <u-icon v-else="isUicon" name="arrow-up" @click="changeIcon"></u-icon>
		    </view>
		  </view>
      <!-- 隐藏的审核人选项 -->
		 <view  v-show="!isUicon" class="foot mt-2 flex flex-wrap">
		    <u-button
		        v-for="item in delivers"
		        size="mini" class="my-1 mx-2"
		        @click="item.checked = !item.checked"
		        :class="item.checked ? 'active' : '' "
		        >
		      {{item.name}}
		    </u-button>
		 </view>
		</view>
</template>

<script setup>

  import {ref , reactive , computed }from 'vue'
  // 图标切换
  let isUicon = ref('true')
  let arrList = ref([{
      checked:true,
      name:'冯教授'
    }])
  // 审核人员列表
  const delivers = reactive([
    {
      checked:true,
      name:'冯教授'
    },
    {
      checked:false,
      name:'陈历珺'
    },
    {
      checked:false,
      name:'张野'
    },
    {
      checked:false,
      name:'宋瑞芳'
    },
    {
      checked:false,
      name:'张斌'
    },
    {
      checked:false,
      name:'孙方圆'
    }
  ])

  // 显示已选择的审核人
  const computedDelivers = computed(()=>{
       let arr = [];
        delivers.forEach((item)=>{
          if(item.checked){
            arr.push(item)
          }
          if(arr.length>3){
            arr = arr.splice(0,3)
            arr[3] = {checked:true,name:'...'}
          }
        })
          return arr
    })


  // 点击切换箭头图标
  function changeIcon(){
    isUicon.value = !isUicon.value
     let arr = [];
    delivers.forEach((item)=>{
      if(item.checked){
        arr.push(item)
      }
    })
    arrList.value = arr
    // console.log(arrList.value)
  }
  
  defineExpose({
    arrList
  })

</script>

<style lang="scss">

</style>