parent
7a03f1fd4e
commit
7160ed97ac
@ -0,0 +1,61 @@
|
|||||||
|
<template>
|
||||||
|
<component :is="render" />
|
||||||
|
</template>
|
||||||
|
<script setup lang="jsx">
|
||||||
|
import { ElCheckboxGroup } from 'element-plus/es/components/checkbox/index';
|
||||||
|
import 'element-plus/es/components/checkbox/style/css';
|
||||||
|
const props = defineProps({
|
||||||
|
opts: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
config: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {
|
||||||
|
label: 'label',
|
||||||
|
value: 'value',
|
||||||
|
disabled: 'disabled',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const slots = useSlots();
|
||||||
|
const attrs = useAttrs();
|
||||||
|
let config = {
|
||||||
|
label: 'label',
|
||||||
|
value: 'value',
|
||||||
|
disabled: 'disabled',
|
||||||
|
...props.config,
|
||||||
|
};
|
||||||
|
function handleItemDisabled(item, index) {
|
||||||
|
let res = false;
|
||||||
|
if (config.disabled instanceof Function) {
|
||||||
|
res = config.disabled(item, index);
|
||||||
|
} else {
|
||||||
|
res = !!item[config.disabled];
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
}
|
||||||
|
const render = () => (
|
||||||
|
<ElCheckboxGroup
|
||||||
|
{...props}
|
||||||
|
{...attrs}
|
||||||
|
v-slots={{
|
||||||
|
default: () =>
|
||||||
|
props.opts.map((item, index) => (
|
||||||
|
<ElCheckbox label={item[config.value]} disabled={handleItemDisabled(item, index)}>
|
||||||
|
{item[config.label]}
|
||||||
|
</ElCheckbox>
|
||||||
|
)),
|
||||||
|
...slots,
|
||||||
|
}}
|
||||||
|
></ElCheckboxGroup>
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
@ -0,0 +1,85 @@
|
|||||||
|
<template>
|
||||||
|
<component :is="render" />
|
||||||
|
</template>
|
||||||
|
<script setup lang="jsx">
|
||||||
|
import { ElDialog } from 'element-plus/es/components/dialog/index';
|
||||||
|
import 'element-plus/es/components/dialog/style/css';
|
||||||
|
const props = defineProps({
|
||||||
|
destroyOnClose: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
draggable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
closeOnClickModal: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
closeOnPressEscape: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const emit = defineEmits(['update:fullscreen']);
|
||||||
|
const slots = useSlots();
|
||||||
|
const attrs = useAttrs();
|
||||||
|
const fullscreen = ref(attrs.fullscreen || false);
|
||||||
|
const handleFullScreen = () => {
|
||||||
|
fullscreen.value = !unref(fullscreen);
|
||||||
|
emit('update:fullscreen', unref(fullscreen));
|
||||||
|
};
|
||||||
|
const dialogSlots = {
|
||||||
|
...slots,
|
||||||
|
title() {
|
||||||
|
return (
|
||||||
|
<div class="el-dialog__header-wrapper">
|
||||||
|
{slots.title?.() || <span class="el-dialog__title">{attrs.title || '弹窗'}</span>}
|
||||||
|
<ElButton
|
||||||
|
aria-label="fullscreen"
|
||||||
|
class="el-dialog__headerbtn fullscreen-btn"
|
||||||
|
type="text"
|
||||||
|
onClick={() => handleFullScreen()}
|
||||||
|
>
|
||||||
|
<ElIcon class="el-dialog__fullscreen" name={unref(fullscreen) ? 'Minus' : 'FullScreen'} />
|
||||||
|
</ElButton>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
const render = () => <ElDialog {...props} {...attrs} fullscreen={unref(fullscreen)} v-slots={dialogSlots} />;
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
.el-dialog {
|
||||||
|
&.is-fullscreen {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.el-dialog__body {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-dialog__header {
|
||||||
|
padding: @layout-space-large;
|
||||||
|
.el-dialog__header-wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.fullscreen-btn {
|
||||||
|
position: static;
|
||||||
|
height: auto;
|
||||||
|
color: var(--el-button-text-color, var(--el-text-color-regular));
|
||||||
|
:hover {
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-dialog__body {
|
||||||
|
padding: @layout-space-large;
|
||||||
|
}
|
||||||
|
.el-dialog__headerbtn {
|
||||||
|
top: calc(@layout-space-large + 5px);
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,63 @@
|
|||||||
|
<template>
|
||||||
|
<component :is="render" />
|
||||||
|
</template>
|
||||||
|
<script setup lang="jsx">
|
||||||
|
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus/es/components/dropdown/index';
|
||||||
|
import 'element-plus/es/components/dropdown/style/css';
|
||||||
|
const props = defineProps({
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'text',
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
default: 'ArrowDown',
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: String,
|
||||||
|
default: 'middle',
|
||||||
|
},
|
||||||
|
splitButton: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
opts: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const attrs = useAttrs();
|
||||||
|
const slots = useSlots();
|
||||||
|
const handleCommand = (index) => {
|
||||||
|
props.opts[index].onClick?.();
|
||||||
|
};
|
||||||
|
const dropdownSlots = {
|
||||||
|
dropdown: () => (
|
||||||
|
<ElDropdownMenu>
|
||||||
|
{(props.opts || []).map((item, index) => (
|
||||||
|
<ElDropdownItem command={index} disabled={item.disabled} divided={item.divided}>
|
||||||
|
{item.label}
|
||||||
|
</ElDropdownItem>
|
||||||
|
))}
|
||||||
|
</ElDropdownMenu>
|
||||||
|
),
|
||||||
|
default: () => (
|
||||||
|
<ElButton type="text">
|
||||||
|
{slots.default?.() || '更多'}
|
||||||
|
<ElIcon name={props.icon} size="16" />
|
||||||
|
</ElButton>
|
||||||
|
),
|
||||||
|
};
|
||||||
|
const render = () => (
|
||||||
|
<ElDropdown {...props} {...attrs} onCommand={(command) => handleCommand(command)} v-slots={dropdownSlots} />
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.el-dropdown {
|
||||||
|
:deep(.x-icon) {
|
||||||
|
top: 0;
|
||||||
|
margin-left: @layout-space-small;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in new issue