需求就是Element UI的输入框或下拉框在输入时过滤列表，还要支持右键删除列表的某一项，记录一下。
Html代码
<el-autocomplete
size="mini"
style="width:250px"
v-model="product"
clearable
placeholder="请输入商品"
:fetch-suggestions="filterProducts"
@select="handleSelectProduct"
@clear="handleRemoveProduct">
<template slot-scope="{ item }">
<h1 @contextmenu.prevent="openProductMenu($event)">{
{item.name}}</h1>
</template>
</el-autocomplete>
<!-- <el-select
v-model="product"
placeholder="请输入商品"
filterable
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="openProductMenu($event)">
</el-option>
</el-select> -->
<!-- 商品右键菜单 -->
<ul
v-show="productMenuVisible"
:style="{
left: productMenuLeft + 0 + 'px', top: productMenuTop - 10 + 'px'}"
class="productline-menu">
<li @click="handleDeleteProduct" style="padding: 0;"><el-button icon="el-icon-error" style="height: 30px;border: unset; width: 100px; display: block;padding: 0 10px; margin: 0;">删除</el-button></li>
</ul>
AI 代码解读
JS代码
data: () => ({
// 产品
product: ""
// 右键菜单是否可见
productMenuVisible: false,
// 右键菜单左位移
productMenuLeft: 0,
// 右键菜单上位移
productMenuTop: 0,
// 右键选中的产品
productObj: ""
// 产品列表
productList: [
{
"id": 1,
"name": "金"
},
{
"id": 2,
"name": "木"
},
{
"id": 3,
"name": "水"
},
{
"id": 4,
"name": "火"
},
{
"id": 5,
"name": "土"
}
]
}),
watch: {
/**
* 监听点击右键菜单区域
*/
productMenuVisible(value) {
if (value) {
document.body.addEventListener('click', this.closeProductMenu);
} else {
document.body.removeEventListener('click', this.closeProductMenu);
}
}
},
methods: {
/**
* 打开商品右键菜单
*/
openProductMenu(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.productObj = e.currentTarget.innerHTML
},
/**
* 关闭商品右键菜单
*/
closeProductMenu() {
this.productMenuVisible = false;
},
/**
* 右键点击删除商品
*/
handleDeleteProduct() {
this.$confirm("此操作将删除【" + this.productObj + "】商品, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
console.log("You are deleting the product of ", "'" + this.productObj + "'");
// this.deleteProductByName(this.productObj);
})
.catch(() => {
// ...
});
},
/**
* 根据查询字符串过滤商品
*/
filterProducts(queryString, cb) {
console.log("this.productList =>", this.productList)
var restaurants = this.productList;
var results = queryString
? restaurants.filter(this.createFilter(queryString))
: restaurants;
cb(results);
},
/**
* 根据查询字符串过滤商品规则
*/
createFilter(queryString) {
return (restaurant) => {
return (
(restaurant.name.indexOf(queryString) != -1) || (restaurant.name.indexOf(queryString) != -1)
);
};
},
/**
* 左键点击商品选项
*/
handleSelectProduct(item) {
this.form.product = item.name;
},
/**
* 清空输入框
*/
handleRemoveProduct() {
this.form.product = '';
}
}
AI 代码解读
Css代码
<style lang="less">
.productline-menu {
position: absolute;
margin: 0;
background: #fff;
z-index: 9999;
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-color: #eee;
}
}
}
</style>
AI 代码解读
效果：
