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

路口儿

2024-04-24 帮助1人

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.百度.com/image_search/src=http://i.qqkou.com/i/2a3941746846x304715422b26.jpg&refer=http://i.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}}</span>
              <span v-if="item && item.link"
                >: <a :href="item.link" target="_blank">{{item.text}}</a></span
              >
            </span>
            <span v-if="item && item.align == 'right'">
              {{item.text}}<img
                style="
                  width: 50px;
                  height: 50px;
                  vertical-align: middle;
                  border-radius: 50%;
                  padding-right: 10px;
                  padding-left: 10px;
                "
                src="https://gimg2.百度.com/image_search/src=http://b-ssl.duitang.com/uploads/item/201803/18/20180318004321_pwzom.thumb.700_0.jpg&refer=http://b-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664679186&t=bcd6eae69e52a4d3f3c94aa54cd1b830"
                alt=""
              />
            </span>
          </div>
        </div>
        <div style="margin-top: 15px">
          <el-input
            placeholder="请输入内容"
            v-model="input3"
            class="input-with-select"
            :autofocus="true"
            ref="serachBox"
          >
            <el-button
              :loading="loading"
              @keydown.enter.native="handleMsg"
              slot="append"
              type="primary"
              @click="handleMsg"
              >发送</el-button
            >
          </el-input>
        </div>
      </el-dialog>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts@4.6.0/dist/echarts.simple.min.js"></script>
  <script>
    if (typeof Vue == "undefined") {
      document.write(
        unescape(
          ""
        )
      );
    }
    if (typeof VueRouter == "undefined") {
      document.write(
        unescape(
          ""
        )
      );
    }
    if (typeof Vuex == "undefined") {
      document.write(
        unescape(
          ""
        )
      );
    }
    if (typeof axios == "undefined") {
      document.write(
        unescape(
          ""
        )
      );
    }
  </script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: function () {
        return {
          visible: false,
          input3: "",
          list: [],
          loading: false,
        };
      },
      created: function () {
        document.addEventListener("keydown", (e) => {
          let key = window.event.keyCode;
          if (key == 13 && !this.loading) {
            // 13是enter键的键盘码 如果等于13 就调用click的登录方法
            this.handleMsg();
          }
        });
      },
      methods: {
        visible11() {
          this.visible = true;
          this.$nextTick(() => {
            this.$refs.serachBox.focus();
          });
        },
        async handleMsg() {
          console.log(this.input3, "发送信息");
          if (this.input3 !== "") {
            this.loading = true;
            await this.list.push({ align: "right", text: this.input3 });
            await this.scrollTop11();
            this.input3 = "";
            this.getMsg();
          }
        },
        getMsg() {
          // 处理自己的接口请求 返回需要的数据
          // axios
          //   .post("请求后端接口返回对话内容", { info: this.input3 })
          //   .then(async (response) => {
          //     console.log(response);
          //     if (response.status == 200) {

          //       // 自行处理需要的数据

          //       const msg = response.data;
          //       let listMsg = {
          //         align: "left",
          //         text: msg.answer,
          //         link: "",
          //       };
          //       if (msg.flag == 1) {
          //         const splitMsg = msg.answer.split("：");
          //         listMsg.text = splitMsg[0];
          //         listMsg.link = splitMsg[1];
          //       }
          //       await this.list.push(listMsg);
          //       await this.scrollTop11();
          //     }
          //     this.loading = false;
          //   })
          //   .catch(function (error) {
          //     console.log(error);
          //     this.loading = false;
          //   });

          /*
           * 模拟信息返回
           */
          setTimeout(async () => {
            let listMsg = {
              align: "left",
              text: "模拟信息返回",
              link: "",
            };
            await this.list.push(listMsg);
            await this.scrollTop11();
            this.loading = false;
          }, 1000);
        },
        // 处理滚动条一直保持最上方
        scrollTop11() {
          let div = document.getElementById("bigBox");
          div.scrollTop = div.scrollHeight;
        },
      },
    });
  </script>
</html>

实现效果

学新通

这篇好文章是转载于：学新通技术网

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

vue实现聊天框，模拟对话

代码展示

实现效果

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐