76 lines
1.3 KiB
Vue
76 lines
1.3 KiB
Vue
<template>
|
|
<section class="AiEditInput" :class="{[align]:true,error}">
|
|
<el-input v-if="edit" size="small" v-model="content" @change="handleChange" @blur="cancel" clearable autofocus/>
|
|
<div class="valueText" v-if="!edit && value" v-text="value" @click="edit=true"/>
|
|
<i v-if="!edit && !value" class="el-icon-edit" @click="edit = true"></i>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "AiEditInput",
|
|
model: {
|
|
prop: "value",
|
|
event: "change"
|
|
},
|
|
props: {
|
|
value: {default: ""},
|
|
align: {default: ""},
|
|
error: Boolean
|
|
},
|
|
data() {
|
|
return {
|
|
edit: false,
|
|
content: ""
|
|
}
|
|
},
|
|
methods: {
|
|
cancel() {
|
|
this.edit = false
|
|
},
|
|
handleChange(v) {
|
|
this.$emit('change', v)
|
|
this.$emit('update:error', false)
|
|
}
|
|
},
|
|
watch: {
|
|
edit(v) {
|
|
v && (this.content = this.$copy(this.value))
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep(.AiEditInput ){
|
|
&.error {
|
|
background: rgba(#f46, .2);
|
|
}
|
|
|
|
input {
|
|
text-align: center;
|
|
}
|
|
|
|
.valueText {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-width: 43px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
&.left {
|
|
input {
|
|
text-align: left
|
|
}
|
|
|
|
.valueText {
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
}
|
|
</style>
|