Question

我有一小盒文本。我要尝试的是，如果文本长度很大，请折叠div，然后有一个显示“ ...显示更多”的按钮，一旦按下该按钮将展开div。再按一次会使div崩溃。

很好，可以。

我现在有一个问题。 div最初设置为崩溃= true。显示“ ...显示更多”按钮。

我要更改的是，如果文本内容不长，则不会折叠，不会显示“显示更多”按钮。

模板

  <v-card v-show="showAccount" class="mb-4">
          <v-card-title class="title-container align-start">
      <div class="title-data" :class="{collapsed: isElementOverflown}" ref="title-data">
        <h1 class="title mb-2"><router-link :to="{name: 'profile', params: {account: account.account}}">{{ account.account }}</router-link></h1>
        <router-link v-if="isActiveUserAccount" :to="{name: 'account-image', params: {account: account.account}}">
          <v-avatar color="#c35219" size="56" class="mr-4 mb-2">
            <img v-if="accountMedia" :src="accountMedia" :alt="account.account" />
            <span v-else class="white--text headline">{{ account.account[0].toUpperCase() }}</span>
          </v-avatar>
        </router-link>
        <template v-else>
          <v-avatar color="#c35219" size="56" class="mr-4 mb-2">
            <img v-if="accountMedia" :src="accountMedia" :alt="account.account" />
            <span v-else class="white--text headline">{{ account.account[0].toUpperCase() }}</span>
          </v-avatar>
        </template>
        <div class="caption my-0" ref="bio">
          <nl2br v-if="account.about" tag="p" :text="account.about"></nl2br>
        </div>
      </div>
      <button v-if="showButton" type="button" style="font-size:small; margin: auto; margin-right: 5%" @click="toggleHeight">
        {{showMoreTextLabel}}
        </button>
    </v-card-title>

JS

      mounted() {
  // elements have been created, so the `ref` will return an element.
  // but the elements have not necessarily been inserted into the DOM yet.
  // you can use $nextTick() to wait for that to have happened.
  // this is espeically necessary if you want to to get dimensions or position of that element.
  this.$nextTick(() => {
    console.log("refs", this.$refs);  // logs correct this.$refs
    console.log("$refs.title-data", this.$refs["title-data"]); //undefined

    let el = this.$refs["title-data"];
    if (el.offsetHeight < el.scrollHeight || el.offsetWidth < el.scrollWidth) {
      this.isElementOverflown = true;
      this.showButton = true;
    }
  })
},



toggleHeight() {
        if (this.$refs && 'title-data' in this.$refs) {
          this.$refs['title-data'].classList.toggle('collapsed');
          this.$refs['title-data'].classList.contains('collapsed')
                  ? this.showMoreTextLabel = "...show more"
                  : this.showMoreTextLabel = "...show less";
        }
      },

在mounted中出现一个错误 this.$refs[“title-data”]未定义，但 This.$refs在那，它显示正确的参考。我不确定为什么。

谢谢您的帮助！

Answer 1

您可以创建一个计算属性，以检查文本的长度是否超过给定的数字。

    computed: {
             isTextLengthLongEnough() {
              if(el.offsetHeight > 150) {
              this.showButton = true;
                }
              }

然后，您可以使用v-if检入模板，计算出的属性是true还是false，然后显示按钮。

Answer 2

不幸的是，我无法获得以上任何一个答案。 el的定义是不确定的，因此，如果有人可以根据我如何获得el的代码向我解释，那就太好了。

我做了一些工作，但不是很理想，但是它可以在我在oc set env dc/proj MQCERTLABL=ibmwebspheremqod99usr中有代码的地方工作，所以我现在就开始讨论。非常感谢大家的帮助

这是我使用的代码

updated

根据另一个元素vue的属性有条件地渲染div

2 个答案: