首页 » JavaScript » Vue做类tab页切换

Vue做类tab页切换

原文 http://blog.csdn.net/qingemengyue/article/details/76274150

2017-07-28 20:20:02阅读(615)

<div class="import-case-type-select import-case-type-select-active" id="csvTypeId">
    <a class="text-white" v-on:click="selectCaseType('csv','#csvTypeId')">
        <div class="font-logo"></div>
        <div><span class="english-font-style">CSV</span></div>
    </a>
</div>
<div class="import-case-type-select import-case-type-select-active" id="fitTypeId">
    <a class="text-white" v-on:click="selectCaseType('fitProject','#fitTypeId')">
        <div class="font-logo"></div>
        <div><span class="english-font-style">Fitness</span>套件</div>
    </a>
</div>
<div class="import-case-type-select import-case-type-select-active" id="fitTypeSuiteId">
    <a class="text-white" v-on:click="selectCaseType('fitSuite','#fitTypeSuiteId')">
        <div class="font-logo"></div>
        <div><span class="english-font-style">Fitness</span>工程</div>
    </a>
</div>
//<form>属性enctype共有二个值可选,这个属性管理的是表单的MIME编码:
// ①application/x-www-form-urlencoded(默认值)
// ②multipart/form-data
<div class="import-case-content" v-if="caseType==='csv'">
    <div class="label-content">
        <form id="csvCaseForm" method="post" enctype="multipart/form-data"> 
            <div class="input-box">
                <div class="fa fa-check-circle-o">上传模板文件</div>
                <div class="display-input-btn">
                    <input type='text' name='textfield' id='textfield' class='form-control'/>
                    <button type="button" class="btn btn-primary fa fa-copy">浏览文件</button>
                    <input type="file" name="fileField" class="file" onchange="document.h=getElementById('textfield').value=this.value"/>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="import-case-content" v-if="caseType==='fitProject'">
    ……
</div>
<div class="import-case-content" v-if="caseType==='fitSuite'">
    ……
</div>
//v-on:click="selectCaseType('csv','#csvTypeId')"
//v-if="caseType==='csv'"
<script>
    var caseImportCase = new Vue({
        el:"#caseImportCase",
        data:{
            caseType:"csv",
            fileFileId:"",
            fitUrl:"",
            prefix:"",
            testSuite:"",
            testSuiteId:"",
            testProjectName:"",
        },
        method:{
            selectCaseType:function(type,selected){
                this.caseType=type;
                $("caseTypeId").find("div.import-case-type-select").each(function(){
                    $(this).removeClass("import-case-type-select-active");
                    $(this).find("a.text-white").each(function(){
                        $(this).removeClass("a.text-white");
                        $(this).addClass("text-muted");
                    });
                });
                var csvObj=$(selectedId);
                csvObj.addClass("import-case-type-select-active");
                    $(this).removeClass("text-muted");
                        $(this).addClass("text-white");
                });
            },
            ……
        }
    });
</script>

效果:
Vue做类tab页切换

Vue做类tab页切换

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹