<template>
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-change="handleChange"
:file-list="fileList">
<el-button size="small" type="primary">
<img src="../public/images/annex.png" class="annex"/>
</el-button>
</el-upload>
<div class="bottom_left">
<div @keydown="messageInput" @click="showEmoji1=false">
<div_edit_model id="test" contenteditable="true" data-text="" v-model="msg"></div_edit_model>
</div>
<!-- 发送按钮 -->
<div class="warn1" v-show="warn1">不能发送空白信息</div>
<span class="send1" @click="messageInput($event)">发送</span>
</div>
</template>
<script>
export default {
name: 'userClient',
data () {
return {
// 上传附件
fileList: [{
// name: 'food.jpeg',
// url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
// }, {
// name: 'food2.jpeg',
// url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
}
]
}
}
methods: {
// 上传附件
handleChange(file, fileList) {
this.fileList = fileList.slice(-3);
},
// 绑定回车键和发送按钮,以及不能发送空白消息
messageInput (e) {
let vm = this
let msg = vm.msg.replace(/^\s+|\s+$/g, '');
let oTest = document.getElementById('test');
if(msg=='' && (e.which === 13 || e.target.classList.contains('send1'))){
oTest.value = '' //输入框是div的用
vm.warn1 = true
setTimeout(() => {
vm.warn1 = false
}, 1000)
}else{
if ((e.which === 13 && vm.msg) || (e.target.classList.contains('send1') && vm.msg)) {
e.preventDefault()
socket.emit('message', vm.currentRoomID, msg)
vm.msg = ''
// oTest.value = '' //输入框是div的用
}
}
},
}
}
<input type="hidden" v-model="inputValue">
<el-upload ... on-success="success_handle" ... />
data(){
return {
}
},
methods:{
...
success_handle(response,file,fileList) {
}
...
}