问题｜iframe监听时，菜单栏初始状态为放开时，点击按钮菜单栏可收缩；而菜单栏初始状态为防收缩时，点击按钮菜单栏呈放开状态。

解决思路：在菜单栏缩放按钮上绑定两个事件，作为区分是手动改变状态还是自动改变状态。

并使用存储作为判断条件进行判断。最后再刷新时，菜单栏回到放开状态。

⚠️：由于iframe监听传值时会多次触发，iframe有一个销毁事件，但一般可不用，如需避免多次触发，使用命名函数即可。

 

一个按钮绑定多个点击事件

Vue 中同一个元素可以绑定多个点击事件，且绑定的事件同时触发。

语法如下： 不同方法之间用；隔开。

应用场景：当需要判断一个元素是自动触发还是被动触发时。

<div @click="handleChange(); setSatus()" ></div>

 

-------------------------------------------------------------------------------------------------------------------------------------------

把一个项目的页面引入到另一个项目中，需要用到iframe。当点击子项目中的按钮触发父级项目的事件需要用iframe监听。

（具体描述，当模版点击新建或修改时且左侧菜单栏处于放开状态，进入下一页面时左侧菜单栏收起，返回时恢复放开状态；若菜单栏初始状态为收缩状态，则进入下一页面时不发生改变。）

示例如下：

• 子项目的按钮的页面

methods: {
    // iframe 回传数据
    iframeMessageSendleft () {
        window.parent.postMessage({ leftMenu: 'no' }, '*')
        localStorage.setItem('leftMenu', 'no')
    },
    //触发按钮时调用方法
    addContentClick () {
        this.iframeMessageSendleft()
    }
}

• 父项目要触发改变的页面

mounted () {
    // 刷新后菜单栏是放开状态
    window.localStorage.setItem('collapsed', 1)
    this.initCollapsed()
},
methods: {
    initCollapsed () {
        const _this = this
        // （父）接收监听window.addEventListener 命名函数————解决iframe.postMessage()多次触发请求问题
        window.onmessage = function (e) {
            if (e.data && e.data.leftMenu === 'no') {
                if (window.localStorage.getItem('collapsed') === '1') {
                    _this.handleChange()
                }
            }
        }
    },
    handleChange () {
        this.$emit('on-change', !this.collapsed)
    },
    // 手动改变菜单栏
    setSatus () {
        if (!this.collapsed) {
            // 菜单栏缩起
            window.localStorage.setItem('collapsed', 0)
        } else {
            // 菜单栏放开
            window.localStorage.setItem('collapsed', 1)
        }
    }
}
</script>