单击“阅读更多”链接时,截断并显示或隐藏链接文本?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (151)

我想隐藏文本,如果限制超过300个字符并显示link和如果点击链接然后显示完整的内容。

HTML:

 <tr v-for="(row,index) in datasource">
                            <td v-for="column in gridSchema.grid.columns" class="wrap-break-word" v-show="column.isVisible">  

<span v-if="row[column.headername].length >= 300  && toggle == false" v-html="$options.filters.limitTo(row[column.headername])">
                                    </span><a v-on:click="toggleFlag()" v-show="!row['isEditable'] && row[column.headername].length >= 300  && toggle == false" >Read more</a>
                                    <span v-if="(row[column.headername].length < 300  || toggle == true)" v-html="row[column.headername]">
                                    </span>

<td>
</tr>

JS:

  data: {
                ..
                    toggle: false,
datasource:
[
      {
        "id": 0,
        "name": "Christa Hansen",
        "informations": "Unpleasant astonished an diminution up partiality. Noisy an their of meant. Death means up civil do an offer wound of. Called square an in afraid direct. Resolution diminution conviction so mr at unpleasing simplicity no. No it as breakfast up conveying earnestly immediate principle. Him son disposed produced humoured overcame she bachelor improved. Studied however out wishing but inhabit fortune windows. "
        "biliography":"Remember outweigh do he desirous no cheerful. Do of doors water ye guest. We if prosperous comparison middletons at. Park we in lose like at no."
     },
      {
        "id": 1,
        "name": "Mckenzie Fuller",
        "informations":"Did shy say mention enabled through elderly improve."
        "biliography":" It ye greatest removing concerns an overcame appetite. Manner result square father boy behind its his. Their above spoke match ye mr right oh as first. Be my depending to believing perfectly concealed household. Point could to built no hours smile sense. "
      },
      {
        "id": 2,
        "name": "Oneal Clark",
        "informations": "-",
        "biliography":"-"

      }
    ]
               ..
            }
    methods:{

    toggleFlag: function () {
                    console.log('within toggleflag final');
                    this.toggle = !this.toggle;
                }

    },
     filters: {
                limitTo: function (value) {
                    if (!value) return '';
                    return value.substring(0, 300 )+ '...';
                }

编辑:上面的代码有效,但是当点击“阅读更多”时,它会应用于表的所有列,只要它显示链接。

示例:Table Row的col1,col5超过300个字符并显示“read more”链接。当单击col1的“read more”链接时,它也适用于col5,并且所有行都会扩展列的文本。它应该适用于特定行和特定单元格。

添加了数据源对象。我添加了静态数据源,但它是动态的,并且因列数而异。

提问于
用户回答回答于

使用v-if v-if="obj.informations.length > 300"

例:

<div v-if="summary">
  {{ obj.informations | linitToDisplay(300) }}
  <a v-if="obj.informations.length > 300" @click="summary = false">Read more<a>
<div v-else>
  {{ obj.informations }}
</div>

但是您可能会编写toggleSummary()方法而不是内联summary = false处理程序,并且可能使用计算属性来响应摘要而不是过滤器。

用户回答回答于

您可以使用computed属性来处理该情况,当您单击该链接时,将显示整个链接文本:

// ignore the following two lines, they just disable warnings in "Run code snippet"
Vue.config.devtools=false; 
Vue.config.productionTip = false;

new Vue({
  el: '#app',

  data() {
    return {
      link:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum augue eros, varius in massa vitae, ultrices fringilla eros',
     showAll:false
    }
  },
  computed:{
   trunc_link(){
   return this.link.substring(0,30)
   }
  }
  
  });

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

   <div id="app" class="container">

    <a href="#" v-if="!showAll" @click="showAll=true"> {{trunc_link}}...</a>
    <a href="#" v-else> {{link}}</a>
    </div>

所属标签

可能回答问题的人

  • 人生的旅途

    10 粉丝484 提问6 回答
  • 无聊至极

    4 粉丝504 提问6 回答
  • 富有想象力的人

    4 粉丝0 提问4 回答
  • 找虫虫

    2 粉丝0 提问4 回答

扫码关注云+社区

领取腾讯云代金券