Vue3 – Maska – 输入框遮罩为全名

huangapple go评论53阅读模式
英文:

Vue3 - Maska - mask to fullname input

问题

目前我正在我的Vue项目中使用maska作为掩码库。
是否有办法为fullname输入框编写一个掩码,使其接受任何字母并将空格后的第一个字母转换为大写?

英文:

Currently I'm using maska as a mask library in my vue project.
Is there anyway to write a mask to a fullname input that will accepts any letters and upercase the first letter after an space?

Vue3 – Maska – 输入框遮罩为全名

答案1

得分: 0

"Nevermind I've just figure it."

"Nevermind I've just figure it."
import { ref } from 'vue';
import { MaskInputOptions } from 'maska';

const maskOptions = ref({
  postProcess(value: string): string {
    function capitalizeFirstLetterAndFirstLettersAfterSpace(input: string): string {
      return input
        .toLowerCase()
        .split(' ')
        .map(s => s.charAt(0).toUpperCase() + s.substring(1))
        .join(' ');
    }
    return capitalizeFirstLetterAndFirstLettersAfterSpace(value);
  },
  mask: '@',
  eager: true,
  tokens: {
    '@': {
      pattern: /[a-zA-ZÀ-ú ]/,
      repeated: true,
    },
  },
} as MaskInputOptions);

const name = ref<string | undefined | null>(null);
英文:

Nevermind I've just figure it.

&lt;template&gt;
  &lt;VTextField
		label=&quot;Full Name&quot;
		prepend-icon=&quot;mdi-account-circle-outline&quot;
		v-model=&quot;name&quot;
		v-mask:[maskOptions]
  /&gt;
&lt;/template&gt;
import {ref} from &#39;vue&#39;;
import { MaskInputOptions } from &#39;maska&#39;;
const maskOptions = ref({
			postProcess(value: string): string {
				function captilizeFirstLetterAndFirstLettersAfterSpace(input: string): string {
					return input
						.toLowerCase()
						.split(&#39; &#39;)
						.map(s =&gt; s.charAt(0).toUpperCase() + s.substring(1))
						.join(&#39; &#39;);
				}
				return captilizeFirstLetterAndFirstLettersAfterSpace(value);
			},
			mask: &#39;@&#39;,
			eager: true,
			tokens: {
				&#39;@&#39;: {
					pattern: /[a-zA-Z&#192;-&#250; ]/,
					repeated: true,
				},
			},
		} as MaskInputOptions);
const name = ref&lt;string|undefined|null&gt;(null);

huangapple
  • 本文由 发表于 2023年5月29日 06:54:04
  • 转载请务必保留本文链接:https://go.coder-hub.com/76353889.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定