互动网站的核心技术,wordpress不用插件,网站做预览文档,专做脚本的网站效果图
鼠标悬浮有对应的文字提示#xff0c;且图标出现背景色和颜色 实现 目前提供五个固定样式的图标及三个用户自定义的图标#xff0c;可根据需要补充 组件代码
script setup langts
import { onMounted, PropType, reactive, ref, watch } from v…效果图
鼠标悬浮有对应的文字提示且图标出现背景色和颜色 实现 目前提供五个固定样式的图标及三个用户自定义的图标可根据需要补充 组件代码
script setup langts
import { onMounted, PropType, reactive, ref, watch } from vue
import Tooltip from /components/Tooltip/src/Tooltip.vue
import { useI18n } from vue-i18nconst { t } useI18n()enum BtnType {edit edit,detail detail,delete delete,permission permission,password password,custom1 custom1,custom2 custom2,custom3 custom3
}interface BtnAction {type: BtnTypeicon?: string | undefinedcolor?: string | undefinedshow?: boolean | truetooltip?: string | undefineddisabled?: booleanhref?: string | undefined
}const props defineProps({actions: {default: () [],type: Array as PropTypeBtnAction[]}
})
const _actions ref(props.actions)
// 监听数据变化
watch(() props.actions,(newVal) {_actions.value newVal},{ deep: true, immediate: true }
)const getNormalIcon (action: BtnAction, i: number) {switch (action.type) {case BtnType.edit:_actions.value[i].tooltip t(common.edit)return svg-icon:v2-List-write_linecase BtnType.detail:_actions.value[i].tooltip t(queueCalls.details)return svg-icon:v2-List-Contact_linecase BtnType.delete:if (!_actions.value[i].tooltip) {_actions.value[i].tooltip t(common.delete)}return svg-icon:v2-List-delete_linecase BtnType.permission:if (!_actions.value[i].tooltip) {_actions.value[i].tooltip t(manage.user.viewPermissions)}return svg-icon:v2-List-Authority_linecase BtnType.password:if (!_actions.value[i].tooltip) {_actions.value[i].tooltip t(login.reset.ok)}return svg-icon:v2-List-ResetPassword_linedefault:return action.icon}
}const getActiveIcon (action: BtnAction) {switch (action.type) {case BtnType.edit:return svg-icon:v2-List-write_facecase BtnType.detail:return svg-icon:v2-List-Contact_facecase BtnType.delete:return svg-icon:v2-List-delete_facecase BtnType.permission:return svg-icon:v2-List-Authority_facecase BtnType.password:return svg-icon:v2-List-ResetPassword_facedefault:return action.icon}
}// 根据类型获取点击事件
const getClick (type: BtnType) {switch (type) {case BtnType.edit:return click:editcase BtnType.detail:return click:detailcase BtnType.delete:return click:deletecase BtnType.permission:return click:permissioncase BtnType.password:return click:passwordcase BtnType.custom1:return click:custom1case BtnType.custom2:return click:custom2case BtnType.custom3:return click:custom3default:return }
}const isCustom (type: BtnType) {return type.indexOf(custom) ! -1
}// const disableTooltip (action: BtnAction) {
// return action.tooltip undefined || action.tooltip
// }onMounted(() {// 如果show为false移除该按钮// _actions.value props.actions.filter((action) action.show)// console.log(, _actions)
})const emit defineEmits([click:edit,click:detail,click:delete,click:permission,click:password,click:custom1,click:custom2,click:custom3
])
/scripttemplatediv classactions flex items-center tooltip-appenddiv v-for(action, i) in _actions as BtnAction[] :keyaction.typeTooltip :titleaction.tooltip :disabled!action.tooltipv-btn:disabledaction.disabled undefined ? false : action.disabledv-ifaction.show undefined ? true : action.show:hrefaction.hreftarget_blankv-bindpropsroundedxlclassdefault-btn mr-16px:class{delete-btn: action.type delete,custom-btn: isCustom(action.type)}clickemit(getClick(action.type))size32varianttextcolor#c6c8cdiconIcon size21 classactive-icon :icongetActiveIcon(action) /Icon size21 classnormal-icon :icongetNormalIcon(action, i) //v-btn/Tooltip/div/div
/templatestyle scoped langscss
.actions {.default-btn:hover {color: var(--el-color-primary) !important;cursor: pointer !important;}.delete-btn:hover {color: #db4b4b !important;}.custom-btn:hover {color: var(--el-color-primary) !important;}
}
.tooltip-append {.active-icon {display: none;}.normal-icon {display: block;}
}
.tooltip-append:hover {.active-icon {display: block;}.normal-icon {display: none;}
}
/style使用方法 图标数据传一个BtnAction数据格式的数组使用默认提供的图标只要一个type字段就可以 click事件根据对应图标类型写click:[type] const actions [{ type: edit },{type: custom1,tooltip: t(common.copy),icon: ph:copy},{type: custom2,tooltip: t(common.export),icon: svg-icon:v2-arrow_download},{ type: delete }
] as any[]ActionBtn:actionsactionsclick:editeditFlowTest(row)click:custom1copyFlow(row)click:custom2exportFlow(row)click:deletedeleteFlow(row)
/
