VueJs слушает метод window.resize

Vue.js
VueJs слушает метод window.resize

Vuejs сам по себе является фреймворком MVVM.

Но при наблюдении за событиями на окне часто кажется бессильным.

Например, на этот раз это window.resize

Ну, прежде чем я это сделал, я также погуглил. Я вижу, что всех волнует эта проблема.

Вопрос: Сегодня тоже столкнулся с такой проблемой, речь идет о канвасе адаптивном. Изменение ширины холста в соответствии со сменой окна

Примечания: Важные вопросы говорят, что ошибки в рамках в рамках структурной версии (Vue 2.x, ES6)

решение:

Вариант первый:

Шаг 1: сначала определите ширину записи в данных как атрибут

data: {
    screenWidth: document.body.clientWidth   // 这里是给到了一个默认值 （这个很重要）
}скопировать код

Шаг второй: нам нужно поговорить о событии reisze, когда vue монтируется на монтирование, о его методах.

        mounted () {
            const that = this
            window.onresize = () => {
                return (() => {
                    window.screenWidth = document.body.clientWidth
                    that.screenWidth = window.screenWidth
                })()
            }
        }скопировать код

Третий шаг: следите за изменением значения этого свойства, если есть изменение, передайте это значение в this.screenWidth

        watch: {
            screenWidth (val) {
                this.screenWidth = val
            }
        }скопировать код

Шаг 4. Оптимизируйте проблему, связанную с тем, что страница сильно зависает из-за частого срабатывания функции изменения размера.

        watch: {
            screenWidth (val) {
                if (!this.timer) {
                    this.screenWidth = val
                    this.timer = true
                    let that = this
                    setTimeout(function () {
                        // that.screenWidth = that.$store.state.canvasWidth
                        console.log(that.screenWidth)
                        that.init()
                        that.timer = false
                    }, 400)
                }
            }
        }скопировать код

Последний шаг: чтобы увидеть результаты, которые вы хотите ~

Вариант 2:

在vue 2.x 里面的时候，可以在 mounted 钩子中 全局监听 resize 事件，然后绑定的函数再做具体的处理。

也是亲测有效，比之前的方法会好很多。скопировать код
Добро пожаловать, чтобы рекомендовать, добро пожаловать, чтобы пометить
Категории