You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
1.5 KiB
69 lines
1.5 KiB
2 years ago
|
<!--
|
||
|
|
@ 作者: 秦东
|
||
|
|
@ 时间: 2023-07-12 14:41:18
|
||
|
|
@ 备注: 主体画板顶部
|
||
|
|
-->
|
||
|
|
<script lang='ts' setup>
|
||
|
|
import { computed } from 'vue'
|
||
|
|
|
||
|
|
const props = withDefaults(
|
||
|
|
defineProps<{
|
||
|
|
showKey?: string[] // showKey,hideKey设置其中一个即可，showKey优先
|
||
|
|
hideKey?: string[] // 设置了showKey时，hideKey无效
|
||
|
|
}>(),
|
||
|
|
{
|
||
|
|
showKey: () => {
|
||
|
|
return []
|
||
|
|
},
|
||
|
|
hideKey: () => {
|
||
|
|
return []
|
||
|
|
}
|
||
|
|
}
|
||
|
|
)
|
||
|
|
|
||
|
|
const emits = defineEmits<{(e: 'click', value: string): void}>();
|
||
|
|
|
||
|
|
const btnClick = (type: string) => {
|
||
|
|
emits('click', type)
|
||
|
|
}
|
||
|
|
const btnList = computed(() => {
|
||
|
|
const list = [
|
||
|
|
{ icon: 'del', label: '清空', key: 1 },
|
||
|
|
{ icon: 'eye', label: '预览', key: 2 },
|
||
|
|
{ icon: 'json', label: '生成脚本预览', key: 3 },
|
||
|
|
{ icon: 'vue', label: '导出vue文件', key: 4 },
|
||
|
|
{ icon: 'save', label: '保存', key: 5 }
|
||
|
|
]
|
||
|
|
if (props.showKey?.length) {
|
||
|
|
// 按照指定的key显示
|
||
|
|
return list.filter((item: any) => {
|
||
|
|
return props.showKey.includes(item.key)
|
||
|
|
})
|
||
|
|
} else if (props.hideKey?.length) {
|
||
|
|
// 按照指定的key隐藏
|
||
|
|
return list.filter((item: any) => {
|
||
|
|
return !props.hideKey.includes(item.key)
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
return list // 否则显示全部
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<div class="main-tools">
|
||
|
|
<slot></slot>
|
||
|
|
<el-button
|
||
|
|
link
|
||
|
|
type="primary"
|
||
|
|
@click="btnClick(item.icon)"
|
||
|
|
v-for="item in btnList"
|
||
|
|
:key="item.icon"
|
||
|
|
>
|
||
|
|
<i :class="['icon-' + item.icon]"></i>{{ item.label }}
|
||
|
|
</el-button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<style lang='scss' scoped>
|
||
|
|
|
||
|
|
</style>
|