效果展示
image.png下拉组件
∨
//下拉列表
{ {item.Name}}
data() {
return {
checkedData: [], //选中的数据
isShow: false, //下拉列表是否显示
selectCon: "", //选中的内容
};
},
props: ["liData"],
点击空白处隐藏下拉列表
mounted() {
let that = this;
//点击页面空白处隐藏下拉列表
document.addEventListener("click", function() {
that.isShow = false;
});
},
控制下拉列表的显示隐藏
methods: {
//控制下拉列表的显示隐藏
liShow() {
this.isShow = true;
},
子组件的数据的监听和操作
watch: {
liData: {
handler(newVal, oldVal) {
//选中数据
this.checkedData