运营平台

project/oms/apps/AppContentManage/components/AiEditInput.vue

@@ -0,0 +1,75 @@
+<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>