5 changed files with 231 additions and 68 deletions
@ -1,38 +1,84 @@ |
|||||
<template> |
<template> |
||||
<el-button |
<div v-for="(item, index) in Butttondata" :key="index"> |
||||
v-for="(item, index) in Butttondata" :key="index" |
<el-button |
||||
v-show="!item.hide" |
v-show="!item.hide" |
||||
:type="item.type" |
:type="item.type" |
||||
:color="item.color" |
:color="item.color" |
||||
:link = "item.link ? item.link : false" |
:link="item.link ? item.link : false" |
||||
v-hasPermi="[item.hasPermi] || []" |
v-hasPermi="[item.hasPermi] || []" |
||||
@click="buttonBaseClick(item.name,item,$event)" |
v-if="item.name != 'set'" |
||||
> |
@click="buttonBaseClick(item.name, item, $event)" |
||||
<Icon v-if="item.icon" :icon="item.icon" class="mr-1px" /> |
> |
||||
{{ item.label }} |
<Icon v-if="item.icon" :icon="item.icon" class="mr-1px" /> |
||||
</el-button> |
{{ item.label }} |
||||
|
</el-button> |
||||
|
<!-- 设置按钮 --> |
||||
|
<el-popover |
||||
|
:visible="popoverVisible" |
||||
|
placement="bottom" |
||||
|
:width="300" |
||||
|
trigger="click" |
||||
|
v-if="item.name == 'set'&&!item.hide" |
||||
|
> |
||||
|
<rowDrop |
||||
|
ref="rowDropRef" |
||||
|
@updata-table-columns="updataTableColumns" |
||||
|
:allSchemas="allSchemas" |
||||
|
@closeRowDrop="closeRowDrop" |
||||
|
@updataTableColumns="updataTableColumns" |
||||
|
/> |
||||
|
<template #reference> |
||||
|
<el-button |
||||
|
v-show="!item.hide" |
||||
|
:type="item.type" |
||||
|
:color="item.color" |
||||
|
:link="item.link ? item.link : false" |
||||
|
v-hasPermi="[item.hasPermi] || []" |
||||
|
@click="buttonBaseClick(item.name, item, $event)" |
||||
|
> |
||||
|
<Icon v-if="item.icon" :icon="item.icon" class="mr-1px" /> |
||||
|
{{ item.label }} |
||||
|
</el-button> |
||||
|
</template> |
||||
|
</el-popover> |
||||
|
</div> |
||||
<slot></slot> |
<slot></slot> |
||||
</template> |
</template> |
||||
<script setup> |
<script setup> |
||||
import { Plus } from '@element-plus/icons-vue' |
import { Plus } from '@element-plus/icons-vue' |
||||
import { clearButtonBlurHandle } from '@/utils/index' |
import { clearButtonBlurHandle } from '@/utils/index' |
||||
const props = defineProps({ |
import rowDrop from '@/components/rowDrop/index.vue' |
||||
Butttondata: { |
const props = defineProps({ |
||||
type: Array, |
Butttondata: { |
||||
default: () => { |
type: Array, |
||||
return [] |
default: () => { |
||||
} |
return [] |
||||
}, |
} |
||||
}) |
}, |
||||
|
allSchemas: { |
||||
// 传递给父类 |
type: Object, |
||||
const emit = defineEmits([ |
default: null |
||||
'buttonBaseClick', |
|
||||
]) |
|
||||
|
|
||||
const buttonBaseClick = (val, item, $event) => { |
|
||||
clearButtonBlurHandle($event)//解决el-button点击后颜色不恢复问题 |
|
||||
emit('buttonBaseClick', val, item, $event) |
|
||||
} |
} |
||||
|
}) |
||||
|
|
||||
|
console.log('buttonsRight', props.Butttondata) |
||||
|
// 传递给父类 |
||||
|
const emit = defineEmits(['buttonBaseClick', 'updataTableColumns']) |
||||
|
|
||||
|
const buttonBaseClick = (val, item, $event) => { |
||||
|
clearButtonBlurHandle($event) //解决el-button点击后颜色不恢复问题 |
||||
|
emit('buttonBaseClick', val, item, $event) |
||||
|
} |
||||
|
const popoverVisible = ref(false) |
||||
|
// 关闭页面 |
||||
|
const closeRowDrop = () => { |
||||
|
popoverVisible.value = false |
||||
|
} |
||||
|
defineExpose({ |
||||
|
popoverVisible |
||||
|
}) |
||||
|
// 更新主列表字段 |
||||
|
const updataTableColumns = (val) => { |
||||
|
emit('updataTableColumns', val) |
||||
|
} |
||||
</script> |
</script> |
||||
Loading…
Reference in new issue