vue实现聊天框，模拟对话附上html

最新推荐文章于 2024-06-15 21:29:25 发布

路口儿

最新推荐文章于 2024-06-15 21:29:25 发布

阅读量4.1k

点赞数 6

分类专栏： vue2 js 文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/m0_47415644/article/details/126659982

版权

vue实现聊天框，模拟对话

代码展示

// An highlighted block
<!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}}