BizLinkInput 链接输入

链接类录入标准件（邮箱 / 网址双模式合一，同壳同值类型，type 切换校验与特性集）：email 模式——格式校验（blur / input 两档）、@ 后常用域名后缀建议、企业域名白名单；url 模式——失焦协议自动补全（裸域名 → https://）、域名校验（可仅 https）、合法后缀新窗口预览。validate 状态外抛可直接挂 el-form rules。适用于注册登录、通讯录维护、官网 / 友情链接配置、webhook 回调设置等场景。

邮箱模式基础

当前值：support@example.com · 校验状态：empty

v-model 双向绑定；失焦后展示格式错误；validate 外抛五态状态。

<script setup lang="ts">
/** 邮箱模式基础：格式校验 + 状态外抛（失焦后展示错误） */
import { ref } from 'vue'
import { BizLinkInput } from 'vue3-ep-biz-lib'
import type { BizLinkStatus } from 'vue3-ep-biz-lib'

const email = ref('support@example.com')
const status = ref<BizLinkStatus>('empty')
</script>

<template>
  <div>
    <BizLinkInput v-model="email" type="email" @validate="(s) => (status = s)" />
    <p style="margin: 8px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      当前值：{{ email || '（空）' }} · 校验状态：{{ status }}
    </p>
  </div>
</template>

显示代码

网址模式基础

校验状态：empty

完整地址校验；合法后缀出现「新窗口预览」图标。

<script setup lang="ts">
/** 网址模式基础：完整地址校验，合法后缀出现「新窗口预览」图标 */
import { ref } from 'vue'
import { BizLinkInput } from 'vue3-ep-biz-lib'
import type { BizLinkStatus } from 'vue3-ep-biz-lib'

const url = ref('https://element-plus.org')
const status = ref<BizLinkStatus>('empty')
</script>

<template>
  <div>
    <BizLinkInput v-model="url" type="url" @validate="(s) => (status = s)" />
    <p style="margin: 8px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">校验状态：{{ status }}</p>
  </div>
</template>

显示代码

邮箱后缀建议

输入 zhangsan@q 按前缀过滤 qq / 163 / gmail 等常用域名；suggest=false 退化为纯输入。

<script setup lang="ts">
/** 邮箱后缀建议：输入 @ 后按前缀过滤常用域名；suggest=false 关闭退化为纯输入 */
import { ref } from 'vue'
import { BizLinkInput } from 'vue3-ep-biz-lib'

const email = ref('')
const plain = ref('dev@company.com')
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 10px; align-items: flex-start">
    <BizLinkInput v-model="email" type="email" placeholder="试试输入 zhangsan@q…" />
    <BizLinkInput v-model="plain" type="email" :suggest="false" />
  </div>
</template>

显示代码

企业域名白名单

allowed-domains 限定企业邮箱；白名单域名同时置顶进入后缀建议。

<script setup lang="ts">
/** 企业域名白名单：域外邮箱判 domain 错误；白名单域名同时置顶进入后缀建议 */
import { ref } from 'vue'
import { BizLinkInput } from 'vue3-ep-biz-lib'

const email = ref('zhangsan@gmail.com')
</script>

<template>
  <BizLinkInput v-model="email" type="email" :allowed-domains="['company.com', 'corp.cn']" />
</template>

显示代码

邮箱即时校验

validate-on="input" 打字过程即红框（默认失焦后才提示，避免打断输入）。

<script setup lang="ts">
/** 邮箱即时校验：validateOn="input" 打字过程即提示（默认失焦后才提示） */
import { ref } from 'vue'
import { BizLinkInput } from 'vue3-ep-biz-lib'

const email = ref('')
</script>

<template>
  <BizLinkInput v-model="email" type="email" validate-on="input" placeholder="输入中即时提示格式错误" />
</template>

显示代码

网址协议补全

当前值：（空）

输入 example.com 失焦后自动补全为 https://example.com 再校验。

<script setup lang="ts">
/** 网址协议补全：裸域名失焦后自动加 https:// 再校验 */
import { ref } from 'vue'
import { BizLinkInput } from 'vue3-ep-biz-lib'

const url = ref('')
</script>

<template>
  <div>
    <BizLinkInput v-model="url" type="url" placeholder="试试输入 example.com 后失焦" />
    <p style="margin: 8px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">当前值：{{ url || '（空）' }}</p>
  </div>
</template>

显示代码

仅 https 与关闭预览

https-only 开启后 http:// 判 protocol 错误；previewable=false 纯录入。

<script setup lang="ts">
/** 网址仅 https：http:// 开头判 protocol 错误；预览可关（previewable=false） */
import { ref } from 'vue'
import { BizLinkInput } from 'vue3-ep-biz-lib'

const webhook = ref('http://insecure.example.com')
const doc = ref('https://docs.example.com/guide')
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 10px; align-items: flex-start">
    <BizLinkInput v-model="webhook" type="url" https-only />
    <BizLinkInput v-model="doc" type="url" :previewable="false" />
  </div>
</template>

显示代码

自定义错误文案

messages 覆盖 format / domain / protocol 三档（双模式各一例）。

<script setup lang="ts">
/** 自定义错误文案：messages 覆盖 format / domain / protocol 三档（双模式各一例） */
import { ref } from 'vue'
import { BizLinkInput } from 'vue3-ep-biz-lib'

const email = ref('not-an-email')
const url = ref('ftp://files.example.com')
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 10px; align-items: flex-start">
    <BizLinkInput
      v-model="email"
      type="email"
      :messages="{ format: '请输入正确的邮箱地址（形如 name@host.com）', domain: '请使用企业邮箱注册' }"
    />
    <BizLinkInput
      v-model="url"
      type="url"
      https-only
      :messages="{ format: '请填写完整网址（以 https:// 开头）', protocol: '安全要求：必须使用 HTTPS 协议' }"
    />
  </div>
</template>

显示代码

el-form 集成

联系邮箱

官网地址

rules 自定义校验器调用 expose.validate()：email 白名单 + url httpsOnly 双拦截。

<script setup lang="ts">
/** el-form 集成：rules 自定义校验器调 expose.validate()（email 白名单 + url httpsOnly 双拦截） */
import { ref } from 'vue'
import { ElButton, ElForm, ElFormItem } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { BizLinkInput } from 'vue3-ep-biz-lib'
import type { BizLinkInputInstance } from 'vue3-ep-biz-lib'

const formRef = ref<FormInstance>()
const emailRef = ref<BizLinkInputInstance>()
const urlRef = ref<BizLinkInputInstance>()
const form = ref({ email: '', site: '' })

const rules = {
  email: [
    { required: true, message: '请填写联系邮箱', trigger: 'blur' },
    {
      validator: (_rule: unknown, _value: string, callback: (err?: Error) => void) => {
        const status = emailRef.value?.validate() ?? 'empty'
        if (status === 'valid') callback()
        else callback(new Error(status === 'domain' ? '仅支持企业邮箱' : '邮箱格式不正确'))
      },
      trigger: 'blur',
    },
  ],
  site: [
    { required: true, message: '请填写官网地址', trigger: 'blur' },
    {
      validator: (_rule: unknown, _value: string, callback: (err?: Error) => void) => {
        const status = urlRef.value?.validate() ?? 'empty'
        if (status === 'valid') callback()
        else callback(new Error(status === 'protocol' ? '官网必须使用 https' : '网址格式不正确'))
      },
      trigger: 'blur',
    },
  ],
}
</script>

<template>
  <ElForm ref="formRef" :model="form" :rules="rules" label-width="84px" style="max-width: 460px">
    <ElFormItem label="联系邮箱" prop="email">
      <BizLinkInput ref="emailRef" v-model="form.email" type="email" :allowed-domains="['company.com']" />
    </ElFormItem>
    <ElFormItem label="官网地址" prop="site">
      <BizLinkInput ref="urlRef" v-model="form.site" type="url" https-only />
    </ElFormItem>
    <ElFormItem>
      <ElButton type="primary" @click="formRef?.validate()">保 存</ElButton>
    </ElFormItem>
  </ElForm>
</template>

显示代码

尺寸 / 禁用 / 占位

small / default / large 三档（双模式混排）、禁用置灰、占位与关闭清空。

<script setup lang="ts">
/** 尺寸 / 禁用 / 占位（双模式混排） */
import { BizLinkInput } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 10px; align-items: flex-start">
    <BizLinkInput model-value="small@company.com" type="email" size="small" />
    <BizLinkInput model-value="default@company.com" type="email" />
    <BizLinkInput model-value="https://large.example.com" type="url" size="large" />
    <BizLinkInput model-value="disabled@example.com" type="email" disabled />
    <BizLinkInput type="url" placeholder="粘贴素材链接地址" :clearable="false" />
  </div>
</template>

显示代码

事件流

validate / change 事件日志（双模式各一）。

<script setup lang="ts">
/** 事件流：validate / change 日志（双模式各一） */
import { ref } from 'vue'
import { BizLinkInput } from 'vue3-ep-biz-lib'
import type { BizLinkStatus } from 'vue3-ep-biz-lib'

const email = ref('')
const url = ref('')
const logs = ref<string[]>([])

const onValidate = (status: BizLinkStatus): void => {
  logs.value = [`[${new Date().toLocaleTimeString()}] validate → ${status}`, ...logs.value].slice(0, 5)
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 10px">
    <BizLinkInput v-model="email" type="email" @validate="onValidate" @change="(v) => logs.unshift(`email change → ${v}`)" />
    <BizLinkInput v-model="url" type="url" @validate="onValidate" @change="(v) => logs.unshift(`url change → ${v}`)" />
    <p v-for="l in logs" :key="l" style="margin: 4px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">{{ l }}</p>
  </div>
</template>

显示代码

组合场景

未填写

启用回调

联络表单（手机 + 邮箱）与 webhook 配置（https-only + 状态徽标联动启用开关）。

<script setup lang="ts">
/** 组合场景：联络表单（手机 + 邮箱）与 webhook 配置（https-only + 状态徽标联动开关） */
import { computed, ref } from 'vue'
import { ElSwitch, ElTag } from 'element-plus'
import { BizLinkInput, BizPhoneInput } from 'vue3-ep-biz-lib'
import type { BizLinkStatus } from 'vue3-ep-biz-lib'

const phone = ref('')
const email = ref('')
const webhook = ref('')
const status = ref<BizLinkStatus>('empty')
const enabled = ref(false)

const tagType = computed(() => (status.value === 'valid' ? 'success' : status.value === 'empty' ? 'info' : 'danger'))
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; align-items: flex-start">
    <div style="display: flex; gap: 12px; flex-wrap: wrap">
      <BizPhoneInput v-model="phone" placeholder="联系手机号" style="width: 200px" />
      <BizLinkInput v-model="email" type="email" placeholder="接收通知邮箱" />
    </div>
    <BizLinkInput v-model="webhook" type="url" https-only placeholder="https://your-service.com/webhook" @validate="(s) => (status = s)" />
    <div style="display: flex; align-items: center; gap: 8px">
      <ElTag size="small" :type="tagType">{{ status === 'valid' ? '地址可用' : status === 'empty' ? '未填写' : '地址不可用' }}</ElTag>
      <ElSwitch v-model="enabled" :disabled="status !== 'valid'" active-text="启用回调" />
    </div>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
type	'email' | 'url'	—（必填）	链接类型：决定校验规则与可用特性集
v-model	string	''	值（邮箱地址或含协议头的网址）
placeholder	string	按类型	占位（email '请输入邮箱' / url 'https://example.com'）
suggest	boolean	true	[email] @ 后常用域名后缀建议下拉
allowed-domains	string[]	—	[email] 企业邮箱域名白名单（域外判 domain 错误）
validate-on	'blur' | 'input'	'blur'	[email] 错误提示时机（校验本身始终实时计算）
auto-prefix	boolean	true	[url] 失焦时裸域名自动补 https://
https-only	boolean	false	[url] 仅允许 https（http 判 protocol 错误）
previewable	boolean	true	[url] 合法后缀显示新窗口预览链接
maxlength	number	按类型	最大长度（email 64 / url 2048）
clearable	boolean	true	可清空
disabled	boolean	false	禁用
size	'small' | 'default' | 'large'	'default'	尺寸
messages	Partial<Record<'format' | 'domain' | 'protocol', string>>	—	自定义错误文案

Events

事件名	参数	说明
validate	(status: BizLinkStatus)	校验状态：empty / format / domain（email）/ protocol（url）/ valid
change	(value: string)	值变化（含协议补全后的回写）
blur	(event: FocusEvent)	失焦

Expose

属性/方法	说明
validate	() => BizLinkStatus 同步校验并返回当前状态（el-form 校验器调用）

口径说明

• 校验正则：email ^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$（域名比对忽略大小写）；url new URL() 解析成功且 hostname 含 .，ftp:// 等非 http(s) 协议按 format 处理。
• 提示时机：状态始终实时计算，错误文案仅在 touched（失焦过或 email validate-on=input）后展示；validate 事件在输入与失焦时均外抛。
• url 补全顺序：失焦时先补协议再校验外抛；补全仅对「形如域名」的裸输入生效（a.com/path → https://a.com/path）。
• 模式无关特性忽略：如 url 模式下传入 allowed-domains 不参与校验（仅 email 模式生效），反之亦然。