<template>
|
<div class="web__msg" @keyup.enter="handleSend">
|
<!-- <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"
|
>发送</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",
|
props: {
|
placeholder: {
|
type: String,
|
default: "告诉我你想要知道什么..."
|
},
|
value: {
|
default: ""
|
}
|
},
|
data() {
|
return {
|
currentMsg: this.msg
|
};
|
},
|
watch: {
|
value: {
|
handler() {
|
this.currentMsg = this.value;
|
},
|
immediate: true
|
},
|
currentMsg: {
|
handler(newval) {
|
if (newval) {
|
const msg = newval.trim();
|
this.$emit("input", msg);
|
}
|
},
|
immediate: true
|
}
|
},
|
methods: {
|
//用户主动发送
|
handleSend() {
|
this.$emit("submit", this.currentMsg);
|
this.$nextTick(() => {
|
this.currentMsg = "";
|
});
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.web__msg {
|
padding-left: 36px;
|
padding-right: 22px;
|
height: auto;
|
overflow: hidden;
|
height: 100%;
|
display: flex;
|
}
|
.web_flex_input {
|
flex: 1;
|
}
|
.web_flex_button {
|
margin-left: 16px;
|
}
|
.web__msg--img,
|
.web__msg--video,
|
.web__msg--file {
|
position: relative;
|
max-width: 250px;
|
min-width: 200px;
|
width: 100%;
|
margin: 10px 0;
|
border: 1px solid #eee;
|
overflow: hidden;
|
border-radius: 5px;
|
cursor: pointer;
|
display: block;
|
}
|
|
.web__msg .web__msg {
|
height: 150px;
|
background-color: #fff;
|
}
|
.web__msg .web__msg span {
|
box-sizing: border-box;
|
padding: 3px 5px;
|
color: #333;
|
display: flex;
|
align-items: center;
|
width: 100%;
|
justify-content: center;
|
height: calc(100% - 80px);
|
overflow: hidden;
|
font-size: 13px;
|
text-align: center;
|
}
|
|
.web__msg .web__msg h2 {
|
margin: 0;
|
width: 100%;
|
text-align: center;
|
line-height: 80px;
|
background-color: #409eff;
|
color: #fff;
|
}
|
|
.web__msg--map {
|
height: 160px;
|
}
|
|
.web__msg-input {
|
display: block;
|
width: 100%;
|
height: 60px;
|
overflow-x: hidden;
|
overflow-y: auto;
|
box-sizing: border-box;
|
resize: none;
|
outline: 0;
|
background-color: #fff;
|
border: 0;
|
word-break: break-all;
|
font-size: 20px;
|
line-height: 17px;
|
-webkit-appearance: none;
|
}
|
.web__msg-menu {
|
text-align: right;
|
}
|
.web__msg-submit {
|
display: inline-block;
|
outline: none;
|
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>
|
