|
|
|
|
<!--
|
|
|
|
|
@ 作者: 秦东
|
|
|
|
|
@ 时间: 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 },
|
|
|
|
|
{ icon: 'close', label: '关闭', key: 6 }
|
|
|
|
|
]
|
|
|
|
|
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
|
|
|
|
|
|
|
|
|
|
@click="btnClick(item.icon)"
|
|
|
|
|
v-for="item in btnList"
|
|
|
|
|
:key="item.icon"
|
|
|
|
|
:type="item.key==6?'danger':item.key==5?'success':'primary'"
|
|
|
|
|
>
|
|
|
|
|
<i :class="['icon-' + item.icon]"></i>{{ item.label }}
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<style lang='scss' scoped>
|
|
|
|
|
|
|
|
|
|
</style>
|
