44 lines
1.1 KiB
Vue
44 lines
1.1 KiB
Vue
<template>
|
|
<div class="control has-icons-left">
|
|
<input
|
|
:class="`input ${error ? 'is-danger' : ''} ${disabled ? 'has-text-black' : ''}`"
|
|
type="text"
|
|
:placeholder="placeholder || ''"
|
|
v-model="value"
|
|
@keyup="doCheck"
|
|
:disabled="disabled || false"
|
|
/>
|
|
<span class="icon is-left">
|
|
<SvgIcon v-bind="{ name: 'email.svg', type: 'gray', size: 21 }"></SvgIcon>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: ["record", "attr", "placeholder", "disabled"],
|
|
data() {
|
|
return {
|
|
value: this.record[this.attr] ? this.$copy(this.record[this.attr]) : undefined,
|
|
error: undefined,
|
|
};
|
|
},
|
|
watch: {
|
|
record: function (newVal) {
|
|
this.value = this.record[this.attr] ? this.$copy(this.record[this.attr]) : undefined;
|
|
},
|
|
},
|
|
methods: {
|
|
doCheck() {
|
|
if (this.$empty(this.value)) {
|
|
this.value = undefined;
|
|
this.error = false;
|
|
return this.$emit("email", null);
|
|
}
|
|
let check = this.$errEmail(this.value);
|
|
this.error = check ? true : false;
|
|
this.$emit("email", this.value);
|
|
},
|
|
},
|
|
};
|
|
</script>
|