yufei_wang
3 months ago
4 changed files with 139 additions and 3 deletions
@ -1,5 +1,6 @@ |
|||
import XButton from './src/XButton.vue' |
|||
import XTextButton from './src/XTextButton.vue' |
|||
import ButtonBase from './src/ButtonBase.vue' |
|||
import ButtonBaseMore from './src/ButtonBaseMore.vue' |
|||
|
|||
export { XButton, XTextButton, ButtonBase } |
|||
export { XButton, XTextButton, ButtonBase, ButtonBaseMore } |
|||
|
@ -0,0 +1,135 @@ |
|||
<template> |
|||
<div v-for="(item, index) in getButtonList" :key="index" class="btn-div"> |
|||
<el-button |
|||
v-show="!item.hide" |
|||
:type="item.type" |
|||
:color="item.color" |
|||
:link="item.link ? item.link : false" |
|||
:disabled="item.disabled" |
|||
v-hasPermi="[item.hasPermi] || []" |
|||
v-if="item.name != 'set'" |
|||
@click.stop="buttonBaseClick(item.name, item, $event)" |
|||
> |
|||
<Icon v-if="item.icon" :icon="item.icon" class="mr-1px" /> |
|||
<span :style="{width:item.width+'px'||'auto'}" :class="[item.width?'ellipsis':'']">{{ item.label }}</span> |
|||
</el-button> |
|||
</div> |
|||
<el-dropdown placement="top-start" v-if="showList().length>3"> |
|||
<el-button link class="more"> 更多 </el-button> |
|||
<template #dropdown> |
|||
<el-dropdown-menu> |
|||
<el-dropdown-item v-for="(item, index) in getMoreList" :key="index+3" class="btn-div"> |
|||
<el-button |
|||
v-show="!item.hide" |
|||
:type="item.type" |
|||
:color="item.color" |
|||
:link="item.link ? item.link : false" |
|||
:disabled="item.disabled" |
|||
v-hasPermi="[item.hasPermi] || []" |
|||
v-if="item.name != 'set'" |
|||
@click.stop="buttonBaseClick(item.name, item, $event)" |
|||
> |
|||
<Icon v-if="item.icon" :icon="item.icon" class="mr-1px" /> |
|||
<span :style="{width:item.width+'px'||'auto'}" :class="[item.width?'ellipsis':'']">{{ item.label }}</span> |
|||
</el-button> |
|||
</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</template> |
|||
</el-dropdown> |
|||
<slot></slot> |
|||
</template> |
|||
<script setup> |
|||
import { Plus } from '@element-plus/icons-vue' |
|||
import { clearButtonBlurHandle } from '@/utils/index' |
|||
import rowDrop from '@/components/rowDrop/index.vue' |
|||
import { CACHE_KEY, useCache } from '@/hooks/web/useCache' |
|||
const { wsCache } = useCache() |
|||
|
|||
const props = defineProps({ |
|||
Butttondata: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
allSchemas: { |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
detailAllSchemas: { |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
}) |
|||
const showList = ()=>{ |
|||
const all_permission = '*:*:*' |
|||
const permissions = wsCache.get(CACHE_KEY.USER).permissions |
|||
let list = JSON.parse(JSON.stringify(props.Butttondata)) |
|||
let showList = list.filter(item=>{ |
|||
|
|||
if(item.hide){ |
|||
return false |
|||
} |
|||
const permissionFlag = [item.hasPermi] |
|||
return permissions.some((permission) => { |
|||
return all_permission === permission || permissionFlag.includes(permission) |
|||
}) |
|||
}) |
|||
|
|||
return showList |
|||
} |
|||
const getMoreList = computed(()=>{ |
|||
let list = showList() |
|||
return list.slice(3) |
|||
}) |
|||
const getButtonList = computed(()=>{ |
|||
let list = showList() |
|||
if(list.length>3){ |
|||
console.log('list===',list) |
|||
return list.slice(0, 3) |
|||
} |
|||
return list |
|||
}) |
|||
|
|||
// 传递给父类 |
|||
const emit = defineEmits(['buttonBaseClick', 'updataTableColumns']) |
|||
|
|||
let timer = ref(null) |
|||
const buttonBaseClick = (val, item, $event) => { |
|||
clearButtonBlurHandle($event) //解决el-button点击后颜色不恢复问题 |
|||
emit('buttonBaseClick', val, item, $event) |
|||
} |
|||
|
|||
onUnmounted(() => { |
|||
if(timer.value){ |
|||
console.log('清空timer',timer.value) |
|||
clearTimeout(timer.value) |
|||
timer.value = null |
|||
} |
|||
}) |
|||
const popoverVisible = ref(false) |
|||
// 关闭页面 |
|||
const closeRowDrop = () => { |
|||
popoverVisible.value = false |
|||
} |
|||
defineExpose({ |
|||
popoverVisible |
|||
}) |
|||
// 更新主列表字段 |
|||
const updataTableColumns = (val) => { |
|||
emit('updataTableColumns', val) |
|||
} |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.btn-div{ |
|||
display: inline; |
|||
|
|||
::v-deep(.el-button){ |
|||
margin: 0px 5px; |
|||
} |
|||
::v-deep(.el-button.is-link){ |
|||
margin: 0px; |
|||
} |
|||
} |
|||
|
|||
</style> |
Loading…
Reference in new issue