vue仿微信聊天框(vue组件)

vue仿微信聊天框(vue组件)

文章目录

• • 1，效果截图
  • 2，源码
  • 3，代码

1，效果截图

2，源码

链接：=oix1
提取码：oix1
–来自百度网盘超级会员V4的分享

3，代码

messageBox.vue

<template>
<div class="wrapper" :style="{'--width':width,'--oneheight':oneheight,'--twoheight':twoheight,'--threeheight':threeheight,'--fourheight':fourheight,
'--onefontpaddingtop':onefontpaddingtop,'--onefontpaddingleft':onefontpaddingleft,'--twoofonecolwidth':twoofonecolwidth,
'--twooftwocolwidth':twooftwocolwidth,
'--inputwidth':inputwidth,'--inputheight':inputheight,
'--buttonwidth':buttonwidth,'--buttonheight':buttonheight}"><div class="one" :style="{'font-size':fontsize1}">猫咪</div><div class="two" v-for="item in list" :key="item.url">
<!--    第二行第二列--><div class="twooftwocol" :style="{'font-size':fontsize2}">{{tstxt}}</div><div class="twoofone" ><el-imagestyle="border-radius: 50%"fit="cover":style="{'width':twoofonecolwidth,'height':twoofonecolwidth}":src="url":preview-src-list="[item.url]"></el-image></div></div><div class="three"><input type="text" name="name" v-model="text" placeholder="发送信息"><button @click="addsession"> <span class="el-icon-s-promotion"></span></button></div></div>
</template><script>
export default {name: "messageBox",data(){return{//双向v-model中的input的值text:'',list:[{//聊天内容contentstxt:'静静的注视，暗暗的关注，不声不响的感受，时刻关心，却难以启齿，这就是暗恋；藏在心底的爱意，随着光阴一分一秒悠悠流淌',//图片链接url:'127.0.0.1:3000/image/00.jpg',},{//聊天内容contentstxt:'静静的注视，暗暗的关注，不声不响的感受，时刻关心，却难以启齿，这就是暗恋；藏在心底的爱意，随着光阴一分一秒悠悠流淌',//图片链接url:'127.0.0.1:3000/image/00.jpg',},],url:'127.0.0.1:3000/image/00.jpg',/*  最外部大容器wrapper的width*/width:'',/*  第一行的height*/oneheight:'',/*  第二行的height*/twoheight:'',/*  第三行的height*/threeheight:'',/*  第四行的height*/fourheight:'',//  第一行中的字体大小fontsize1:'',//第二行字体的大小fontsize2:'',/*第一行字体的paddingtop*/onefontpaddingtop:'',/*  第一行字体的paddingleft*/onefontpaddingleft:'',/*  第二行的第一列的width*/twoofonecolwidth:'',/*第二行的第二列的width*/twooftwocolwidth:'',//输入框的widthinputwidth:'',//输入框的heightinputheight:'',//发送按钮的widthbuttonwidth:'',//发送按钮的heightbuttonheight:''}},mounted() {homeheight()homewidth()window.addEventListener('resize', homewidth); // 在窗口大小改变时重新获取窗口宽度window.addEventListener('resize', homeheight);},methods:{//增加聊天数据addsession(){this.list.push({'contentstxt':})=''},gethomewidth(){// 获取窗口宽度var windowwidth = window.innerWidth/*  最外部大容器wrapper的width*/this.width = parseInt(windowwidth/5)+'px'/*  第二行的第一列的width*/this.twoofonecolwidth = parseInt(windowwidth/5/7)+'px'/*第二行的第二列的width*/this.twooftwocolwidth = parseInt(windowwidth/5/5*3)+'px'//输入框的inputwidththis.inputwidth = parseInt(windowwidth/8)+'px'//发送按钮的widththis.buttonwidth= parseInt(windowwidth/8/5)+'px'},// 获得窗口height度gethomeheight(){var windowheight = window.innerHeight//第一行的height = parseInt(windowheight/22)+'px'//第一行的字体大小this.fontsize1 = parseInt(windowheight/22/2)+'px'//第二行的字体大小this.fontsize2 = parseInt(windowheight/22/2/2)+'px'//第一行字体的fontpaddingtop = parseInt(windowheight/19/2/2)+'px'//第一行字体的fontpaddingleft = parseInt(windowheight/19/2/2)+'px'//第二行的heightthis.twoheight = parseInt(windowheight/10)+'px'//第三行的heightthis.threeheight = parseInt(windowheight/7/3)+'px'//第四行的heightthis.fourheight = parseInt(windowheight/7)+'px'//输入框的inputheightthis.inputheight = parseInt(windowheight/7/4)+'px'//发送按钮的heightthis.buttonheight = parseInt(windowheight/7/4)+'px'}},}
</script><style scoped>
:root{
/*  最外部大容器wrapper的width*/--width:'';/*  第一行的height*/--oneheight:'';
/*第一行字体的paddingtop*/--onefontpaddingtop:'';
/*  第一行字体的paddingleft*/--onefontpaddingleft:'';
/*  第二行的height*/--twoheight:'';/*  第三行的height*/--threeheight:'';/*  第四行的height*/--fourheight:'';
/*  第二行的第一列的width*/--twoofonecolwidth:'';
/*第二行的第二列的width*/--twooftwocolwidth:'';
/*  输入框的width*/--inputwidth:'';
/*  输入框的height*/--inputheight:'';
/*  按钮的width*/--buttonwidth:'';
/*  按钮的height*/--buttonheight:'';
}
/*发送信息的输入框*/
input{margin-top: 5px;width: var(--inputwidth);height: var(--inputheight);background-color: white;border-radius: 8px;border: 1px solid #ccc;
}
input:hover {box-shadow: 0 0 10px gray;border-color: rgb(64, 158, 255);
}
input:focus{outline: rgb(64, 158, 255);
}
/*发送信息的按钮*/
button{margin-top: 7px;background-color: rgb(236, 245, 255);border: none;color: rgb(92, 158, 255);text-align: center;text-decoration: none;font-size: 16px;cursor: pointer;border-radius: 5px;box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);transition: transform 0.3s ease;width: var(--buttonwidth);height: var(--buttonheight);
}
button:hover{transform: scale(0.95);
}
.wrapper{display: flex;width: var(--width);background-color: rgb(237, 237, 237);gap: 5px;flex-wrap: wrap;
}
.one{padding-top: var(--onefontpaddingtop);padding-left: var(--onefontpaddingleft);width: var(--width);height: var(--oneheight);background-color: rgb(237, 237, 237);}
.two{display: flex;justify-content: flex-end;width: var(--width);background-color: rgb(237, 237, 237);
}
.twoofone{width: var(--twoofonecolwidth);}
/*第二行第二列*/
.twooftwocol{padding-left: 5px;padding-top: 5px;margin-left: 5px;border-radius: 3%;width: var(--twooftwocolwidth);background-color: white;
}
.three{display: flex;justify-content: center;gap: 5px;width: var(--width);height: var(--threeheight);background-color: rgb(237, 237, 237);
}
.four{width: var(--width);height: var(--fourheight);background-color: #42b983;
}
</style>