单击“阅读更多"时截断并显示或隐藏链接文本关联 [英] Truncate and show or hide the link text when clicking on "read more" link

问题描述

如果限制超过 300 个字符，我想隐藏文本并显示 link，如果点击链接则显示完整内容.

html:

 <td v-for="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 &&; 切换 == 假" >阅读更多</a><span v-if="(row[column.headername].length < 300 || toggle == true)" v-html="row[column.headername]"></span><td></tr>

js:

 数据:{..切换:假，数据源:[{身份证":0，"name": "克里斯塔·汉森",信息":令人不快的惊讶减少了偏爱.嘈杂他们的意思.死亡意味着向上民事做一个提供伤口的.称为方在害怕直接.决议减少信念所以先生在令人不快的简单没有.没有它作为早餐认真地传达直接的原则.他的儿子处理产生幽默克服了她的单身汉提高.学习但希望但居住的财富窗口."" 《传记》:记得重于不乐.做门水咋客.我们若兴旺比较中产.公园我们在输如无."},{身份证":1，"name": "麦肯齐·富勒","信息":"有没有害羞地说，通过老年人提高启用."《传记》:你们最大的消除顾虑是克服了胃口.方式结果方父男孩在其背后.他们上面说的匹配你们对哦作为第一.做我对相信完美隐藏的家庭的依赖.点可以建立没有小时的微笑感觉. "},{身份证":2，"name": "Oneal Clark","信息": "-",传记":-"}]..}方法:{切换标志:函数(){console.log('在toggleflag final 中');this.toggle = !this.toggle;}},过滤器:{limitTo:函数(值){如果 (!value) 返回 '';return value.substring(0, 300 )+ '...';}

<小时>

上面的代码有效，但当点击阅读更多"时，它会应用于表格的所有列，只要它显示链接.

示例:表行的 col1 、 col5 超过 300 个字符并显示阅读更多"链接.当单击 col1 的阅读更多"链接时，它也适用于 col5，并且所有行的列文本都将展开.它应该适用于特定的行和特定的单元格.

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

解决方案

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

示例:

{{ obj.informations |linitToDisplay(300) }}<a v-if="obj.informations.length > 300" @click="summary = false">阅读更多<a><div v-else>{{ obj.informations }}

但您可能会编写 toggleSummary() 方法而不是内联 summary = false 处理程序，并且可能使用对摘要做出反应的计算属性而不是过滤器.

I want to hide the text if limit exceed to 300 chars and show the link and if click on link then show the full content.

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 )+ '...';
                }

---

edit : above code works but when click on "Read More" then it applied to all the columns of table wherever it shows the link.

example: Table Row's col1 , col5 are exceed the 300 chars and shows the "read more" link. when click on col1's "read more" link then it also applies to col5 and both the column's text are expanded for all the rows. It should apply to particular row and particular cell.

added datasource object. I added static datasource but it is dynamic and varies for number of columns.

解决方案

Using v-if
v-if="obj.informations.length > 300"

Example:

<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>

But you'd probably write toggleSummary() method instead of the inline summary = false handler and maybe use computed property that reacts to summary instead of a filter.

这篇关于单击“阅读更多"时截断并显示或隐藏链接文本关联的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！