47 lines
1.9 KiB
Vue
47 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
|
|
const props = defineProps<{
|
|
modelValue: string;
|
|
}>();
|
|
const emit = defineEmits(['update:modelValue']);
|
|
const handleSelect = (aspectRatio: string) => {
|
|
emit('update:modelValue', aspectRatio);
|
|
}
|
|
const showArrowDown = ref(false);
|
|
|
|
const aspectRatioList = ref<string[]>(['9:16', '16:9', '3:4', '4:3', '2:3', '3:2', '1:1']);
|
|
</script>
|
|
<template>
|
|
<el-popover :show-arrow="false" trigger="click" placement="bottom-start" width="fit-content" popper-class="model-popover" @show="showArrowDown = false"
|
|
@hide="showArrowDown = true">
|
|
<template #reference>
|
|
<slot>
|
|
<div class="flex flex-center grid-gap-2 input-button input-button-selected px-6">
|
|
<span class="icon-aspect-ratio" :view="props.modelValue"></span>
|
|
<span class="h10">{{ props.modelValue }}</span>
|
|
<el-icon v-if="showArrowDown">
|
|
<ArrowUpBold />
|
|
</el-icon>
|
|
<el-icon v-else>
|
|
<ArrowDownBold />
|
|
</el-icon>
|
|
</div>
|
|
</slot>
|
|
</template>
|
|
<!-- <span class="h10">选择比例</span> -->
|
|
<el-scrollbar height="300px">
|
|
<div class="grid-columns-2 grid-gap-4 text-center mt-4">
|
|
<div v-for="item in aspectRatioList" :key="item"
|
|
class="grid-column-2 grid-gap-2 input-button rounded-4 p-2" :class="{ 'input-button-selected': props.modelValue === item }" @click.stop="handleSelect(item)">
|
|
<span class="icon-aspect-ratio" :view="item"></span>
|
|
<span class="font-weight-600">{{ item }}</span>
|
|
<el-icon v-if="props.modelValue === item" class="ml-auto">
|
|
<Check />
|
|
</el-icon>
|
|
</div>
|
|
</div>
|
|
</el-scrollbar>
|
|
</el-popover>
|
|
</template>
|
|
<style scoped lang="scss">
|
|
</style> |