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

Posted 2023-02-23

【中文标题】单击“阅读更多”链接时截断并显示或隐藏链接文本

【英文标题】：Truncate and show or hide the link text when clicking on "read more" link

【发布时间】：2019-03-14 16:03:00

【问题描述】：

如果限制超过 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 )+ '...';
                

---

编辑：上面的代码可以工作，但是当点击“阅读更多”时，它会应用于显示链接的所有表格列。

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

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

【问题讨论】：

请提供您的数据对象和模板

更新了我的通话方式。如果超出限制文本，需要翻转显示/隐藏内容。

使用计算属性检查我的答案

你需要更明确地说明你想要什么，你有两个答案，对你想要什么有两种不同的解释

查看示例输入和所需输出会很有帮助。

【参考方案1】：

使用 v-ifv-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 处理程序，并且可能使用对摘要做出反应的计算属性而不是过滤器。

【讨论】：

感谢您的消息，我将此解决方案应用于表格网格格式，但它适用于所有记录而不是特定单元格值。 （添加了已编辑问题的详细信息）。

【参考方案2】：

您可以使用computed 属性来处理这种情况，当您单击链接时，将显示整个链接文本：

编辑

我建议通过更改您的datasource 并通过修改mounted 挂钩中的每个单元格来构建以下解决方案，"id":0 将是"id":txt:0,toggled:true，"informations":"..." 将是"informations":txt:"...",toggled:false 等等。当您单击一个单元格时，您只会将其toggled 属性修改为false

// 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 
      toggle: false,
      link: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum augue eros, varius in massa vitae, ultrices fringilla eros',
      showAll: false,
      columns: ["id", "name", "informations", "biliography"],
      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": "some info",
          "biliography": "some info"

        
      ]

    
  ,
  computed: 
    trunc_link() 
      return this.link.substring(0, 30)
    
  ,
  methods: 

    toggleFlag: function(index, column) 
      this.datasource[index][column].toggled = true;
    ,
    limitTo: function(value) 
      if (!value) return '';
      return value.substring(0, 50) + '...';
    

  ,
  mounted() 
    let d = [];
    d = this.datasource.map(item => 
      let o = 
        "id": 
          txt: item.id,
          toggled: true
        ,
        "name": 
          txt: item.name,
          toggled: true
        ,
        "informations": 
          txt: item.informations,
          toggled: false
        ,
        "biliography": 
          txt: item.biliography,
          toggled: false
        ,

      
      return o;
    );

    this.datasource = d;
    //console.log(this.datasource)
  
);

.readmore 
  color: #005faa!important;
  cursor: pointer;

<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>
  <table class="table-striped">
    <tbody>
      <tr v-for="(row,index) in datasource">
        <td v-for="column in columns" class="wrap-break-word" v-show="true">

          <span v-if="row[column].txt.length >= 50  && row[column].toggled == false" v-html="limitTo(row[column].txt)">
                                    </span><a class="readmore" v-on:click="toggleFlag(index,column)" v-show="!row['isEditable'] && row[column].txt.length >= 50  && row[column].toggled == false">Read more</a>
          <span v-if="(row[column].txt.length < 50  || row[column].toggled == true)" v-html="row[column].txt">
                                    </span>

          <td>
      </tr>
    </tbody>
  </table>
</div>