[JavaScript知识库]Vue实现Element UI框架下，下拉框输入时对列表选项进行过滤，以及右键列表选项弹出菜单进行删除

????????最近笔者在一个基于Element UI框架的Vue项目进行二次开发，查阅了一些资料，把功能做出来了，感觉挺有用的，特此记录一下将其作为学习笔记。

Html代码

<!-- 绑定事件 -->
<!-- @contextmenu.prevent.native="openProductRightKeyMenu($event)" -->

<el-form-item label="产品" :label-width="formLabelWidth">
  <el-select
    v-model="form.product"
    placeholder="请输入产品"
    filterable
    :filter-method="productFilter"
    style="width:250px"
  >
    <el-option
      v-for="item in productList"
      :key="item.name"
      :label="item.name"
      :title="item.name"
      :value="item.name" 
      style="width:250px;position:relative"
      @contextmenu.prevent.native="openProductRightKeyMenu($event)"
    ></el-option>
  </el-select>
</el-form-item>

<!-- 商品右键的菜单 -->
<ul
  v-show="productMenuVisible"
  :style="{left:productMenuLeft+0+'px', top:productMenuTop-10+'px'}"
  class="product-contextmenu">
  <li @click="handleDeleteProduct">删除</li>
</ul>

JS代码

data: () => ({
  form: {
    name: "",
    description: "",
    number: ""
  },
  productList: [
    {
      id: 11111,
      name: "IPhone 12"
    },
    {
      id: 11112,
      name: "IPhone 13"
    }
  ],//商品信息列表
  productMenuVisible: false,//右键菜单是否可见
  productMenuLeft: 0,//右键菜单左位移
  productMenuTop: 0,//右键菜单上位移
  productTarget: ""//右键的标签元素
}),

watch: {
  productMenuVisible(value) {
    if (value) {
      document.body.addEventListener('click', this.closeProductRightKeyMenu)
    } else {
      document.body.removeEventListener('click', this.closeProductRightKeyMenu)
    }
  }
},

methods: {
  /**
   * 商品过滤器
   */
  productFilter(val) {
    this.form.product = val;
    if (val) {
      this.productList.filter((item) => {
        if (!!~item.name.indexOf(val) || !!~item.name.toUpperCase().indexOf(val.toUpperCase())) {
          return true
        }
      })
    } else {
      this.productList;
    }
  },

  /**
   * 右键商品时，打开菜单弹框
   */
  openProductRightKeyMenu(e) {
    const menuMinWidth = 105
    const offsetLeft = this.$el.getBoundingClientRect().left
    const offsetWidth = this.$el.offsetWidth
    const maxLeft = offsetWidth - menuMinWidth
    const left = e.clientX - offsetLeft
    if (left > maxLeft) {
      this.productMenuLeft = maxLeft
    } else {
      this.productMenuLeft = left
    }
    this.productMenuTop = e.clientY
    this.productMenuVisible = true
    this.productTarget = e.currentTarget.firstElementChild.innerHTML//this.productTarget = "IPhone 12"
  },

  /**
   * 点击其它地方时，关闭右键商品的菜单弹框
   */
  closeProductRightKeyMenu() {
    this.productMenuVisible = false
  },

  /**
   * 点击删除
   */
  handleDeleteProduct() {
    this.$confirm("此操作将删除【" + this.productTarget + "】商品, 是否继续？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
    .then(() => {
      console.log("You are deleting the product of ", "'" + this.productTarget + "'");
      this.deleteProductByName(this.productTarget);
    })
    .catch(() => {
      this.$message({
        type: "info",
        message: "已取消删除",
      });
    });
  },

  /**
   * 根据名称删除商品
   */
  async deleteProductByName() {
    const res = await this.$http.deleteProductByName(this.productTarget);
    if (res.success) {
      this.$message({
        type: "success",
        message: "删除成功!",
      });
      this.getProductsList();
    } else {
      this.$message({
        type: "warning",
        message: "删除失败",
      });
    }
  }
}

Css代码

<style lang="less">
.product-contextmenu {
  position: absolute;
  margin: 0;
  background: #fff;
  z-index: 99999;
  list-style-type: none;
  padding: 5px 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
  li {
    margin: 0;
    padding: 7px 16px;
    cursor: pointer;
    &:hover {
      background: #eee;
    }
  }
}
</style>

效果：

?

?