<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
vue實現二級彈框案例
2022-08-23 14:00:27
本文範例為大家分享了vue實現二級彈框的具體程式碼，供大家參考，具體內容如下
二級彈框案例，如下圖所示
<template>
<div class="zw-dialog">
<div class="zw-top">
<p class="zw-word">請選擇職位</p>
<div class="zw-in">
<!-- <input class="zw-put" v-model="jobKeyWord" placeholder="請輸入職位關鍵詞" />-->
<el-input class="in-put" v-model="jobKeyWord"
@click.native="clickSearchInput"
clearable
@blur="blurSearch"
placeholder="請輸入職位關鍵詞"></el-input>
<div class="in-block" v-show="searchFlag">
<ul class="in-ul">
<!--<li class="in-li" v-for="(item,i) in searchList" :key="i">{{item.nameZh}}</li>-->
<li class="in-li" v-for="(item,i) in searchList"
:key="i" @click="clickTwoCatFun(item)"
@mousedown= downDrag($event)
v-html="item.nameVal"></li>
</ul>
</div>
</div>
</div>
<div class="zw-middle">
<span class="zw-tag" v-for="(item,i) in clickTwoNameArr" :key="i">
{{item.nameZh}}
<i class="el-icon-close" @click="delChoolseTwoItem(item)"></i>
</span>
<span class="zw-more">最多選擇1個職位類別</span>
<span class="zw-sure" @click="jobSure">確認</span>
</div>
<div class="zw-main">
<div class="zw-left">
<ul class="zw-ul">
<!--<li class="zw-li li-active">產品/運營/新媒體 <span class="li-num">1</span></li>-->
<!-- <template v-for="(item,i) in jobClassList" :key="i">
</template> -->
<li class="zw-li"
:class="[clickOneJobNameArr.includes(item.id) ? 'li-active' :'']"
v-for="(item,i) in jobClassList"
@click="clickJobItem(item)"
:key="i" >{{item.nameZh}}
<span class="li-num" v-if=" countObj[item.id] ">{{countObj[item.id]}}</span>
</li>
</ul>
</div>
<div class="zw-right">
<div class="right-main">
<!--<span class="job-tag job-active">網際網路/行動網際網路/電子商務</span>-->
<span class="job-tag"
:class="[clickTwoIdArr.includes(twoObj.id) ? 'job-active' :'']"
v-for="(twoObj,i) in clickCateObj.list"
:key="i" @click="clickTwoCatFun(twoObj)">{{twoObj.nameZh}}
</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "JobClassComp",
data(){
return{
jobKeyWord:'',//職位關鍵詞
searchFlag:false,//是否展示搜尋方塊
searchList:[],//搜尋資料
clickOneJobNameArr:[],//儲存點選時一級分類
clickTwoNameArr:[],//選中的二級分類
clickTwoIdArr:[],//選中的二級分類
clickCateObj:{},// 點選選中的一級分類
countObj:{},//二級職位被選中時 一級顯示數量
searchDataList:[], //搜尋資料
allTwoClassList:[],//所有二級分類
}
},
props:{
form: Object,
isEndDateNow: Boolean,
jobClassList:{
type:Array,
default() {
return [];
}
}
},
computed: {
listLength(){
return this.jobClassList.length
}
},
watch:{
jobKeyWord(val){
if(val.length >0){
this.searchList = this.searchDataList.filter(item =>{
val = val.toUpperCase();
let reg = new RegExp("(" + val + ")", "g");
let nameVal = item.nameZh.replace(reg, "<span style='color:#437FFF;'>$1</span>");
item.nameVal = nameVal;
// return newstr;
return item.nameZh.includes(val)
})
this.searchFlag = true
}else {
this.searchList = [];
this.searchFlag = false
}
},
listLength(val,oldValue){
/* console.log("val==",val)
console.log("oldValue==",oldValue)*/
if(oldValue === 0 && val >0){
//console.log("--22--",this.jobClassList)
this.clickOneJobNameArr.length ===0 ? this.clickOneJobNameArr.push(this.jobClassList[0].id ): '';
Object.keys(this.clickCateObj).length===0 ? this.clickCateObj = this.jobClassList[0] :'';
this.dealSearchData(); // 處理搜尋職位資料
// this.doAllTwoClassData() lzs
}
}
},
created() {
if(this.jobClassList && this.jobClassList.length >0){
this.clickOneJobNameArr.length ===0 ? this.clickOneJobNameArr.push(this.jobClassList[0].id ): '';
Object.keys(this.clickCateObj).length===0 ? this.clickCateObj = this.jobClassList[0] :'';
this.dealSearchData(); // 處理搜尋職位資料
}
},
methods:{
clickSearchInput(){
this.jobKeyWord.length > 0 ? this.searchFlag = true : this.searchFlag=false;
},
//input失去焦點
blurSearch(){
this.searchFlag = false;
},
downDrag(el){
el.preventDefault();//阻止input失去焦點事件時的影響
},
//職位確認
jobSure(){
// this.dialogVisible = false; //add lzs
if(this.clickTwoNameArr.length >0){
this.form.jobIntensionName = '';
this.clickTwoNameArr.forEach(item =>{
this.form.jobIntensionName = this.form.jobIntensionName + '，' + item.nameZh ;
})
this.form.jobIntensionName.length > 0 ? this.form.jobIntensionName = this.form.jobIntensionName.substring(1,this.form.jobIntensionName.length) :'';
}else {
this.form.jobIntensionName = '';
}
this.$emit('sureJobMethod',this.clickTwoNameArr)
},
clickJobItem(item){//點選職位類別
//console.log("item----",item)
this.clickCateObj =item;
//處理選中 顏色變化
if(this.clickOneJobNameArr.length >0){
this.clickOneJobNameArr.splice(0, 1);
this.clickOneJobNameArr.push(item.id)
}else{
this.clickOneJobNameArr.push(item.id)
}
},
//點選二級職位名稱
clickTwoCatFun(obj){
//type: search two; =search是點選的搜尋方塊出現，否則就是點選的二級
// type === 'search' ? this.jobKeyWord = obj.nameZh : '';
if(!this.clickTwoIdArr.includes(obj.id) && this.clickTwoIdArr.length ===1 ){
this.$message({
message: '最多選擇1個職位類別哦',
type: 'warning'
});
return
}
if(!this.clickTwoIdArr.includes(obj.id) && this.clickTwoIdArr.length<3){
this.clickTwoNameArr.push(obj)
this.clickTwoIdArr.push(obj.id)
this.form.jobIntensionNameSel.push(obj.id)
if(!this.countObj[obj.parentId]){
this.countObj[obj.parentId] = 1
}else {
this.countObj[obj.parentId]++;
}
}
},
//要刪除的二級分類,改變選中顏色，改變一級分類統計數量
delChoolseTwoItem(delObj){
// var filtered = someArray.filter(function(el) { return el.Name != "Kristian"; });
let index = this.clickTwoNameArr.findIndex(item =>{
return item.id === delObj.id
})
let formIndex = this.form.jobIntensionNameSel.findIndex(idVal =>{
return idVal === delObj.id
})
this.form.jobIntensionNameSel.splice(formIndex, 1)//刪除
this.clickTwoNameArr.splice(index, 1)
this.clickTwoIdArr.splice(index, 1)
if(!this.countObj[delObj.parentId]){
this.countObj[delObj.parentId] = 0
}else {
this.countObj[delObj.parentId]--;
}
},
//處理搜尋的資料
dealSearchData(){
this.jobClassList.forEach(item =>{
this.searchDataList = this.searchDataList.concat(item.list)
})
},
}
}
</script>
<style scoped lang="less">
.zw-dialog{
/* border: 1px solid red;*/
width:880px;
height:550px;
background:rgba(255,255,255,1);
.zw-top{
height: 52px;
width: 100%;
display: flex;
/*border: 1px solid green;*/
border-bottom: 1px solid #EFEFEF ;
.zw-word{
width: 200px;
/* text-align: center;*/
margin-left: 30px;
line-height: 52px;
font-size: 16px;
color: #333333;
}
.zw-in{
/* border: 1px solid blue;*/
width: calc(100% - 200px);
line-height: 52px;
.zw-put{
border-radius:15px;
border:1px solid rgba(224,224,224,1);
width: 200px;
height: 30px;
margin-left: 32px;
font-size: 12px;
padding-left: 20px;
}
.in-put{
width: 200px;
height: 30px;
/deep/ .el-input__inner{
border-radius:15px;
color: #999999;
font-size: 12px;
}
/deep/ input::-webkit-input-placeholder {
/* WebKit browsers */
font-size: 12px;
color: #999999;
}
/deep/ input:-moz-placeholder{
/* Mozilla Firefox 4 to 18 */
font-size: 12px;
color: #999999;
}
/deep/ input::-moz-placeholder{
/* Mozilla Firefox 19+ */
font-size: 12px;
color: #999999;
}
/deep/ input:-ms-input-placeholder{
font-size: 12px;
color: #999999;
}
}
.in-block{
width: 200px;
height: 290px;
z-index: 11;
box-shadow:0px 2px 12px 0px rgba(0,0,0,0.06);
position: relative;
background: #ffffff;
overflow: scroll;
.in-ul{
padding:5px 0px;
.in-li{
color: #000000;
padding: 10px 20px;
line-height: 20px;
font-size: 14px;
&:hover{
cursor: pointer;
background: #F7F9FD;
}
}
}
}
}
}
.zw-middle{
/*width: 100%;*/
height: 50px;
/* border: 1px solid green;*/
display: flex;
align-items: center;
padding-left: 30px;
.zw-tag{
display: inline-block;
border-radius:15px;
border:1px solid rgba(67,127,255,1);
padding: 5px 12px 5px 10px;
margin-right: 16px;
font-size:13px;
color: #437FFF;
i{
cursor: pointer;
padding-left: 4px;
}
}
.zw-more{
color: #CCCCCC;
font-size:13px;
}
.zw-sure{
display: inline-block;
width: 72px;
height: 28px;
line-height: 28px;
text-align: center;
background:rgba(67,127,255,1);
border-radius:15px;
font-size:13px;
color: #ffffff;
position: absolute;
right: 30px;
&:hover{
cursor: pointer;
}
}
}
.zw-main{
display: flex;
.zw-left{
width: 200px;
height: 443px;
overflow: scroll;
/*border: 1px solid red;*/
.zw-ul{
background:rgba(249,250,251,1);
.zw-li{
height: 50px;
/* line-height: 50px;*/
text-align: center;
align-items: center;
display: flex;
justify-content: center;
border-left: 4px solid transparent;
&:hover{
cursor: pointer;
}
/*border: 1px solid pink;*/
.li-num{
display: inline-block;
background: #437FFF;
width: 16px;
height: 16px;
line-height: 16px;
border-radius: 50%;
font-size:13px;
color:#ffffff;
margin-left: 8px;
}
}
.li-active{
border-left: 4px solid #437FFF;
background:rgba(255,255,255,1);
}
}
}
.zw-right{
/*border: 1px solid black;*/
width: calc(100% - 200px);
height: 443px;
overflow: scroll;
.right-main{
.job-tag{
display: inline-block;
margin: 16px 20px;
width: 182px;
font-size:14px;
color: #444444;
&:hover{
cursor: pointer;
}
}
.job-active{
color: #437FFF;
}
}
}
}
}
</style>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。
相關文章
-
黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列
综合看Anker超能充系列的性价比很高，并且与不仅和iPhone12/苹果<em>Mac</em>Book很配，而且适合多设备充电需求的日常使用或差旅场景，不管是安卓还是Switch同样也能用得上它，希望这次分享能给准备购入充电器的小伙伴们有所
2021-06-01 09:31:42
-
吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！
除了L4WUDU与吴亦凡已经多次共事，成为了明面上的厂牌成员，吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节，这也是20XXCLUB首次全员合照，王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让
2021-06-01 09:31:34
-
IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？
目前应用IPFS的机构：1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆，历史资料永久保存在 IPFS 6 加
2021-06-01 09:31:24
-
有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊
开拓者的车机是兼容苹果和<em>安卓</em>，虽然我不怎么用，但确实兼顾了我家人的很多需求：副驾的门板还配有解锁开关，有的时候老婆开车，下车的时候偶尔会忘记解锁，我在副驾驶可以自己开门：第二排设计很好，不仅配置了一个很大的
2021-06-01 09:30:48
-
iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？
不仅是<em>安卓</em>手机，苹果手机的降价力度也是前所未有了，iPhone12也“跳水价”了，发布价是6799元，如今已经跌至5308元，降价幅度超过1400元，最新定价确认了。iPhone12是苹果首款5G手机，同时也是全球首款5nm芯片的智能机，它
2021-06-01 09:30:45