效果展示

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 = newVal.filter(function(item) {

return item.Check == true;

});

//在页面打印出的数据

this.selectCon = ""; //点击的当前项的展示

for (var i = 0; i < this.checkedData.length; i++) {

this.selectCon += this.checkedData[i].Name + " ";

}

// 给父组件传值

this.$emit("change", this.selectCon);

},

deep: true

}

}

子组件调用

当前选中：{{selectName}}

展示数据

data() {

return {

liData: [

{

Id: 1,

Name: "孙小胖1",

Check: false

},

{

Id: 2,

Name: "孙小胖2",

Check: false

}

],

selectName: ""

};

},

显示传值

methods: {

// 下拉多选传值展示

change(msg) {

this.selectName = msg;

},

}

组件样式

.selectInput .title {

width: 300px;

position: relative;

}

.selectInput input[type="text"] {

width: 300px;

height: 40px;

padding: 0 5px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

border-radius: 3px;

-moz-border-radius: 3px; /* Firefox */

-webkit-border-radius: 3px; /* Safari 和 Chrome */

border-radius: 3px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */

}

.selectInput i {

position: absolute;

width: 30px;

height: 40px;

line-height: 38px;

right: -12px;

top: 1px;

text-align: center;

cursor: pointer;

}

.selectInput ul {

border-radius: 3px;

-moz-border-radius: 3px; /* Firefox */

-webkit-border-radius: 3px; /* Safari 和 Chrome */

border-radius: 3px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */

box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);

-moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); /* Firefox */

-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); /* Safari 和 Chrome */

box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */

width: 253px;

/* border: 1px solid #ccc; */

padding: 10px 30px;

}

.selectInput li {

line-height: 30px;

}