stopPropagation() 事件方法

stopPropagation() 方法防止调用相同事件的传播。

传播意味着向上冒泡到父元素或向下捕获到子元素。

 

<template>
　　<div>
　　　　<div v-show="statusPanelShow" :style="statusSelectStyle" ref="statusPanel" class="status_panel">
      　　<p v-for="item, index in statusList"
        　　:key="item"
        　　:class="activeStatusIndex === index+1 ? 'status_active': ''"
       　　 @click="changeCaseStatus(index+1)">{{ item }}</p>
    　　</div>
　　</div>
</template>
<script>
export default {

　　　　//父组件中通过provide来提供变量，然后在子组件中通过inject来注入变量

   　　 provide() {

      　　return {

        　　main: this

      　　}

    　　},

　　mounted() {
　　　　this.$refs.statusPanel.addEventListener('wheel', (e) => {
        e.stopPropagation()
      });
      this.$refs.statusPanel.addEventListener('mousedown', (e) => {
        e.stopPropagation()
      });
      this.$refs.statusPanel.addEventListener('mousewheel', (e) => {
        e.stopPropagation()
      });

　　},

　　
　　 methods: {
    　　changeCaseStatus(index) {
        　　this.activeStatusIndex = index
        　　window.minder.execCommand('status', index)
        　　this.statusPanelShow = false
      　　},
　　}
}
</script>

 

 

<template lang="html">
  <div class="mind-editor"></div>
</template>

<script>
export default {
    inject: ['main'],
    mounted() {
        window.minder = window.km = editor.minder;
        // 显示用例状态选项
        window.minder.on('showStatusMenu', this.showStatusPanel);
        document.addEventListener('wheel', this.main.hideStatusPanel);
        document.addEventListener('mousedown', this.main.hideStatusPanel);
        document.addEventListener('mousewheel', this.main.hideStatusPanel);
        this.$once('hook:beforeDestroy', () => {
            document.addEventListener('wheel', this.main.hideStatusPanel);
            document.addEventListener('mousedown', this.main.hideStatusPanel);
            document.addEventListener('mousewheel', this.main.hideStatusPanel);
      });

    },
}
</script>