属性UI(プロパティ)にチェックルール設定追加

This commit is contained in:
xiaozhe.ma
2024-08-22 17:15:49 +09:00
parent 1e3b2d6392
commit af22f6e603
18 changed files with 468 additions and 231 deletions

View File

@@ -1,7 +1,10 @@
<template>
<div v-bind="$attrs">
<q-input :label="displayName" label-color="primary" v-model="inputValue" :placeholder="placeholder" autogrow
stack-label />
<q-input :label="displayName" label-color="primary" v-model="inputValue"
:placeholder="placeholder"
:rules="rulesExp"
autogrow
stack-label />
</div>
</template>
@@ -32,17 +35,34 @@ export default defineComponent({
type: String,
default: '',
},
//例:[val=>!!val ||'入力してください']
rules: {
type: String,
default: undefined
},
required:{
type:Boolean,
default:false
},
requiredMessage: {
type: String,
default: ''
},
},
setup(props, { emit }) {
const inputValue = ref(props.modelValue);
const customExp = props.rules === undefined ? [] : eval(props.rules);
const errmsg = props.requiredMessage?props.requiredMessage:`${props.displayName}が必須です。`;
const requiredExp = props.required?[((val:any)=>!!val || errmsg )]:[];
const rulesExp=[...requiredExp,...customExp];
watchEffect(() => {
emit('update:modelValue', inputValue.value);
});
return {
inputValue,
rulesExp
};
},
});