element context menu

Right menu

It is a component of the right-click menu

<Template> 
  <div the above mentioned id = " DropMenu " 
       : style = " style " 
       style = " Run the display: Block; " 
       v the -show = " Show " 
       @ mousedown.stop <- stop bubbling event ->! 
       @ contextmenu.prevent > <! - the right to stop the default event -> 
    <slot> </ slot> 
  </ div> 
</ Template> 
<Script> 
Export default { 
  Data () { 
    return { 
      triggerShowFn: () => {}, 
      triggerHideFn :() => {},
      x: null,
      y: null,
      style: {},
      binded: false
    }
  },
  props: {
    target: null,
    show: Boolean
  },
  mounted() {
    this.bindEvents()
  },
  watch: {
    show(show) {
      if (show) {
        this.bindHideEvents()
      } else {
        this.unbindHideEvents()
      }
    },
    target(target) {
      this.bindEvents()
    }
  },
  methods: {
    // 初始化事件
    bindEvents() {
      this.$nextTick(() => {
        var that = this
        if (!this.target || this.binded) return
        this.triggerShowFn = this.contextMenuHandler.bind(this)
        this.target.addEventListener('contextmenu', this.triggerShowFn)
        //this.binded = true
      })
    },
    // 取消绑定事件
    unbindEvents() {
      if(!this.target) return 
      the this .target.removeEventListener ( ' contextMenu ' , the this .triggerShowFn) 
    }, 
    // binding events hidden menu 
    bindHideEvents () {
       the this .triggerHideFn = the this .clickDocumentHandler.bind ( the this ) 
      document.addEventListener ( ' mouseDown ' , the this .triggerHideFn) 
      document.addEventListener ( ' the MouseWheel ' , the this .triggerHideFn) 
    }, 
    // unbind hidden menu events 
    unbindHideEvents () {
      document.removeEventListener ( ' mouseDown ' , the this .triggerHideFn) 
      document.removeEventListener ( ' MouseWheel ' , the this .triggerHideFn) 
    }, 
    // mouse press event processor 
    clickDocumentHandler (E) {
       the this . $ EMIT ( ' Update: Show ' , to false ) // hide 
    } 
    // right-event event handler 
    contextMenuHandler (E) { 
      e.target.click () // this is because I need to get data tree node, so I went to get the data by clicking on the event 
      the this .x = E .clientX - 240 
      the this .y = e.clientY -110 
      the this .layout ()
       the this $ EMIT. ( ' Update: Show ' , to true ) // display 
      e.preventDefault () 
      e.stopPropagation () 

      the this $ EMIT (. ' TargetElement ' , e.target) // I would also like right acquired DOM element operates 
    }, 
    // layout 
    layout () {
       the this .style = { 
        left: the this .x + ' PX ' , 
        Top: the this .y + ' PX ' 
      }  
    }
  } 
}
 </ Script>
<style lang="scss">
#dropMenu {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 80px;
  height: auto;
  border: 1px solid #ccc;
  border-radius: 4px;
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      width: 100%;
      text-align: center;
      height: 30px;
      line-height: 30px;
      background: #eee;
      margin-bottom: 1px;
      cursor: pointer;
    }
  }
}
</style>

Calling component

 <menu-context :target="contextMenuTarget"
                        :show="isShowDrop"
                        @update:show="(show) => isShowDrop = show"
                        @targetElement="getTargetElement">
            <ul>
　　　　　　　　<!--按需展示按钮-->
              <li @click="deleteOne"
                  v-show="isShowDelete">删除</li>
              <li @click="add"
                  v-show="isShowAdd">添加</li>
              <li @click="editNode"
                  v-show="isShowEdit">编辑</li>
              <li @click="linkModels"
                  v-show="isShowLink">关联</li>
              <li @click="move"
                  v-show="isShowMove">转移</li>
            </ul>
          </menu-context>

Introducing components

menuContext Import './components/menuContext.vue' from 
Export default { 
  Components: { 
    menuContext 
  }, 
  Data () { 
    return { 
      // spatial tree data 
      spaceTreeData: [], 
      // default output format tree structure 
      defaultProps: { 
        Children: 'Children', 
        label: 'name' 
      }, 
      isShowDrop: to false, // context menu is displayed 
      contextMenuTarget: null, // DOM objects context menu 
      thisformdata: {}, // click context menu node object 
      targetElement: { } // right-click on the target object 
      isShowDelete: true, // whether to display the menu of the delete button 
      isShowEdit: true, // whether to display the menu of the edit button 
      isShowAdd: true, // whether to add menu button
      isShowMove: true, // whether the menu button is transferred
      isShowLink: true // whether to display the button menu associated 
    } 
  },

 initialization

Mounted () { 
　　// dom finished loading, the target set dom assignment in data directly, can not find dom
     the this .contextMenuTarget = document.querySelector ( ' #modelTree ' ) 
  },

method

Methods: { 
    getTargetElement (V) { 
      the this .targetElement = V 
    }, 
    deleteOne () { 
      var that = the this 
      var nodeIDs = [ the this .thisformdata.nodeId]
       the this $ Confirm (. ' This action will delete the node and its children, whether to continue? ' , ' tips ' , { 
        confirmButtonText: ' OK ' , 
        cancelButtonText: ' cancel ' , 
        of the type: ' warning ' , 
        Center: to true 
      })
        .then(() => {
          deleteTreeNode(that.spaceTreeId, nodeIds).then(function(res) {
            console.log('deleteTreeNode', res)
            if (res.success) {
              that.$message('删除成功！')
              that.refreshSpaceTree()
            }
          })
        })
        .catch(() => {})
    },
    add() {
      this.append(this.thisformdata)
      this.isShowDrop = false
    },
    editNode() {
      var data = this.thisformdata
      var str = "<input type='text' name='label' value='" + data.name + "'>"
      var e = window.event
      var text = this.targetElement
      text.innerHTML = str
      this.isShowDrop = false
      text.lastChild.onblur = function() {
        data.name = text.lastChild.value
        text.innerHTML = text.lastChild.value
        var= that the this
         the thisvar Space = { 
          the nodeId: data.nodeId, 
          orgnazitionalTreeID: data.orgnazitionalTreeID, 
          parentNodeId: data.parentNodeId, 
          name: data.name, 
          nodeType: data.nodeType 
        } 
        // transmission request content => to modify problematic tomorrow? 
        modifyTreeNode ( data.orgnazitionalTreeID, Space) .then (function (RES) { 
          the console.log ( ' modifyTreeNode ' , RES) 
        }) 
      } 
    }, 
    Move () { 
      IF ( the this .thisformdata.nodeType == 0 ) {
         . $ refs.modelLinkSpace .open ([ the this.thisformdata]) 
      } 
      the this .isShowDrop = to false 
    }, 
    linkModels () { 
      the this .linkModel ({}, the this .thisformdata) 
    }, 
    handleNodeClick (Data) { 
      the console.log ( ' handleNodeClick ' , Data)
       // Core:! node data is obtained 
      the this .thisformdata = data 
　　　　// demand show different button
       IF (data.nodeType == . 1 &&! data.children) {
         the this .isShowAdd = to true 
        the this .isShowLink = to true 
        the this .isShowMove =true
      } else if (data.nodeType == 0) {
        this.isShowAdd = false
        this.isShowLink = false
        this.isShowMove = true
      } else if (data.nodeType == 1 && data.children && data.children[0].nodeType == 0) {
        this.isShowAdd = false
        this.isShowLink = true
        this.isShowMove = true
      } else if (data.nodeType == 1 && data.children && data.children[0].nodeType == 1) {
        this.isShowAdd = true
        this.isShowLink = false
        this.isShowMove = false
      }
    },