From 6ae4841b48665145aa469d574fbadb988a9c498c Mon Sep 17 00:00:00 2001
From: suerprisePlus <15810472099@163.com>
Date: 星期四, 27 六月 2024 15:55:17 +0800
Subject: [PATCH] 演示1版本
---
src/components/Chat/index.vue | 127 +++++++++++++++++++++++-------------------
1 files changed, 69 insertions(+), 58 deletions(-)
diff --git a/src/components/Chat/index.vue b/src/components/Chat/index.vue
index f274c2d..2e4aa88 100644
--- a/src/components/Chat/index.vue
+++ b/src/components/Chat/index.vue
@@ -5,53 +5,56 @@
</div>
<div class="toolBox">
<!-- <tools :tools="toolConfig" class="tools" @emoji="bindEmoji" /> -->
- <EnterBox @submit="enter" v-model="msg" />
+ <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 EnterBox from "./enterBox.vue";
+import chatList from "./chatList.vue";
+import tools from "./tools.vue";
export default {
name: "JwChat",
components: { EnterBox, chatList, tools },
props: {
taleList: {
type: Array,
- default: () => ([])
+ default: () => []
},
scroll: {
type: Number,
default: -1
},
height: {
- default: '500px'
+ default: "500px"
},
width: {
- default: '550px'
+ default: "550px"
},
value: {
- default: ''
+ default: ""
},
toolConfig: {
type: Object,
default: () => ({
- show: ['file', 'video', 'img'],
+ show: ["file", "video", "img"],
callback: Function
})
}
},
data() {
return {
- msg: ''
- }
+ msg: ""
+ };
},
watch: {
scroll(newVal) {
- if (typeof (newVal) === 'number') {
- this.setScroll(newVal)
+ if (typeof newVal === "number") {
+ this.setScroll(newVal);
}
},
value: {
@@ -63,7 +66,7 @@
msg: {
handler(newVal) {
if (newVal) {
- this.$emit('input', this.msg);
+ this.$emit("input", this.msg);
}
},
immediate: true
@@ -71,80 +74,88 @@
},
computed: {
setStyle() {
- let height = this.height
- let width = this.width
+ let height = this.height;
+ let width = this.width;
if (`${height}`.match(/\d$/)) {
- height += 'px'
+ height += "px";
}
if (`${width}`.match(/\d$/)) {
- width += 'px'
+ width += "px";
}
- const style = { height, width }
- return style
+ const style = { height, width };
+ return style;
}
},
methods: {
bindEmoji(emoji) {
- this.msg = emoji
+ this.msg = emoji;
},
loadDone(boolean) {
if (boolean) {
- this.setScroll()
+ this.setScroll();
}
},
setScroll(count = this.$refs.taleNode.scrollHeight) {
//婊氬姩鏉′竴鐩村浜庝笅鏂�
this.$nextTick(() => {
- this.$refs.taleNode.scrollTop = count
- })
+ this.$refs.taleNode.scrollTop = count;
+ });
},
enter(msg) {
- this.$emit('enter', msg)
- this.setScroll()
+ this.$emit("enter", msg);
+ this.setScroll();
}
- },
-}
+ }
+};
</script>
-<style scoped>
+<style scoped>
.chatPage {
- width: 100% !important;
- height: 100% !important;
+ width: 100%;
+ height: 100%;
position: absolute;
}
.taleBox {
- height: calc(100% - 185px);
+ height: calc(100% - 100px);
+ width: 100%;
overflow: auto;
overflow-x: hidden;
padding-top: 15px;
- padding-left: 10px;
- padding-right: 10px;
+
}
.toolBox {
- height: 160px;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+ 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;
}
- </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>
\ No newline at end of file
+.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>
--
Gitblit v1.9.3