1

suerprisePlus

2024-06-06 7acf7ad6948e3e952173a2551ea4a92a8ff56c35

 src/components/Chat/enterBox.vue

@@ -1,28 +1,44 @@
<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 () {

    return {

      currentMsg: this.msg

    }

    };

  },

  watch: {

    value: {

@@ -34,8 +50,8 @@
    currentMsg: {

      handler (newval) {

        if (newval) {

          const msg = newval.trim()

          this.$emit('input', msg)

          const msg = newval.trim();

          this.$emit("input", msg);

        }

      },

      immediate: true

@@ -44,20 +60,28 @@
  methods: {

    //用户主动发送

    handleSend () {

      this.$emit('submit', this.currentMsg);

      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;

}

/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>