[JavaScript知识库]前端VUE总结记录

1. JS删除对象中某一个字段的方法实现

 let item = {
    name:'xxx',
    age:'18',
    gender:'男'
   };
//会直接改变对象
delete item.name;

2. 右键弹出框的实现

<!--右键弹出-->
<el-card class="box-card" ref="card" v-show="menuVisible">
   <div style="cursor:pointer;" @click="" v-show="secondLevel"><i class="el-icon-circle-plus-outline"></i>新增</div>
   <div style="cursor:pointer;" @click="" v-show="thirdLevel"><i class="el-icon-circle-plus-outline"></i>编辑</div>
</el-card>
     
//右键触发
    rightClick(MouseEvent, object, Node, element) { 
        this.currentData = object;
        this.currentNode = Node;
        if (Node.level ===2) { 
          this.secondLevel =true;
          this.thirdLevel = false;
          this.menuVisible =true; //显示增删改的div
        } else if(Node.level ===3){
          this.secondLevel =false; 
          this.thirdLevel = true;
          this.menuVisible =true; //显示增删改的div
        } 
        }else {
          this.secondLevel =false; 
          this.thirdLevel = false;
          this.menuVisible = false;
        }
        document.addEventListener('click', this.foo);  
        this.$refs.card.$el.style.left = MouseEvent.clientX -180 +'px'; 
        this.$refs.card.$el.style.top =MouseEvent.clientY -50 +'px'; 
     },

     foo () {
        this.menuVisible =false;
        document.removeEventListener('click',this.foo);
      },

3. 级联选择框的实现

<el-cascader 
  clearable 
  v-model="value" 
  :options="securityDemandData" 
  :show-all-levels="false" 
  :props="defaultProps">
</el-cascader>

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖