陈薪名
2 months ago
4 changed files with 139 additions and 3 deletions
@ -1,5 +1,6 @@ |
|||||
import XButton from './src/XButton.vue' |
import XButton from './src/XButton.vue' |
||||
import XTextButton from './src/XTextButton.vue' |
import XTextButton from './src/XTextButton.vue' |
||||
import ButtonBase from './src/ButtonBase.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