arco-disign vue + vue3 封装一个“下拉多组单选组件”

手搓一个下拉框多组单选组件,
实现采用框架 arco-disign vue + vue3
组件采用:a-popover、a-input-tag、a-radio-group、a-radio
实现效果:
arco-disign vue + vue3 封装一个“下拉多组单选组件”_第1张图片

调用组件

<SelectGroupRadio
 v-model="searchModel.indicatorScreening"
  :options="dict.indicatorScreening"
></SelectGroupRadio>
const searchModel = ref({
   
    indicatorScreening: ['01', '04', '05'],
  });
  const dict = reactive({
   
    indicatorScreening: [
      // 动态sql 拼接
      [
        {
    value: '01', label: '超标' },
        {
    value: '02', label: '非超标' },
      ],
      [
        {
   
          value: '03',
          label: '已维护',
        },
        {
   
          value: '04',
          label: '未维护',
        },
      ],
      [
        {
   
          value: '05',
          label: '持续',
        },
        {
   
          value: '06',
          label: '非持续',
        },
      ],
    ],

<template>
  <a-popover position="bl" trigger="click" :arrow-style="{ display: 'none' }">
    <a-input-tag
      v-model="inputTag"
      allow-clear
      :max-tag-count="2"
      @remove="remove"
      @clear="clear"
      @input-value-change="null"
      @press-enter="null"
    />
    <template #content>
      <div v-for="(group, index) in props.options" :key="index"

你可能感兴趣的:(1024程序员节)