You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
1.6 KiB
70 lines
1.6 KiB
<!-- 3.5和4.0模型切换组件 --> |
|
<script setup lang="ts"> |
|
import { computed } from 'vue' |
|
import { Dropdown, Menu, MenuItem } from 'ant-design-vue' |
|
import type { ModelSelect } from './index.d' |
|
import { SvgIcon } from '@/components/SvgIcon' |
|
|
|
interface Props { |
|
activeIndex: number |
|
options: ModelSelect[] |
|
} |
|
const props = withDefaults(defineProps<Props>(), { |
|
activeIndex: 0, |
|
options: () => [], |
|
}) |
|
|
|
const emit = defineEmits(['change', 'update:activeIndex']) |
|
|
|
const optionActive = computed({ |
|
get: () => props.activeIndex, |
|
set: value => emit('update:activeIndex', value), |
|
}) |
|
|
|
function handelChange(index: number, item: ModelSelect) { |
|
optionActive.value = index |
|
emit('change', index, item) |
|
} |
|
</script> |
|
|
|
<template> |
|
<Dropdown :trigger="['click']"> |
|
<div class="app-model-select flex justify-between items-center" @click.prevent> |
|
<SvgIcon class="icon icon-robot" name="robot" /> |
|
{{ options[optionActive].label }} |
|
<SvgIcon class="icon icon-down" name="down" /> |
|
</div> |
|
|
|
<template #overlay> |
|
<Menu> |
|
<MenuItem v-for="(item, index) in options" :key="item.value" @click="handelChange(index, item)"> |
|
{{ item.label }} |
|
</MenuItem> |
|
</Menu> |
|
</template> |
|
</Dropdown> |
|
</template> |
|
|
|
<style lang="scss" scoped> |
|
@include app('model-select') { |
|
width: 200px; |
|
height: 40px; |
|
padding: 0 20px; |
|
margin: 0 auto; |
|
color: #4670e3; |
|
background-color: #edf3ff; |
|
border-radius: 20px; |
|
cursor: pointer; |
|
position: absolute; |
|
top: 0px; |
|
left: calc(50% - 100px); |
|
.icon { |
|
width: 24px; |
|
height: 24px; |
|
} |
|
.icon-down { |
|
width: 18px; |
|
height: 18px; |
|
} |
|
} |
|
</style>
|
|
|