向文可
2 years ago
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