vue3+element-plus 实现的tagSelect 组件

1、组件代码

// props
// selects [{label:展示内容，value:值，color:颜色}]
// selectV 选中项value
// tagclick 参数 点击项value 返回值 true 改变状态； false 不改变状态

import { CaretBottom } from "@element-plus/icons-vue";
import { reactive, watchEffect } from "vue"

export default function TagSelect (props: {
  tagclick(value: string): any; selects: any[]; selectV: any;disabled:false; 
}) {
  const state = reactive({
    select:{
      label:'请选择',
      value:'',
      color:'#7b7b7b',
    }
  })
  const selectItem = props.selects.find((i: { value: any }) => i.value == props.selectV)
  console.log(props.selects,props.selectV,selectItem)
  if (selectItem) state.select = selectItem
  
  const  hexToRgb = (hex: string, op: number) => {
  
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
    const obj = result ? {
      r: parseInt(result[1], 16),
      g: parseInt(result[2], 16),
      b: parseInt(result[3], 16)
    } : null
    return `rgba(${obj?.r},${obj?.g},${obj?.b},${op})`

  }
  const style = (color: string) => {
     let setColor = props.disabled?'#b4b3b3':color
    return {
      width:'80px',
      height:'28px',
      display:'flex',
      alignItems:'center',
      justifyContent:'space-between',
      color:setColor,
      border:`1px solid ${hexToRgb(setColor, 0.2)}`,
      borderRadius:'2px',
      backgroundColor:hexToRgb(setColor,0.1),
      padding:'0 4px',
      cursor:'pointer',
      boxSizing:'border-box',
      fontSize:'12px'
    }
  }
  const hTagClick= async (i: { label: string; value: string; color: string; }) => {
    
    // console.log(props.tagclick(i.value))
    const flag = await props.tagclick(i.value)
    if (flag) {
      state.select = i
    }
  }
  return (
    <div class={'tag_select'}>
      <el-dropdown trigger="click" disabled={props.disabled}>
        {{
          default(){
            return (
              // @ts-ignore
              <div class={'tag_select_wrapper'} style={style(state.select.color)}>
                {state.select.label}
                <el-icon color="#787878"><CaretBottom /></el-icon>
              </div>
            )
          },
          dropdown(){
            return (
              <el-dropdown-menu class={'dropdown_mhscroll'}>
                {props.selects.map(i=>(
                  <el-dropdown-item  style={{padding:'0px'}}>
                    <div style={{width:'96px',height:'28px',padding:'0 4px',lineHeight:'28px',boxSizing:'border-box'}} onClick={()=> hTagClick(i)} >{i.label}</div>
                  </el-dropdown-item>
                ))}
              </el-dropdown-menu>
            )
          }
        }}

      </el-dropdown>
    </div>
  )
}

2、使用

<TagSelect  disabled={props.mailInfo.status==2} selects={[{label:'待解析',value:0,color:'#E09A30'},{label:'已解析',value:2,color:'#38B37E'},{label:'解析失败',value:1,color:'#EC4847'}]} selectV={props.file.status} tagclick={(v) => hTagClick(v)}/>

3、效果

在这里插入图片描述