vue實現(xiàn)二級彈框案例
更新時間：2022年08月23日 11:52:48 作者：東方曉帥
這篇文章主要為大家詳細介紹了vue實現(xiàn)二級彈框案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)二級彈框的具體代碼，供大家參考，具體內(nèi)容如下
二級彈框案例，如下圖所示
<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="請輸入職位關(guān)鍵詞" />-->
? ? ? ? ? ? ? ? <el-input ?class="in-put" v-model="jobKeyWord"
? ? ? ? ? ? ? ? ? ? ? ? ? ?@click.native="clickSearchInput"
? ? ? ? ? ? ? ? ? ? ? ? ? ?clearable
? ? ? ? ? ? ? ? ? ? ? ? ? ?@blur="blurSearch"
? ? ? ? ? ? ? ? ? ? ? ? ? ?placeholder="請輸入職位關(guān)鍵詞"></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">產(chǎn)品/運營/新媒體 <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">互聯(lián)網(wǎng)/移動互聯(lián)網(wǎng)/電子商務(wù)</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:'',//職位關(guān)鍵詞
? ? ? ? ? ? ? ? searchFlag:false,//是否展示搜索框
? ? ? ? ? ? ? ? searchList:[],//搜索數(shù)據(jù)
? ? ? ? ? ? ? ? clickOneJobNameArr:[],//存儲點擊時一級分類
? ? ? ? ? ? ? ? clickTwoNameArr:[],//選中的二級分類
? ? ? ? ? ? ? ? clickTwoIdArr:[],//選中的二級分類
? ? ? ? ? ? ? ? clickCateObj:{},// 點擊選中的一級分類
? ? ? ? ? ? ? ? countObj:{},//二級職位被選中時 一級顯示數(shù)量
? ? ? ? ? ? ? ? searchDataList:[], //搜索數(shù)據(jù)
? ? ? ? ? ? ? ? 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(); // 處理搜索職位數(shù)據(jù)
? ? ? ? ? ? ? ? ? // ?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(); // 處理搜索職位數(shù)據(jù)
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? 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是點擊的搜索框出現(xiàn)，否則就是點擊的二級
? ? ? ? ? ? ? ? // 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]++;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? //要刪除的二級分類,改變選中顏色，改變一級分類統(tǒng)計數(shù)量
? ? ? ? ? ? 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]--;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? //處理搜索的數(shù)據(jù)
? ? ? ? ? ? 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>以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了vue-cli配置環(huán)境變量的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
Vue如何利用flex布局實現(xiàn)TV端城市列表功能
用vue開發(fā)了三四個組件了,都是H5的,現(xiàn)在來看看PC是如何玩轉(zhuǎn)組件的,下面這篇文章主要給大家介紹了關(guān)于Vue如何利用flex布局實現(xiàn)TV端城市列表功能的相關(guān)資料,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue中@change兼容問題詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
node+vue前后端分離實現(xiàn)登錄時使用圖片驗證碼功能
這篇文章主要介紹了node+vue前后端分離實現(xiàn)登錄時使用圖片驗證碼,記錄前端使用驗證碼登錄的過程，后端用的是node.js，關(guān)鍵模塊是svg-captcha，結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-11-11
基于ant-design-vue實現(xiàn)表格操作按鈕組件
這篇文章主要為大家介紹了基于ant-design-vue實現(xiàn)表格操作按鈕組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
vue+element-ui+axios實現(xiàn)圖片上傳
這篇文章主要為大家詳細介紹了vue+element-ui+axios實現(xiàn)圖片上傳，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
這篇文章主要介紹了vue高級組件之provide與inject使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
本文主要介紹了vue項目中使用websocket的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
Vue3.0相比較于之前的版本更快、更小、更易于維護、更貼近原生、對開發(fā)者更友好，本文就Vue3.0進行詳細介紹，需要了解的小伙伴可以參考一下這篇文章2021-09-09
在Vue.js項目中,構(gòu)建后的資源文件（如CSS、JavaScript文件、圖片等）通常會被放置在指定的目錄下,為了確保這些文件能夠被正確加載,Vue CLI 提供了配置選項來指定這些文件的路徑,本文給大家介紹了Vue打包為相對路徑的具體實現(xiàn)方法,需要的朋友可以參考下2024-09-09