javascript - Vue 中测量溢出不正确

Question

我正在尝试使用标记进行溢出，标记会在开始时淡出以提示用户还有更多内容。这是它的样子:

我将渐变渐变作为 :after 放在 CSS 中，并通过 Vue 的 style binding“激活”它，当 scrollWidth > offsetWidth(溢出比框本身大)。

但问题是它有时(滞后？)落后并且没有正确计算 scrollWidth ，特别是当我输入一个长单词然后删除它时。它不“喜欢”那个，它说溢出是错误的，但盒子里没有标签。基本上会发生这种情况:

我试图将计算放在这个 $nextTick() 中，但它并没有解决问题。我还尝试使用 Vue 的 keyDown、keyUp 和 keyPress 监听器，但也没有解决这个问题。

这(也在 CodePen 上)演示了这个问题:

new Vue({
  el: '#tagsinput',
  data: {
    input_value: "",
    tags: []
  },
  methods: {
    addTag: function() {
      if (this.input_value > "") {
        this.tags.push(this.input_value)
        this.input_value = "";

        // Refocus the text input, so it stays at the end
        this.$refs.input.blur();
        this.$nextTick(function() {
          this.$refs.input.focus();
        })

      }
    },
    deleteTag: function() {
      if (this.input_value == "") {
        this.tags.pop()
      }
    }
  }
})

.outter {
  border: 1px solid red;
  width: 250px;
  overflow: hidden;
  display: flex;
}

.inner {
  border: 1px solid blue;
  margin: 2px;
  display: flex;
}

.tag {
  border: 1px solid black;
  margin: 2px;
}

input {
  min-width: 80px;
  width: 80px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.2/vue.min.js"></script>
<div id="tagsinput">
  <div class="outter" ref="outter">
    <div class="inner" ref="inner">
      <div class="tag" v-for="tag in tags">{{tag}}</div><input type="text" v-model="input_value" @keydown.enter="addTag" @keydown.delete="deleteTag">
    </div>
  </div>
  Outter div scrollwidth: {{ $refs.outter ? $refs.outter.scrollWidth : null }}<br> Outter div offsetWidth: {{ $refs.outter ? $refs.outter.offsetWidth : null }}<br>
  <br> Is overflowing: {{ ($refs.outter ? $refs.outter.scrollWidth : null) > ($refs.outter ?$refs.outter.offsetWidth : null) }}
</div>
<br><br> Type a really long word in, add and then delete it. "Is overflowing" will be the inverse, until you press Backspace <b>again</b>.

非常感谢任何帮助。

Answer 1

您应该在添加或删除标签后调用溢出检查，以便在正确的时间检查溢出。 Vue 不会像那样对内联条件进行数据绑定(bind)。以下代码应该适合您。它在 $nextTick 中调用一个 checkOverflow 函数，设置一个数据绑定(bind)变量 isOverflowed，然后您可以使用它来绑定(bind)一些样式。

new Vue({
    el: '#tagsinput',
    data: {
        input_value: null,
        tags: [],
        isOverflowed: false
    },
    methods: {
        addTag: function() {
            if(this.input_value) {
                this.tags.push(this.input_value)
                this.input_value = null;

                // Refocus the text input, so it stays at the end
                this.$refs.input.blur();
                this.$nextTick(function() {
                    this.$refs.input.focus();
                    this.checkOverflow()
                })
            }
        },
        deleteTag: function() {
            if(!this.input_value) {
                this.tags.pop()
                this.$nextTick(function() {
                    this.checkOverflow()
                })
            }
        },
        checkOverflow: function() {
            this.isOverflowed = (this.$refs.outter ? this.$refs.outter.scrollWidth : null) > 
                (this.$refs.outter ? this.$refs.outter.offsetWidth : null)
        }
    }
})

.outter {
    border: 1px solid red;
    width: 250px;
    overflow: hidden;
    display: flex;
}

.inner {
    border: 1px solid blue;
    margin: 2px;
    display: flex;
}

.tag {
    border: 1px solid black;
    margin: 2px;
}

input {
    min-width: 80px;
    width: 80px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="tagsinput">
    <div class="outter" ref="outter">
        <div class="inner" ref="inner">
            <div class="tag" v-for="tag in tags">{{tag}}</div>
            <input type="text" v-model="input_value" @keydown.enter="addTag" @keydown.delete="deleteTag" ref="input">
        </div>
    </div>
    <br>
    Is overflowing: 
    {{ isOverflowed }}
</div>
<br><br>
Type a really long word in, add and then delete it. "Is overflowing" will be the inverse, until you press Backspace <b>again</b>.