Vue3 v-model自定义修饰符
inputcmp.vue (script setup方式)：
<template>
<span>{{ msg }}</span>
<input type="text" :value="modelValue || zs" @input="inputemit" @blur="bluremit" />
</template>
<script setup>
let props = defineProps({
// 带有参数自定义修饰符(args+Modifiers)
zs: String,
zsModifiers: {},
// 自定义修饰符，不带参数(modelModifiers)
modelValue: String,
modelModifiers: {
default: () => ({}),
},
msg: {
type: String,
default: '输入:'
}
})
let emit = defineEmits(['update:modelValue', 'update:zs'])
// 变成大写
function inputemit (e) {
let value = e.target.value;
if (props.modelModifiers && props.modelModifiers.upperCase) {
value = value.toUpperCase();
emit("update:modelValue", value);
}
}
// 变成大写且加上zs前缀
function bluremit (e) {
let value = e.target.value;
if (props.zsModifiers && props.zsModifiers.hasPre) {
value = 'zs-' + value.toUpperCase();
emit("update:zs", value);
}
}
</script>
inputcmp.vue (script 方式)：
<template>
<input type="text" :value="modelValue || zs" @input="inputemit" @blur="bluremit" />
</template>
<script >
export default {
props: {
// 带有参数自定义修饰符(args+Modifiers)
zs: String,
zsModifiers: {},
// 自定义修饰符，不带参数(modelModifiers)
modelValue: String,
modelModifiers: {
default: () => ({}),
},
},
methods: {
// 变成大写
inputemit (e) {
let value = e.target.value;
if (this.modelModifiers && this.modelModifiers.upperCase) {
value = value.toUpperCase();
this.$emit("update:modelValue", value);
}
},
// 变成大写且加上zs前缀
bluremit (e) {
let value = e.target.value;
if (this.zsModifiers && this.zsModifiers.hasPre) {
value = 'zs-' + value.toUpperCase();
this.$emit("update:zs", value);
}
}
},
};
</script>
index.vue:
<template>
<v-inputcmp v-model.upperCase="inpvalue1" />
<br />
<v-inputcmp v-model:zs.hasPre="inpvalue2" :msg="msg" />
</template>
<script setup>
import { ref } from 'vue'
import vInputcmp from './inputcmp.vue'
let inpvalue1 = ref('abc');
let inpvalue2 = ref('zs');
let zs = ref('zs')
</script>
<style></style>
