EField/input
组件是将 EField 组件 template
属性设置为 input
。
# 基础示例
<template>
<EBlock class="e-field-showcase" template="input">
<EField v-model="value" template="input" label="名称" helper="enter your full name"
:validation="{required: true}" placeholder="请输入" />
<EField template="input" label="公司" value="国双科技" class="e-field" placeholder="请输入" />
<EField template="input" label="密码" value="xxxx" class="e-field" placeholder="请输入" />
<EField v-model="value" template="input" label="地址" helper="最大长度中文字符数 2"
:validation="{maxChineseLength: 2}" placeholder="请输入" />
<EField ref="username" v-model="value" template="input" label="用户名"
helper="全局唯一" :validation="{required: true}" @blur="checkDuplication" placeholder="请输入" />
</EBlock>
</template>
<script>
export default {
data() {
return {
value: null,
};
},
provide(){
return {
editable:true
}
},
methods: {
checkDuplication() {
this.$refs.username.$validate(async () => {
// eslint-disable-next-line no-console
console.log('发起接口调用');
await Promise.delay(50);
if (this.value !== 'ok') {
throw new Error('用户名已存在');
}
});
},
},
};
</script>
<style>
.e-field-showcase {
margin: 10px;
width: 500px;
border: 1px solid #aaa;
}
.e-field {
width: 400px;
margin-left: 20px;
margin-top: 10px;
}
</style>