| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| H | 2 | <el-input v-model="appLink" placeholder="输入或选择链接"> |
| 3 | <template #append> | |
| 4 | <el-button @click="handleOpenDialog">选择</el-button> | |
| 5 | </template> | |
| 6 | </el-input> | |
| 7 | <AppLinkSelectDialog ref="dialogRef" @change="handleLinkSelected" /> | |
| 8 | </template> | |
| 9 | <script lang="ts" setup> | |
| 10 | import { propTypes } from '@/utils/propTypes' | |
| 11 | ||
| 12 | // APP 链接输入框 | |
| 13 | defineOptions({ name: 'AppLinkInput' }) | |
| 14 | // 定义属性 | |
| 15 | const props = defineProps({ | |
| 16 | // 当前选中的链接 | |
| 17 | modelValue: propTypes.string.def('') | |
| 18 | }) | |
| 19 | // 当前的链接 | |
| 20 | const appLink = ref('') | |
| 21 | // 选择对话框 | |
| 22 | const dialogRef = ref() | |
| 23 | // 处理打开对话框 | |
| 24 | const handleOpenDialog = () => dialogRef.value?.open(appLink.value) | |
| 25 | // 处理 APP 链接选中 | |
| 26 | const handleLinkSelected = (link: string) => (appLink.value = link) | |
| 27 | ||
| 28 | // getter | |
| 29 | watch( | |
| 30 | () => props.modelValue, | |
| 31 | () => (appLink.value = props.modelValue), | |
| 32 | { immediate: true } | |
| 33 | ) | |
| 34 | ||
| 35 | // setter | |
| 36 | const emit = defineEmits<{ | |
| 37 | 'update:modelValue': [link: string] | |
| 38 | }>() | |
| 39 | watch( | |
| 40 | () => appLink.value, | |
| 41 | () => emit('update:modelValue', appLink.value) | |
| 42 | ) | |
| 43 | </script> | |
