v-autoinputtype 指令

介绍

v-autoinputtype 指令用于根据用户输入内容自动切换输入框类型，例如在输入邮箱时自动切换到邮箱输入框。

使用方法

将 v-autoinputtype 指令添加到需要自动切换输入类型的 input 元素上：

<template>
  <!-- 基础用法 -->
  <input v-autoinputtype placeholder="自动切换输入类型" />
  <!-- 自定义规则 -->
  <input v-autoinputtype="customRules" placeholder="自定义规则" />
</template>

查看代码

<template>
  <!-- 基础用法 -->
  <input v-autoinputtype placeholder="自动切换输入类型" />
  <!-- 自定义规则 -->
  <input v-autoinputtype="customRules" placeholder="自定义规则" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { vAutoInputType } from '@cp-vuedir/core'

// 自定义规则示例
const customRules = ref([
  {
    pattern: /^#[0-9a-fA-F]{6}$/, // 十六进制颜色值
    type: 'color'
  },
  {
    pattern: /^\d{4}\/(0[1-9]|1[0-2])$/, // YYYY/MM 日期格式
    type: 'month'
  }
])
</script>

<style scoped>
/* 基础输入框样式 */
input {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid var(--vp-c-brand);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.3s ease;
  margin-bottom: 10px;
  /* 添加间距 */
}

/* 输入框聚焦时的样式 */
input:focus {
  border-color: #007bff;
}

/* 根据输入类型动态调整样式 */
input[type='color'] {
  padding: 5px;
  height: 40px;
  cursor: pointer;
}

input[type='month'] {
  padding: 8px;
}
</style>

API

属性名	说明	类型	是否必选	默认值
customRules	自定义规则列表，用于扩展或覆盖默认的输入类型检测规则。	Array<any>	○	[]

注意事项

注意

• 该指令只能用于 input 元素。
• 该指令会根据用户输入内容自动切换输入框类型，但不会对输入内容进行验证。
• 如果用户没有 customRules ，则会使用默认的输入类型检测规则（目前只有 email ，url ,text ）。
• 自定义规则列表中的规则需要满足以下格式：

{
  // 正则表达式，用于匹配输入内容
  pattern: /正则表达式/,
  // 输入框类型，例如 'email'、'tel' 等
  type: '输入框类型',
}

警告

• 目前该指令无法判断的 number 类型，自动将 number 默认为 text 类型。