| | |
| | | </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: {
|
| | |
| | | msg: {
|
| | | handler(newVal) {
|
| | | if (newVal) {
|
| | | this.$emit('input', this.msg);
|
| | | this.$emit("input", this.msg);
|
| | | }
|
| | | },
|
| | | immediate: true
|
| | |
| | | },
|
| | | 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>
|
| | | .chatPage {
|
| | | width: 100% !important;
|
| | | height: 100% !important;
|
| | | width: 100%;
|
| | | height: 100%;
|
| | | position: absolute;
|
| | | }
|
| | |
|
| | | .taleBox {
|
| | | height: calc(100% - 185px);
|
| | | height: calc(100% - 100px);
|
| | | overflow: auto;
|
| | | overflow-x: hidden;
|
| | | padding-top: 15px;
|
| | |
| | | }
|
| | |
|
| | | .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%;
|
| | | /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04); */
|
| | | }
|
| | |
|
| | | </style>
|
| | | <style >
|
| | | .scroll-container {
|
| | |
| | |
|
| | | .scroll-container::-webkit-scrollbar {
|
| | | width: 8px;
|
| | | background-color: #F5F5F5;
|
| | | background-color: #f5f5f5;
|
| | | }
|
| | |
|
| | | .scroll-container::-webkit-scrollbar-thumb {
|
| | | background-color: #000000;
|
| | | border-radius: 10px;
|
| | | border: 2px solid #F5F5F5;
|
| | | border: 2px solid #f5f5f5;
|
| | | }
|
| | |
|
| | | .scroll-container::-webkit-scrollbar-thumb:hover {
|