Question

首先，对不起我的土豆英语。这也是我的第一个问题。

所以。我与 Vuejs 合作，但是在这种情况下，我认为这并不重要。我有类似这样的html字符串-

<h1><strong>Lorem Ipsum</strong></h1><p>Some long text and the image - <img src="some-img-src"></p>

它是根据帖子作者将要写的内容生成的。如果发布时间过长，则在页面加载时，它应仅显示几行，并应显示“显示更多/更少”按钮。

我做了我的解决方案，其中我使用了带有过渡的高度，初始高度约为500px，然后使用clientHeight进行计算。但是问题在于图像，有时它们在这里，有时没有，图像的高度也总是不同的，因此有时它们会被切成两半，或者在折叠时在最后一行将文本切成两半。我也尝试使用线夹，但是它以某种方式起作用，但是后来我不知道如何使用 transition 来实现，这在这里很重要。

有可能吗？

编辑：此处-jsfiddle.net/sm2xLj5v/9（不确定为什么挂载无法正常工作，所以我在<a>标签上删除了v-if，但总体上还是一样。

Answer 1

您应该创建一个数组来存储活动项。

new Vue({
  el: '#app',
  data() {
    return {
      showMores: [],
      items: [
        {id: 21, content: 'test<br>hellow<br>world'}
      ]
    }
  },
  methods: {
    showMore(item) {
      if(this.showMores.indexOf(item.id)===-1) {
        this.showMores.push(item.id)
      } else {
        this.showMores.splice(this.showMores.indexOf(item.id), 1)
      }
    }
  }
})

.item {height: 22px; overflow: hidden; line-height: 20px}
.item.more {height: auto}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div class="content">
    <div class="item" :class="{more: (showMores.indexOf(item.id)!==-1)}" v-for="item in items">
      <button @click="showMore(item)">More</button><span v-html="item.content"></span>
    </div>
  </div>
</div>

Answer 2

    

    new Vue({
        el: '#app',
        data() {
          return {
            isshow:true,
            items: [
              {id: 21, content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, ex quisquam aperiam si delectus molestias fugit  dolores animi excepturi necessitatibus'}
            ]
          }
        },
        methods: {
          showMore() {
            this.isshow = !this.isshow
          }
        }
      })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
 
 <div id="app">
        <p v-if=isshow>{{items[0].content.substr(0, 20)}} <button @click="showMore()">Read more</button></p>
        <p v-else>{{items[0].content}}  <button @click="showMore()">Show less</button></p>
        </div>
    </div>

我希望这对您有用。现在您可以使用此逻辑。或者，您也可以共享自己的代码。

Answer 3

new Vue({
  el: "#app",
  data: {
    showAlert : false,
  },
  computed : {
    text () {
        return this.showAlert ? "Hide" : "Show";
    }
  },
  methods: {
    toggle: function(){
        this.showAlert = !this.showAlert;
    }
  }
})

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="app">
  <button class="btn btn-info" @click="toggle">
    {{text}}
  </button>
  <transition name="slide">
    <div class="mt-4" v-if="showAlert">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </transition>
</div>

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.slide-enter-active {
  animation: slide-in 1s ease-out forwards;
}

.slide-leave-active {
  animation: slide-out 1s ease-out forwards;
}

@keyframes slide-in {
  from {
    transform: translateY(50px);
    opacity: 1;
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slide-out {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(50px);
    opacity: 0;
  }
}

请参阅上面的代码段，以达到目的。

我的js小提琴：https://jsfiddle.net/shubhambattoo/god4se5k/6/

您可以了解有关vuejs中的转换的信息：https://vuejs.org/v2/guide/transitions.html

显示带有过渡的更多/更少按钮

3 个答案: