<template>
|
<div class="chatPage">
|
<div class="taleBox" id="taleNode" ref="taleNode">
|
<chatList :list="taleList" @load="loadDone" />
|
</div>
|
<div class="toolBox">
|
<!-- <tools :tools="toolConfig" class="tools" @emoji="bindEmoji" /> -->
|
<div :class="$store.state.setScreenFlag ? 'isActive' : 'Active'">
|
<EnterBox @submit="enter" v-model="msg" />
|
</div>
|
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import EnterBox from "./enterBox.vue";
|
import chatList from "./chatList.vue";
|
import tools from "./tools.vue";
|
import bus from "../../assets/js/bus";
|
export default {
|
name: "JwChat",
|
components: { EnterBox, chatList, tools },
|
props: {
|
taleList: {
|
type: Array,
|
default: () => []
|
},
|
scroll: {
|
type: Number,
|
default: -1
|
},
|
height: {
|
default: "500px"
|
},
|
width: {
|
default: "550px"
|
},
|
value: {
|
default: ""
|
},
|
toolConfig: {
|
type: Object,
|
default: () => ({
|
show: ["file", "video", "img"],
|
callback: Function
|
})
|
}
|
},
|
data() {
|
return {
|
msg: ""
|
};
|
},
|
watch: {
|
scroll(newVal) {
|
if (typeof newVal === "number") {
|
this.setScroll(newVal);
|
}
|
},
|
value: {
|
handler() {
|
this.msg = this.value;
|
},
|
immediate: true
|
},
|
msg: {
|
handler(newVal) {
|
if (newVal) {
|
this.$emit("input", this.msg);
|
}
|
},
|
immediate: true
|
}
|
},
|
computed: {
|
setStyle() {
|
let height = this.height;
|
let width = this.width;
|
if (`${height}`.match(/\d$/)) {
|
height += "px";
|
}
|
if (`${width}`.match(/\d$/)) {
|
width += "px";
|
}
|
const style = { height, width };
|
return style;
|
}
|
},
|
mounted() {
|
bus.$on("setScroll", res => {
|
if (res) {
|
this.setScroll();
|
}
|
});
|
},
|
methods: {
|
bindEmoji(emoji) {
|
this.msg = emoji;
|
},
|
loadDone(boolean) {
|
if (boolean) {
|
this.setScroll();
|
}
|
|
},
|
setScroll() {
|
//滚动条一直处于下方
|
const div = document.getElementById('taleNode');
|
this.$nextTick(() => {
|
this.$refs.taleNode.scrollTop = div.scrollHeight;
|
});
|
},
|
enter(msg) {
|
this.$emit("enter", msg);
|
this.setScroll();
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.chatPage {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
}
|
|
.taleBox {
|
height: calc(100% - 100px);
|
width: 100%;
|
overflow: auto;
|
overflow-x: hidden;
|
padding-top: 15px;
|
|
|
|
|
}
|
|
/*滚动条整体样式*/
|
.taleBox::-webkit-scrollbar {
|
/*高宽分别对应横竖滚动条的尺寸*/
|
width: 10px;
|
height: 1px;
|
}
|
|
/*滚动条里面小方块*/
|
.taleBox:-webkit-scrollbar-thumb {
|
border-radius: 10px;
|
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.0);
|
background: rgba(83, 83, 83, .5);
|
}
|
|
/*滚动条里面轨道*/
|
.taleBox::-webkit-scrollbar-track {
|
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.0);
|
border-radius: 10px;
|
background: rgba(237, 237, 237, 0);
|
}
|
|
.toolBox {
|
height: 60px;
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04); */
|
}
|
|
.isActive {
|
width: 90% !important;
|
}
|
|
.Active {
|
width: 50% !important;
|
}
|
</style>
|
<style>
|
.scroll-container {
|
height: 100px;
|
overflow-y: scroll;
|
}
|
|
.scroll-container::-webkit-scrollbar {
|
width: 8px;
|
background-color: #f5f5f5;
|
}
|
|
.scroll-container::-webkit-scrollbar-thumb {
|
background-color: #000000;
|
border-radius: 10px;
|
border: 2px solid #f5f5f5;
|
}
|
|
.scroll-container::-webkit-scrollbar-thumb:hover {
|
background-color: #555555;
|
}
|
</style>
|
