在Vuetify 3中使用Maska时如何获取未格式化的原始值？

要在Vuetify 3结合Maska的场景下获取未格式化的原始值，有两种可靠的方法：

方法一：通过指令实例直接获取原始值 #

Maska的v-maska指令会在绑定的DOM元素上挂载一个$maska实例，其中的unmaskedValue属性直接存储未格式化的原始值。你可以在更新事件中通过元素实例访问这个属性：

修改组件代码如下：

<script setup lang="ts">
import { vMaska } from "maska/vue";
import { Mask } from "maska";
import { ref } from "vue";

const emit = defineEmits(['update:modelValue']);

const props = defineProps({
  amount: {
    type: Number
  }
})

const options = {
  mask: '9.99#,##',
  tokens: {
    9: { pattern: /[0-9]/, repeated: true },
  },
  reversed: true
};

// 绑定输入框的ref
const inputRef = ref<HTMLElement | null>(null);

const handleModelUpdate = (formattedValue: string) => {
  if (inputRef.value) {
    // 从Maska实例中获取原始值
    const rawValue = (inputRef.value as any).$maska.unmaskedValue;
    console.log('原始值:', rawValue);
    // 转换为数字后emit给父组件
    emit('update:modelValue', rawValue ? Number(rawValue) : null);
  }
};
</script>

<template>
  <v-text-field
    ref="inputRef"
    :model-value="props.amount"
    v-maska="options"
    @update:model-value="handleModelUpdate"
  />
</template>

方法二：使用Maska的unmask方法手动解析 #

如果你不想依赖DOM元素的实例，可以直接使用Maska的Mask类创建实例，调用unmask方法将格式化后的值还原为原始值：

<script setup lang="ts">
import { vMaska } from "maska/vue";
import { Mask } from "maska";

const emit = defineEmits(['update:modelValue']);

const props = defineProps({
  amount: {
    type: Number
  }
})

const options = {
  mask: '9.99#,##',
  tokens: {
    9: { pattern: /[0-9]/, repeated: true },
  },
  reversed: true
};

// 创建Mask实例
const maskInstance = new Mask(options);

const handleModelUpdate = (formattedValue: string) => {
  // 调用unmask方法获取原始值
  const rawValue = maskInstance.unmask(formattedValue);
  console.log('原始值:', rawValue);
  emit('update:modelValue', rawValue ? Number(rawValue) : null);
};
</script>

<template>
  <v-text-field
    :model-value="props.amount"
    v-maska="options"
    @update:model-value="handleModelUpdate"
  />
</template>

两种方法都能有效获取原始值，方法一更直接依赖指令实例，方法二更灵活适合需要手动处理的场景，根据实际需求选择即可。

内容的提问来源于stack exchange，提问作者Jens