效果展示

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;

}

總結

以上是生活随笔為你收集整理的vue中input多选_vue实现下拉多选vue实现多选下拉框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。