vue中input多选_vue实现下拉多选vue实现多选下拉框
效果展示
image.png下拉組件
∨
//下拉列表
{{item.Name}}
data() {
return {
checkedData: [], //選中的數(shù)據(jù)
isShow: false, //下拉列表是否顯示
selectCon: "", //選中的內(nèi)容
};
},
props: ["liData"],
點(diǎn)擊空白處隱藏下拉列表
mounted() {
let that = this;
//點(diǎn)擊頁(yè)面空白處隱藏下拉列表
document.addEventListener("click", function() {
that.isShow = false;
});
},
控制下拉列表的顯示隱藏
methods: {
//控制下拉列表的顯示隱藏
liShow() {
this.isShow = true;
},
子組件的數(shù)據(jù)的監(jiān)聽(tīng)和操作
watch: {
liData: {
handler(newVal, oldVal) {
//選中數(shù)據(jù)
this.checkedData = newVal.filter(function(item) {
return item.Check == true;
});
//在頁(yè)面打印出的數(shù)據(jù)
this.selectCon = ""; //點(diǎn)擊的當(dāng)前項(xiàng)的展示
for (var i = 0; i < this.checkedData.length; i++) {
this.selectCon += this.checkedData[i].Name + " ";
}
// 給父組件傳值
this.$emit("change", this.selectCon);
},
deep: true
}
}
子組件調(diào)用
當(dāng)前選中：{{selectName}}
展示數(shù)據(jù)
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;
}
總結(jié)
以上是生活随笔為你收集整理的vue中input多选_vue实现下拉多选vue实现多选下拉框的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： shell取当前月份第一天_红帽认证8.
- 下一篇： mybatis 依赖于jdbc_优于jd