vue让文章展开和收起组件

最新推荐文章于 2024-07-11 11:41:59 发布
最新推荐文章于 2024-07-11 11:41:59 发布
阅读量758 收藏 1
点赞数
文章标签： vue.js
原文链接：https://blog.csdn.net/qq_40195282/article/details/111086045?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163394683216780271510424%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=163394683216780271510424&biz_i
版权

vue展开收起组件

<template>
  <div class="dynamic-wrap">
    <div class="overlay" v-if="show_done" @click="show_done=false">

    </div>
    <div class="dynamic-top">
      <div class="left">
        <van-image @click="$router.push('/profile?id='+item.user_id)" class="avatar" fit="cover" lazy-load round :src="item.avatar" />
        <div class="dynamic-by">
          <div class="username" @click="$router.push('/profile?id='+item.user_id)">
            {{item.username}}
            <div class="top" v-if="item.admin_top===1">
              <img class="BanSelected" src="@/assets/image/dingzi.png" alt="">
              置顶</div>
          </div>
          <div class="create-at" @click="$router.push('/community/article-detail?id='+item.id)">
            {{item.time}}
          </div>
        </div>
      </div>

      <div class="right" v-if="$store.getters.id!=item.user_id">
        <div @click="show_done=!show_done">
          <img src="@/assets/image/dosome.png" alt="" class="BanSelected">
        </div>
        <div class="do-tiezi" v-if="show_done">
          <div class="do" @click="$router.push('/chat/chat-page/'+item.user_id+'?name='+item.username)">
            私聊
          </div>
          <div @click="like_user()" class="do" v-if="item.is_like==1">
            取消关注
          </div>
          <div @click="like_user()" class="do" v-else>
            关注
          </div>
          <div class="do" @click="$router.push('/community/report?article_id='+item.id)">
            举报
          </div>
        </div>
      </div>
    </div>
    <div class="dynamic-content">
      <!-- <div class="dynamic-text" @click="$router.push('/community/article-detail?id='+item.id)">{{item.content}}</div> -->
      <template v-if="maxLines=0">
          <div ref="desc"  :class="showExchangeButton==true?'dynamic-text':'dynamic-texts'">{{item.content}}

            <div v-if="showExchangeButton" class="more"  @click="getMore(item.id)">展开全文</div>
          </div>
          

      </template>
      <TextOverflow class="dynamic-text" :text="item.content" :width="400" :maxLines="5">
  <template v-slot:default="{ clickToggle, expanded }">
    <button @click="clickToggle" class="btn">
      {{ expanded ? "收起" : "展开" }}
    </button>
  </template>
</TextOverflow>
     
      <div class="video-wrap" v-if="item.video">
        <Video :videoUrl="item.video">
        </Video>
      </div>

      <div @click="$router.push('/community/article-detail?id='+item.id)">
        <div class="dynamic-imglist-1" v-if="item.img.length==1">
          <van-image class="dynamic-img-1" fit="cover" lazy-load :src="item.img[0]" />

        </div>
        <div class="dynamic-imglist-2" v-if="item.img.length==2">
          <van-image class="dynamic-img-2" fit="cover" lazy-load :src="item.img[0]" />
          <van-image class="dynamic-img-2" fit="cover" lazy-load :src="item.img[1]" />

        </div>
        <div class="dynamic-imglist-3" v-if="item.img.length>2">
          <img v-if="item.img.length>3" class="img-more" src="@/assets/image/img4.png" alt="">
          <van-image class="dynamic-img-3-1" fit="cover" lazy-load :src="item.img[0]" />
          <div class="right">
            <van-image class="dynamic-img-3-2" fit="cover" lazy-load :src="item.img[1]" />
            <van-image class="dynamic-img-3-2" fit="cover" lazy-load :src="item.img[2]" />

          </div>

        </div>
      </div>

      <div class="tagList">
        <div class="user-tag delete-able" v-for="(item,id) in item.label" :key="id">
          #{{item}}
        </div>

      </div>

    </div>
    <div class="dynamic-bottom">
      <div class="bottom-left">
        <img v-if="item.address" src="@/assets/image/location.png" alt="">
        {{item.address}}
      </div>
      <div class="bottom-right">
        <div class="do-wrap" @click="toShare()">
          <img src="@/assets/image/share-tiezi.png" alt="" class="BanSelected">
          {{item.share}}
        </div>
        <div class="do-wrap" @click="$router.push('/community/article-detail?id='+item.id)">
          <img src="@/assets/image/commit-tiezi.png" alt="" class="BanSelected">
          {{item.comments_count}}
        </div>
        <div class="do-wrap" @click="like()">
          <img v-if="item.is_like_article==0" src="@/assets/image/like-tiezi-default.png" alt="" class="BanSelected">
          <img v-else src="@/assets/image/like-tiezi-active.png" alt="" class="BanSelected">
          {{item.likes_count}}
        </div>

      </div>
    </div>

  </div>
</template>
<script>
import { likeArticle, likeUser, shareArticle } from "@/api/community";
import moment from "moment";
import wx from "weixin-js-sdk";
import { getUserInfo, qrcode } from "@/api/profile";
import Video from "@/components/Video";
import TextOverflow from '@/components/Overflow'
export default {
  data() {
    return {
      show_done: false,
      showExchangeButton:false,
      maxLines: 4,
    };
  },

  name: "",
  components: {
    Video,
    TextOverflow
  },
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  created() {
    this.time = this.getTime(this.item.created_at);
    // console.log(this.time)
    // let getList=this.item
  
       
      
  },
  computed: {},
  mounted(){
    this.init()
    //  const lastWidth = this.$refs.desc.getClientRects();
    // console.log(lastWidth)
    // console.log(this.$refs.desc.getClientRects())
  },
  methods: {
     init(){
         
            // let descHeight =parseInt(window
            // .getComputedStyle(this.$refs.desc)
            // .height.replace("px", ""))
            // // console.log(typeof(descHeight))
            // let add = parseFloat(this.getRem());
            // // console.log(typeof(add))
            // //  console.log(descHeight)
            // // console.log(5.25*add)
            // // console.log(`-------------------`);
            // // console.log(descHeight - 5.25 *add);
            // if(descHeight  > 5.25 * add){
            //   this.showExchangeButton = true;
            //   // console.log('超过4行')
            // }
        },
          // console.log("descHeight:" + descHeight)
    getRem() {
      const defaultRem = 16;
      let winWidth = window.innerWidth;
      let rem = (winWidth / 375) * defaultRem;
      return rem;
    },
    getMore(id){
     this.showExchangeButton=!this.showExchangeButton
      // console.log(id)
      
      // console.log(this.$refs.desc.getClientRects())
      
    },
    toShare() {
      this.loading = this.$loading();
      shareArticle({
        id: this.$route.query.id
      });
      qrcode({
        url: "/community/article-detail?id=" + this.item.id
      }).then(res => {
        this.loading.hidden();
        if (res.code === 200) {
          wx.miniProgram.navigateTo({
            url: `/pages/case-share/case-share?params=${encodeURIComponent(
              JSON.stringify({
                width: "622rpx",
                height: "826rpx",
                views: [
                  {
                    type: "image",
                    url:
                      "https://zhixiu-picture.oss-cn-shanghai.aliyuncs.com/40bdfcc9ca8b9414b41801fd2a622a82086ae107.png",
                    css: {
                      top: "0rpx",
                      left: "0rpx",
                      width: "626rpx",
                      height: "826rpx"
                    }
                  },
                  {
                    type: "image",
                    url: res.data.url,
                    css: {
                      top: "534rpx",
                      left: "198rpx",
                      width: "232rpx",
                      height: "232rpx",
                      borderRadius: "50%"
                    }
                  },

                  {
                    type: "image",
                    url: this.item.avatar,
                    css: {
                      top: "60rpx",
                      left: "248rpx",
                      width: "130rpx",
                      height: "130rpx",
                      borderRadius: "50%",
                      borderWidth: "4rpx",
                      borderColor: "#fff",
                      borderStyle: "solid"
                    }
                  },

                  {
                    type: "text",
                    text: this.item.content.slice(0, 45) + "...",
                    css: {
                      fontSize: "28rpx",
                      fontweight: 400,
                      color: "#FFFFFF",
                      top: "238rpx",
                      left: "70rpx",
                      width: "486rpx",
                      lineHeight: "40rpx",
                      fontFamily: "PingFangSC-Regular,PingFang SC"
                    }
                  }
                ]
              })
            )}`
          });
        }
      });
    },
    like_user() {
      likeUser({
        id: this.item.user_id
      }).then(res => {
        if (res.code == 200) {
          /* this.$toast.success("操作成功"); */
          this.show_done = false;
          this.item.is_like = this.item.is_like == 0 ? 1 : 0;
        }
      });
    },
    like() {
      likeArticle({ id: this.item.id }).then(res => {
        if (res.code === 200) {
          /*       this.$toast.success("操作成功"); */
          this.item.is_like_article = this.item.is_like_article == 0 ? 1 : 0;
          if (this.item.is_like_article == 0) {
            this.item.likes_count--;
          } else {
            this.item.likes_count++;
          }
        }
      });
    },
    getTime(time) {
      moment.locale("zh-cn");
      /*  if(moment(time).) */
    }
  },
  watch:{
    
  }
};
</script>
<style lang="scss" scoped>
.dynamic-wrap {
  margin-bottom: 0.76rem;
  .dynamic-bottom {
    padding-left:1rem;
    display: flex;
    justify-content: space-between;
    .bottom-right {
      display: flex;

      .do-wrap {
        font-size: 0.24rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        display: flex;
        align-items: center;
        margin-right: 0.42rem;

        &:last-child {
          margin-right: 0;
        }
        img {
          width: 0.36rem;
          margin-right: 0.1rem;
        }
      }
    }
    .bottom-left {
      display: flex;
      align-items: center;
      font-size: 0.24rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      img {
        width: 0.22rem;
        height: 0.24rem;
        margin-right: 0.16rem;
      }
    }
  }
  .dynamic-content {
    // text-align: justify;
    position: relative;
    /*   z-index: -1; */
    margin: 0.28rem 0 0.34rem;
    padding-left: 1rem;
    padding-right: 0.3rem;
    .dynamic-imglist-2 {
      display: flex;
      justify-content: space-between;
    }
    .dynamic-imglist-3 {
      display: flex;
      justify-content: space-between;
      position: relative;
      .img-more {
        position: absolute;
        bottom: 0.1rem;
        right: 0.1rem;
        width: 0.86rem;
        z-index: 99;
        height: 0.3rem;
      }
      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }
    .dynamic-text {
      font-size: 0.28rem;
      font-family: PingFang-SC-Regular, PingFang-SC;
      font-weight: 400;
      color: #333333;
      margin-bottom: 0.2rem;
      white-space: pre-wrap;
      // overflow: hidden;
      // text-overflow: ellipsis;
      // display: -webkit-box;
      // -webkit-line-clamp: 4;
      // -webkit-box-orient: vertical;
      // word-break: break-word;
      // position: relative;
      // margin: 0;
     
      // text-indent: -12em;
        /*尾部留空字符数*/
        // padding-right: 4em;
        // width: 80%;
        // height: 10%;

      // width: 80%;
    }
    // .dynamic-text:after{
    //   // position:absolute; left:0; bottom:0; width:100%; height:1px; border-bottom:1px solid #000; content:"";
    // }
    // .dynamic-texts {
    //   font-size: 0.28rem;
    //   font-family: PingFang-SC-Regular, PingFang-SC;
    //   font-weight: 400;
    //   color: #333333;
    //   // margin-bottom: 0.2rem;
    //   margin-bottom: 0.2rem;
    //   white-space: pre-wrap;
    //   // overflow: hidden;
    //   // text-overflow: ellipsis;
    //   // display: -webkit-box;
    //   // -webkit-line-clamp: 4;
    //   // -webkit-box-orient: vertical;
    // }
  
    .btn{
      font-size: 0.28rem;
      font-family: PingFang-SC-Regular, PingFang-SC;
      color: #1678ff;
    }
    .dynamic-img-1 {
      width: 2.72rem;
      height: 3.81rem;
      border-radius: 0.14rem;
      overflow: hidden;
    }
    .dynamic-img-2 {
      width: 2.72rem;
      height: 2.72rem;
      border-radius: 0.14rem;
      overflow: hidden;
    }
    .dynamic-img-3-1 {
      width: 3.68rem;
      height: 3.59rem;
      border-radius: 0.14rem;
      overflow: hidden;
    }
    .dynamic-img-3-2 {
      width: 1.74rem;
      height: 1.74rem;
      border-radius: 0.14rem;
      overflow: hidden;
    }
  }
  .dynamic-top {
    display: flex;
    justify-content: space-between;
    /*     align-items: center; */
    .right {
      position: relative;
      margin-top: 0.1rem;
      .do-tiezi {
        position: absolute;
        right: 0;
        top: 0.42rem;
        z-index: 9999999999;
        width: 1.34rem;
        height: 1.74rem;
        background: #ffffff;
        box-shadow: 0rem 0.04rem 0.08rem 0rem rgba(0, 0, 0, 0.1);
        border-radius: 0.16rem;
        border: 0.01rem solid rgba(0, 0, 0, 0.04);
        display: flex;
        flex-direction: column;
        .do {
          font-size: 0.24rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      /*   margin-top: 0.22rem; */
      img {
        width: 0.34rem;
        height: auto;
      }
    }
    .left {
      display: flex;
      .avatar {
        width: 0.8rem;
        height: 0.8rem;
      }
      .dynamic-by {
        margin-left: 0.24rem;
        .username {
          font-size: 0.32rem;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #666666;
          margin-bottom: 0.02rem;
          display: flex;
          align-items: center;
          .top {
            margin-left: 0.2rem;
            font-size: 0.24rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #5599f6;
            background: #f5f9fe;
            display: flex;
            align-items: center;
            width: 1.06rem;
            justify-content: center;
            border-radius: 0.19rem;
            img {
              width: 0.16rem;
              height: 0.2rem;
              margin-right: 0.08rem;
            }
          }
        }
        .create-at {
          font-size: 0.24rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
        }
      }
    }
  }
  .tagList {
    display: flex;
    margin-top: 0.32rem;
    overflow-x: auto;
    .user-tag {
      flex-shrink: 0;
    }
  }
  .delete-able {
    background: rgba(51, 132, 245, 0.1);
    position: relative;
    font-size: 0.24rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1678ff;
    margin-right: 0.2rem;
    margin-bottom: 0.2rem;
  }
}
.BanSelected{
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-select:none;
  -o-user-select:none;
  user-select:none;
}
</style>
不爱敲代码的小强
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 - 实现任意内容展开 / 收起功能组件插件，点击查看更多内容控制段落文字展开折叠效果，支持自定义多少行隐藏、展开折叠按钮自定义位置、自动计算展开和收起功能、插槽 slot 形式自定义各种样式
王佳斌
09-13 5004
vue3展开收起折叠插件组件详细教程，vue3展开收起功能，vue3中实现点击收起和展开效果功能，vue3多行文本展开收起组件，vue3容器div如何点击展开和折叠收起，vue3中实现展开收起操作,动态改变元素高度，vue3怎么实现点击展开点击收起效果，vue怎么让div内容少时显示展开内容多时显示折叠，内容展开收起Vue3组件插件，vue3实现任意内容展开收起功能组件，vue3实现超过固定高度后出现展开折叠按钮，控制多行文字展开收起示例，vue3中文本内容超出规定行数后展开收起，vue3内容展开收起动画过
微信小程序 - 最新详细实现文本内容展开和收起功能，支持单行、多行文字折叠与展开自动识别是否需要折叠隐藏下文组件插件，无论屏幕尺寸或文字大小均可自动收缩展现，当内容超过n行后显示省略号及展开收起按钮！
最新发布
王佳斌
08-10 2608
微信小程序，vue2，vue3，文字展开收起，文本text如何超出指定行数后折叠起来，当点击展开时把全部文本显示出来，微信小程序文字展开收起功能，不定高展开收缩组件，高度不确定，文字大小，当一行文字过多时显示省略号，显示展开，展开和收起，长多行文本内容展开与收起单行文本溢出隐藏，显示省略号的同时，实现展开收起功能，全文收起，长文本收缩展开，展开/收起省略号点击后展示内容，展示固定行数，查看更多，超出固定行数，折叠展开效果，收起按钮，大段文本内容过多，实现折叠与展开效果，两行溢出隐藏并显示展开按钮，带动画，超
vue.js 实现点击展开收起动画效果
12-29
最近公司项目加了个页面，其中要求是这样的，点击对应列表，展开和收起，其实就是显示和隐藏内容部分；说来惭愧，我花了半天时间才搞出来（自黑一下~），接下来分享给大家，先上效果图： vue页面： 2018年0{{index+6}}月
vue实现展开收起
weixin_41784462的博客
07-13 5631
需求示例 前端界面中存在展开收起功能，dome高度超过100px，前端展示展开收起功能。收起->100px，展开->自适应高度；dome高度小于100px，不展示操作按钮。dome高度存在动态变化的可能
Vue的展开收起动画
qq_40673807的博客
07-11 517
当内容过多的时候 可以把它全部折叠起来 这样可以达到眼不见心不烦的效果。这里的核心部分就是icon的角度变化和卡片的高度以及过渡动画了。
Vue实现 展开 / 收起 功能
热门推荐
前端菜菜DayDayUp的博客
04-25 1万+
实现数据超过一定的量就显示 展开/ 收起 功能；如下图所示： 参考代码：核心在于 计算属性 computed 中； 注意： 开发中key的值尽量不要使用下标index； // template：循环的时候直接⽤showHandleList进⾏操作，显⽰收起的事件直接⽤showAll = !showAll 进⾏控制，改变这个值的真假 <template> <div class="hello"> <!-- 数据展示 --> <di...
vue 展开全文，收起全文
qingqing37的博客
03-14 578
【代码】vue 展开全文，收起全文。
vue展开收起
weixin_52923266的博客
01-30 445
默认显示展开按钮,点击展开显示全部数据,展开按钮变成收起.使用计算属性computed判断数组个数实现效果。
vue实现多行文本展开收起组件
qq_40195282的博客
12-12 5593
一、内容简介 多行文本展开收起功能现在已经算是一个非常常见的效果了，之前写过一篇文章也是用vue实现了文本展开收起功能。一年过去了，是时候展示真正的技术了^ _ ^。这次实现一个效果更好的组件： 效果预览： 二、实现思路 getClientRects: 先来看下这个api可以得到什么 <template> <div id="app"> <div class="over-ellipsis"> <span ref="overEllipsis
vue 点击展开显示更多(点击收起部分隐藏)
10-17
通过这种方式，我们可以实现一个简单的Vue组件，该组件能够根据用户的交互行为动态地显示或隐藏列表中的数据，提高页面的可读性和交互性。在实际开发中，这种功能可以应用于各种列表展示场景，如商品列表、文章列表...
微信小程序 - 实现文本展开与收起功能组件（初始时隐藏文字内容，当点击查看更多时展开）点击隐藏和点击显示 / 折叠与展开 / 大段文本内容过多，实现折叠与展开效果 ，超详细代码注释文章教程源码插件
王佳斌
10-25 5726
微信小程序，文字展开收起，全文收起，长文本收缩展开，展开/收起省略号点击后展示内容，展示固定行数，查看更多，超出固定行数，折叠展开效果，收起按钮，大段文本内容过多，实现折叠与展开效果，两行溢出隐藏并显示展开按钮，带动画，超过n行隐藏，文本text如何超出指定行数后折叠起来，展开和收起，长多行文本内容展开与收起单行文本溢出隐藏，显示省略号的同时，实现展开收起功能，当点击展开时把全部文本显示出来，微信小程序文字展开收起功能，不定高展开收缩组件，高度不确定，文字大小，当一行文字过多时显示省略号，显示展开，小程序怎
vue实现点击展开点击收起效果
08-27
主要介绍了vue实现点击展开,点击收起效果，首先我们需要定义data里面的数据，使用computed对data进行处理,需要的朋友可以参考下
ellipsis基于vue20的文本展开收起组件
08-12
基于vue2.0的【展开、收起】组件 为了更好的实现多文本能够按指定行数显示，并通过配置两个按钮进行展开与折叠
vue 展开收起（高度不固定，还要有平滑的过渡效果）
fengxiaopeng74的博客
02-04 5815
找了好多案例都不是很顺滑，最终还是功夫不负有心人，找到了一个非常棒的案例，只是简单地尝试一下，以后使用可以在进行全面的封装来公共使用 <template> <div class="panel"> <!-- body --> <transition name="panel-fade" @enter="enter" @before-leave="beforeLeave" @leave="leave"> <div cla..
vue封装一个多行文本展开收起的组件
weixin_54233971的博客
05-04 516
1、 利用css样式让展开收起按钮浮动后，与文本处在同一个空间内。2、通过动态样式，来切换展开和收起的不同文本样式和高度。
vue的展开收起功能
weixin_44727080的博客
12-07 3831
前言 ：之前有写过展开收起功能 感觉不是特别清楚，接下来重新再弄一份，备下次参考 这是这次需要实现内容的样式，需求是这样的 点击 库存量减少 下面就会出现它更多的信息内容。 第一步：这是页面上的 <div class="identify" > <p>属性</p> <span class="shuxing" @click="...
Vue2 长文本展开和收起
猫脸码客的博客
01-25 1383
长文本展示和收起
对于超出一行的文本进行（展开/收起）操作的vue组件，实测好用
MoYu的博客
06-29 1127
vue自定义组件
vue3查询条件展开和收起功能组件
12-28
查询条件展开和收起功能组件是一个常见的需求，特别是在搜索页面或者筛选页面中。Vue3作为一种流行的前端框架，可以很容易地实现这样的功能组件。 首先，我们可以使用Vue3中的响应式数据来控制查询条件的展开和收起状态。可以使用ref来定义一个变量来表示条件是否展开，然后在模板中使用v-if或者v-show指令来根据这个变量的值来展示或者隐藏查询条件的内容。当点击展开或者收起按钮时，可以通过改变这个变量的值来实现条件展开和收起的效果。 其次，我们可以使用Vue3中的组件化和组件通信的特性来将展开和收起功能封装成一个单独的组件。这个组件可以接受查询条件的内容作为插槽或者props传入，并且内部维护展开和收起的状态。通过定义一个toggle方法来改变展开和收起的状态，并且将这个方法暴露给父组件，这样就可以在父组件中触发展开和收起功能。 最后，为了提高组件的复用性和灵活性，我们可以在组件中定义一些自定义事件或者插槽，让父组件可以根据需要来定制展开和收起功能组件的样式和行为。 总之，通过Vue3的响应式数据、组件化和组件通信的特性，我们可以很方便地实现查询条件展开和收起功能组件，使得前端开发变得更加高效和灵活。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值