Показать больше / меньше кнопку с переходом

Question

Во-первых, простите за мой картофельный английский. Также это мой первый вопрос здесь.

Итак. Я работаю с Vuejs , но я не думаю, что это важно в этом случае. У меня есть HTML-строка, которая выглядит, например, так:

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

она генерируется на основе того, что автор поста напишет. Если сообщение слишком длинное, при загрузке страницы должно отображаться только несколько строк и должна быть кнопка Показать больше / меньше.

Я сделал свое решение, где использовал высоту с переходом, где начальная высота составляет около 500 пикселей, а затемэто вычислено с clientHeight. Но проблема в изображениях, иногда они здесь, иногда нет, высота изображений также всегда различна, поэтому они иногда будут разрезаны пополам или сделают текст, который будет разрезан пополам на последней строке, когда она сложена. Я тоже пытался использовать захват строк, и это как-то работало, но тогда я понятия не имею, как сделать это с transition , что важно здесь.

Возможно ли это вообще?

edit: Здесь - jsfiddle.net / sm2xLj5v / 9 (Не уверен, почему смонтированный не работает, поэтому я удалил v-if на теге <a>, но в целом он такой же.

Answer 1

    

    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 2

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

Смотрите приведенный выше фрагмент, если это соответствует вашим целям или нет.

my js fiddle: https://jsfiddle.net/shubhambattoo/god4se5k/6/

вы можете прочитать о переходах в vuejs: https://vuejs.org/v2/guide/transitions.html

Answer 3

Вы должны создать массив для хранения активных элементов.

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>