<!-- 聊天框--> <el-card id="chatFrame" style="width: 800px; height: calc(100vh - 40px); overflow: auto;" shadow="never"> <template #header> <div style="width: 100%;color: #9399a5; text-align: center;"> <span>{{this.userName}}</span> </div> </template> <!-- cId cFromUid cToUid cMessage cDate--> <!--聊天信息--> <div id="chatMsgFrame" style="width: 100%; height: 460px; overflow: auto"> <div v-for="item in chatHistory"> <!-- 我发出信息的模板--> <div v-if="item.cFromUid != targetUId" style="width: 100%; margin-bottom: 8px;"> <div style="width: 100%; display: flex; flex-direction: row-reverse"> <!--头像--> <div style="width: 30px; margin-left: 10px;" > <img style="width: 30px; height: 30px;border-radius:100%; overflow:hidden;" :src="testHeadImage"> </div> <!--时间+内容--> <div style="/*width: 616px;*/ margin-bottom: 5px;"> <div style="word-break: break-word;"> <div style="background-color: #84C1FF; border-radius: 5px; padding: 10px;"> {{item.cMessage}} </div> </div> <div style="margin-top: 2px;font-size: 12px;color: #969696; text-align: right; width: 100%"> {{item.cDate}} </div> </div> </div> </div>

这段代码看起来是一个聊天框的模板，使用了 Element UI 的组件。其中包括了聊天信息的模板，分别有我发出信息的模板和对方发出信息的模板。在模板中使用了 v-for 指令来遍历聊天记录数组，使用了 v-if 指令根据发送者的 id 判断是我还是对方发出的信息，并根据不同的情况展示不同的模板。整体看起来比较简单易懂。

相关问题

//定义一个数组，用来保存聊天者的图像 var charStr=new Array("images/head01.jpg","head02.jpg","head03.jpg"); //定义一个数组，用来保存聊天者的昵称 var uName=new Array("时尚伊人","六月奇迹","松松"); //根据id获取页面上的发送按钮对象,存储在变量send var send=document.getElementById("send"); //点击“发送”按钮时，执行一系列程序 send.onclick=function(){ //根据id获取聊天输入框的对象，用于后面获取输入的内容 var chatText=document.getElementById("chatText"); //根据id获取聊天区域的对象，用于后面获取已有的聊天记录 var charBody=document.getElementById("chatBody"); //先获取输入框中输入的聊天内容，判断是否为空，不为空，则继续执行程序。 if(chatText.length>0){ //获取当前聊天区域已有的聊天内容 var str=; //产生一个随机数,取整，以它为下标，从数组中随机获取头像和昵称 var iNum=Math.floor(Math.random()*3); //定义一个字符串变量，用来保存头像信息 var headStr="<div><img src=images/"+headImg[iNum]+"></div>"; //定义一个字符串变量，用来保存昵称信息 var userName="<p>"+uName[iNum]+"</p>"; //定义一个字符串变量，用来保存当前输入的内容 var chatStr="<div name='chatFrame'>"+chatText+"</div>"; //定义一个字符串变量，保存当前聊天的头像、昵称和内容 var currentStr="<section>"+headStr+username+chatStr+"</section>"; //将上述字符串显示在聊天区域 chatBody.innerHTML=str+currentStr; //获取name='chatFrame'的所有聊天输入内容的对象 //通过for循环，给每条聊天记录添加样式chatContent for() //清除文本框中的内容 chatText[i].remove(); } }

这段代码是用来实现一个基于网页的聊天系统的，其中定义了一个保存聊天者图像和昵称的数组，以及获取页面上的发送按钮对象和聊天输入框对象等。在点击“发送”按钮时，会获取输入框中输入的聊天内容，判断是否为空，如果不为空，则随机选择一个头像和昵称，然后将聊天记录和头像、昵称信息拼接成一个字符串，并显示在聊天区域中。同时，通过 for 循环给每条聊天记录添加样式 chatContent。最后，清除文本框中的内容。

lblfontChoose.addMouseListener(new MouseAdapter() { @Override public void mouseClicked(MouseEvent e) { JColorChooser colorChooser = new JColorChooser(); Color color = colorChooser.showDialog(ChatFrame.this, "字体颜色", Color.BLACK); //字体改变 FontSupport.setFont(sendPane, color, fontFamilyCmb.getSelectedItem().toString(), Font.BOLD, 60); } });

这段代码是一个MouseListener的实现，当lblfontChoose被鼠标点击时，会弹出一个颜色选择器(colorChooser)，让用户选择字体颜色。选择后，代码会调用FontSupport类的setFont方法，将发送文本框(sendPane)的字体颜色(color)、字体(fontFamilyCmb.getSelectedItem().toString())、粗细(Font.BOLD)、大小(60)进行修改。