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.
65 lines
1.4 KiB
65 lines
1.4 KiB
1 year ago
|
<!-- 3.5和4.0模型切换组件 -->
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import { Dropdown, Menu, MenuItem } from 'ant-design-vue'
|
||
|
|
import type { ModelSelect } from './index.d'
|
||
|
|
import { SvgIcon } from '@/components/SvgIcon'
|
||
|
|
|
||
|
|
const emit = defineEmits(['change'])
|
||
|
|
const optionActive = ref(0)
|
||
|
|
const options: ModelSelect[] = [
|
||
|
|
{
|
||
|
|
label: '同聪3.5',
|
||
|
|
value: '1',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '同聪4.0',
|
||
|
|
value: '2',
|
||
|
|
},
|
||
|
|
]
|
||
|
|
|
||
|
|
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;
|
||
|
|
.icon {
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
}
|
||
|
|
.icon-down {
|
||
|
|
width: 18px;
|
||
|
|
height: 18px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|