vue实现聊天框，模拟对话
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- import CSS -->
<link
rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
</head>
<style type="text/css">
.msgCss {
font-size: 16px;
font-weight: 500;
}
</style>
<body>
<div id="app">
<el-button @click="visible11" type="primary">打开聊天框</el-button>
<el-dialog :visible.sync="visible" title="对话框">
<div style="height: 500px; overflow-y: auto" id="bigBox">
<div
v-for="(item, index) in list"
class="msgCss"
:style="{textAlign: item.align}"
>
<span v-if="item && item.align == 'left'">
<img
style="
width: 50px;
height: 50px;
vertical-align: middle;
border-radius: 50%;
padding-right: 10px;
"
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.qqkou.com%2Fi%2F2a3941746846x304715422b26.jpg&refer=http%3A%2F%2Fi.qqkou.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664678600&t=aa1b5274af6cfa0d130a2aeb5c1970eb"
alt=""
/>
<span v-if="item && item.link == ''">{
{
item.text}}