属性UI(プロパティ)にチェックルール設定追加
This commit is contained in:
@@ -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
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user