1
suerprisePlus
2024-06-06 7acf7ad6948e3e952173a2551ea4a92a8ff56c35
src/components/Chat/enterBox.vue
@@ -1,41 +1,57 @@
<template>
  <div class="web__msg" @keyup.enter="handleSend">
    <textarea v-model="currentMsg" rows="3" :placeholder="placeholder" class="web__msg-input"></textarea>
    <!-- <textarea
      v-model="currentMsg"
      rows="3"
      :placeholder="placeholder"
      class="web__msg-input"
    ></textarea>
    <div class="web__msg-menu">
      <el-button class="web__msg-submit" type="primary"   @click="handleSend">发送</el-button>
      <el-button class="web__msg-submit" type="primary"
        >发送</el-button
      >
    </div> -->
    <div class="web_flex_input">
      <el-input v-model="currentMsg" :placeholder="placeholder"></el-input>
    </div>
    <div class="web_flex_button">
      <el-button @click="handleSend" type="primary">
        <i class="el-icon-s-promotion"></i>
      </el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'JwChat_enterbox',
  name: "JwChat_enterbox",
  props: {
    placeholder: {
      type: String,
      default: '请输入内容...'
      default: "告诉我你想要知道什么..."
    },
    value: {
      default: ''
      default: ""
    }
  },
  data () {
  data() {
    return {
      currentMsg: this.msg
    }
    };
  },
  watch: {
    value: {
      handler () {
      handler() {
        this.currentMsg = this.value;
      },
      immediate: true
    },
    currentMsg: {
      handler (newval) {
      handler(newval) {
        if (newval) {
          const msg = newval.trim()
          this.$emit('input', msg)
          const msg = newval.trim();
          this.$emit("input", msg);
        }
      },
      immediate: true
@@ -43,21 +59,29 @@
  },
  methods: {
    //用户主动发送
    handleSend () {
      this.$emit('submit', this.currentMsg);
    handleSend() {
      this.$emit("submit", this.currentMsg);
      this.$nextTick(() => {
        this.currentMsg = ''
      })
        this.currentMsg = "";
      });
    }
  },
}
  }
};
</script>
<style scoped>
.web__msg {
  padding: 0 10px;
  padding-left: 36px;
  padding-right: 22px;
  height: auto;
  overflow: hidden;
  padding-top: 10px;
  height: 100%;
  display: flex;
}
.web_flex_input {
  flex: 1;
}
.web_flex_button {
  margin-left: 16px;
}
.web__msg--img,
.web__msg--video,
@@ -120,7 +144,6 @@
  font-size: 20px;
  line-height: 17px;
  -webkit-appearance: none;
}
.web__msg-menu {
  text-align: right;
@@ -131,4 +154,18 @@
  cursor: pointer;
  text-align: center;
}
</style>
/deep/.el-input__inner {
  background-color: #fff;
  border: 1px solid #000000;
  background-color: #555555;
  box-sizing: border-box;
  color: #F2F2F2;
  padding-top: 2px;
  padding-bottom: 5px;
  font-family: "微软雅黑", sans-serif;
}
/deep/.el-button--primary {
  background-color: #8400ff;
  border-color: #8400ff;
}
</style>