多维表格
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.
 
 
 
 
 
 

37 lines
801 B

<script lang="ts" setup>
import { computed } from '#imports'
import { isEmail } from '~/utils'
interface Props {
modelValue: string
}
interface Emits {
(event: 'update:modelValue', model: string): void
}
const props = defineProps<Props>()
const emits = defineEmits<Emits>()
const root = ref<HTMLInputElement>()
const editEnabled = inject<boolean>('editEnabled')
const vModel = useVModel(props, 'modelValue', emits)
const validEmail = computed(() => isEmail(vModel.value))
</script>
<template>
<input v-if="editEnabled" ref="root" v-model="vModel" class="outline-none prose-sm" />
<a
v-else-if="validEmail"
class="prose-sm underline hover:opacity-75"
:href="`mailto:${vModel}`"
target="_blank"
>
{{ vModel }}
</a>
<span v-else>{{ vModel }}</span>
</template>