vue+vant仿微信聊天画面做了个点击按钮出现土味情话的界面

最新推荐文章于 2024-08-11 18:09:16 发布

一行代码七个报错

最新推荐文章于 2024-08-11 18:09:16 发布

阅读量5.9k

点赞数 3

文章标签： android

本文链接：https://blog.csdn.net/m0_61084402/article/details/123986734

版权

本文介绍了使用Vue和Vant组件库自定义搭建微信聊天界面的过程，重点在于创建气泡框的角部效果，利用了CSS伪元素类。虽然Vant中没有现成的聊天框组件，但通过自己的努力成功实现了这一功能。代码中还包含了JS逻辑和HTTP请求的封装，简化了调用。由于API响应速度慢，随机头像功能被注释，可按需启用。

摘要由CSDN通过智能技术生成

最近在学习框架vue，不得不说vue确实上手快，但用的vant组件库里找了老半天都没找到聊天框样式的组件，啧，实在想用，就自己搭了个，其实就这个气泡框的角花了点时间，用到了伪元素类。

效果图如下：

直接上代码

页面结构代码：

<template>
  <div class="main">
    <!-- 仿微信的聊天框 -->
    <!-- 顶部导航栏 -->
    <van-sticky :offset-top="0">
      <div class="tar">
        <van-nav-bar
          title="对方正在娇羞中..."
          left-arrow
          @click-left="onClickLeft"
          class="tar_back"
        >
          <template #right>
            <van-icon name="ellipsis" size="18" />
          </template>
        </van-nav-bar>
      </div>
    </van-sticky>

    <!-- 长按淡出气泡提示框 -->
    <van-popover
      v-model="showPopover"
      trigger="manual"
      :actions="actions"
      placement="right-end"
      :offset="[0, -130]"
      @select="onSelect"
    >
      <template #reference>
        <!-- <div class="content">
          <span
            v-html="content"
            @touchstart="start()"
            @touchend="end()"
            @click="showPopover = false"
          ></span>
          <p>长按可以点赞收藏哦~</p>
        </div> -->

        <!-- 聊天内容 -->
        <div
          @touchstart="start()"
          @touchend="end()"
          @click="showPopover = false"
          class="content"
        >
          <ul>
            <li
              v-for="(item, index) in loveArray"
              :key="index"
              :class="'text-' + item.class"
              :style="{ '--url': item.url }"
            >
              <span>{
  { item.text }}</span>
            </