mirror of
https://github.com/fugary/simple-element-plus-template.git
synced 2025-11-12 14:27:49 +00:00
66 lines
2.0 KiB
Vue
66 lines
2.0 KiB
Vue
<script setup>
|
|
import { computed, ref } from 'vue'
|
|
import { useUserAutocompleteConfig } from '@/services/user/UserService'
|
|
import { $i18nMsg } from '@/messages'
|
|
import { useCityAutocompleteConfig, useCitySelectPageConfig } from '@/services/city/CityService'
|
|
|
|
const modelIcon = ref('Apple')
|
|
const modelAuto = ref('99999')
|
|
const modelAutoLabel = ref('Gary Fu')
|
|
const userAutocompleteConfig = computed(() => useUserAutocompleteConfig())
|
|
// 城市控件
|
|
const cityModel = ref('')
|
|
const cityAutocompleteConfig = computed(() => useCityAutocompleteConfig())
|
|
const citySelectPageConfig = computed(() => useCitySelectPageConfig())
|
|
</script>
|
|
|
|
<template>
|
|
<el-container>
|
|
<el-main>
|
|
<el-form :label-width="100">
|
|
<el-form-item label="图标选择">
|
|
<common-icon-select v-model="modelIcon" />
|
|
</el-form-item>
|
|
<el-form-item label="用户">
|
|
<common-autocomplete
|
|
v-model="modelAuto"
|
|
v-model:default-label="modelAutoLabel"
|
|
id-key="id"
|
|
:label-key="$i18nMsg('nameCn', 'nameEn')"
|
|
:empty-search-enabled="true"
|
|
title="请选择用户"
|
|
:autocomplete-config="userAutocompleteConfig"
|
|
>
|
|
<template #gender="{item}">
|
|
<el-tag
|
|
:type="item.gender === 'male' ? '' : 'success'"
|
|
>
|
|
{{ item.gender }}
|
|
</el-tag>
|
|
</template>
|
|
</common-autocomplete>
|
|
</el-form-item>
|
|
<el-form-item label="出发城市">
|
|
<common-autocomplete
|
|
v-model="cityModel"
|
|
id-key="code"
|
|
:label-key="$i18nMsg('nameCn', 'nameEn')"
|
|
:empty-search-enabled="false"
|
|
title="请选择城市"
|
|
:autocomplete-config="cityAutocompleteConfig"
|
|
:select-page-config="citySelectPageConfig"
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-container>
|
|
{{ modelAuto }}
|
|
{{ modelAutoLabel }}
|
|
</el-container>
|
|
</el-main>
|
|
</el-container>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|