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、效果
在这里插入图片描述