创新实训（十八）

最新推荐文章于 2024-05-31 00:29:56 发布

Merlin_Marico

最新推荐文章于 2024-05-31 00:29:56 发布

阅读量61

点赞数

本文链接：https://blog.csdn.net/Merlin_Marico/article/details/117408786

版权

这篇博客详细介绍了如何在Vue.js应用中创建一个景点门票展示组件，包括门票的名称、来源、类型、价格等信息。文章重点讲解了如何通过判断div高度来确定简介是否过长，以及实现展开和收起功能，以适应不同长度的门票描述。同时，还涉及到了动态设置div样式、使用v-html处理换行符以及在点击事件中跳转链接的实现方法。

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

景点门票的数据有门票名称、类型、价格、来源，以及一些其他的信息。

我想的布局方式依然是从上到下依次展示相关信息，但由于有些门票的详情过长，因此我需要写一个展开收起简介的方法。

首先我要判断简介是否过长，如果过长则显示展开收起按钮。但由于简介中有部分含有换行符，并不能直接通过字符串的长度判断，因此我采用了获取div高度的方式来对是否过长进行判断，如果该div高于我的设定值，则显示按钮，没高则不用显示。

接下来就是div高度的设定，在未展开状态，它的高度是固定的，并且不能使用滚动条，而在展开状态时，高度改为auto，就可以根据内容的多少来自动调整div的大小了。

对于内容中换行符的处理，可以在p标签中加入v-html="文字内容"的方式。这样显示出来的换行符就是换行了。

HTML部分：

<template>
  <div class="scenicTicket" >
    <!-- <a :href="link"> -->
        <div class="item">
            <el-row>
                <div class="name" @click="jump()">{{ name }}</div>
              </el-row>
            <el-row>
                <div class="from">
                  <i class="el-icon-s-promotion"></i>
                  {{from}}
                  </div>
            </el-row>
            <el-row>
                <div class="type" v-if="hasType">
                  <el-tag size="mini" effect="dark">{{type}}</el-tag>
                </div>
            </el-row>
              <el-row>
                  <div class="typeandbuy">
                <span class="price">
                    {{"¥"+price.replace(/¥/g, '')}}
                  </span>
                  <span class="buy" v-if="hasBuy">
                      {{"已售:"+buy}}
                  </span>
                  </div>
            </el-row>
              <el-row>
                  <div class="tags">
                <span class="isReturnable" v-if="hasReturn">
                  <el-tag type="info" size="mini">{{isReturnable}}</el-tag>
                  </span>
                  <span class="bookTime" v-if="hasBook">
                  <el-tag type="info" size="mini">{{bookTime}}</el-tag>
                  </span>
                  <span class="bookTime" v-if="hasOut">
                  <el-tag type="info" size="mini">{{outTime}}</el-tag>
                  </span>
                  </div>
            </el-row>
            <el-row>
                  <div class="useTime" v-if="hasUse">{{useTime}}</div>
            </el-row>
            <el-row>
                  <div class="discription" v-if="hasDis" :style="discription_style">
                      <p class="dis" v-html="discription" ref="getheight"></p>
                      </div>
                      <div class="open" v-if="hasButton"><el-button type="text" @click="showAll">{{buttontext}}</el-button></div>
            </el-row>
            <el-row>
                <div class="placehold"></div>
            </el-row>
        </div>
    <!-- </a> -->
  </div>
</template>

js部分：

export default {
  props: {
    name: {
      default: "暂无名称",
    },
    type: {
      default: "",
    },
    buy: {
      default: "",
    },
    from:{
      default:"",
    },
    isReturnable: {
      default: ""
    },
    bookTime:{
        default:""
    },
    outTime:{
        default:""
    },
    useTime:{
        default:""
    },
    discription:{
        default:""
    },
    price: {
      default: "暂无价格",
    },
    url: {
      default: "",
    },
  },
  data() {
    return {
        hasType:false,
        hasBuy:false,
        hasReturn:false,
        hasBook:false,
        hasOut:false,
        hasUse:false,
        hasDis:false,
        hasButton:false,
        showMore:true,
        buttontext:"展开",
      discription_style:"height:50px;overflow:hidden;margin-top: 8px;margin-left: 30px;margin-right: 30px;",
    };
  },
  methods: {
      jump() {
      window.open(this.url);
    },
    showAll(){
        if(this.showMore){
            this.discription_style="height:auto;margin-top: 8px;margin-left: 30px;margin-right: 30px;";
        this.showMore=false;
        this.buttontext="收起";
        }else{
            this.discription_style="height:50px;overflow:hidden;margin-top: 8px;margin-left: 30px;margin-right: 30px;";
        this.showMore=true;
        this.buttontext="展开";
        }
    },
    getHeight(){
      let height= this.$refs.getheight.offsetHeight;
      // if (height>50)
      console.log(height);
    }
  },
  mounted() {
      if(this.type!=""){
          this.hasType=true;
      }
      if(this.buy!=""){
          this.hasBuy=true;
      }
      if(this.isReturnable!=""){
          this.hasReturn=true;
      }
      if(this.bookTime!=""){
          this.hasBook=true;
      }
      if(this.outTime!=""){
          this.hasOut=true;
      }
      if(this.useTime!=""){
          this.hasUse=true;
      }
      if(this.discription!=""){
          this.hasDis=true;
          // console.log(this.discription.length)
      }
      
    this.$nextTick(()=>{ // 页面渲染完成后的回调
       let height = this.$refs.getheight.offsetHeight;
       if(height>=48){
         this.hasButton=true;
       }
    })
  },
};