Flex管理界面布局

布局关键属性：

flex-direction：

布局用到的css

Flex：1 我理解为100%剩余宽度

左边导航栏

Bootstrap-Vue

采取Accordion Support:

使用这个组件要修改三个地方：

1、名称 {{menus[0].title}}…{{menus[9].title}}

2、 修改id

1. <b-collapse id="accordion2" accordion="my-accordion" role="tabpanel">

Id不能重复

1. b_btn 当中的属性值

这三者要配套修改；

过程中，曾经想采取循环生产b-card，但vue.js 当中，操作属性如何动态修改没有弄明白。就写死算了

vue.js数据模型如下：

<script type="text/javascript">
    new Vue({
        el:'.t',
        data:{
            menus:[
                {id:"1",icon:"",pid:"0",title:"菜单1",url:"http;//www.baidu.com",v1:1},
                {id:"2",icon:"",pid:"0",title:"菜单2",url:"http;//www.baidu.com",v1:0},
                {id:"3",icon:"",pid:"0",title:"菜单3",url:"http;//www.baidu.com",v1:0},
                {id:"4",icon:"",pid:"0",title:"菜单4",url:"http;//www.baidu.com",v1:1},
                {id:"5",icon:"",pid:"0",title:"菜单5",url:"http;//www.baidu.com",v1:0},
                {id:"6",icon:"",pid:"0",title:"菜单6",url:"http;//www.baidu.com",v1:0},
                {id:"7",icon:"",pid:"0",title:"菜单7",url:"http;//www.baidu.com",v1:1},
                {id:"8",icon:"",pid:"0",title:"菜单8",url:"http;//www.baidu.com",v1:0},
                {id:"9",icon:"",pid:"0",title:"菜单9",url:"http;//www.baidu.com",v1:0},
                {id:10,icon:"",pid:"0",title:"菜单10",url:"http;//www.baidu.com",v1:0}
            ],
            firtMuenu: {id:"1",icon:"",pid:"0",title:"菜单0",url:"http;//www.baidu.com",v1:1},
            v2:[1,0,0],
            type: 'A',
            text:'test!!!!'
        }

    })
</script>

这里应该根据数据模型控制风琴栏的Accordion的数量，应该和模型中菜单数据的长度匹配，最大10个

如何控制：

<b-card no-body class="mb-1" v-if="menus.length>0">

每个b-card上加上条件即可

条件依次为：

v-if="menus.length>1

v-if="menus.length>2

v-if="menus.length>3

v-if="menus.length>4

…….

v-if="menus.length>9

ps:先担心没有的值会引起报错，还好，可以运行下去，当然浏览器控制台有错误，显示的内容还是应该控制一下，

配置二级子菜单：

二级菜单数据如下：

new Vue({
    el: '.t',
    data: {
        menus: [
            {id: "1", icon: "", pid: "0", title: "菜单1", url: "http;//www.baidu.com", v1: 1,
                items:[
                    {id: "11", icon: "", pid: "0", title: "菜单11", url: "http;//www.baidu.com", v1: 0},
                    {id: "12", icon: "", pid: "0", title: "菜单12", url: "http;//www.baidu.com", v1: 0},
                    {id: "13", icon: "", pid: "0", title: "菜单13", url: "http;//www.baidu.com", v1: 0},
                    {id: "14", icon: "", pid: "0", title: "菜单14", url: "http;//www.baidu.com", v1: 0},
                    {id: "15", icon: "", pid: "0", title: "菜单15", url: "http;//www.baidu.com", v1: 0}
                ]
            },

id: 是菜单的id,title是菜单的中文

展示出来的关键是for循环：

<b-card-body>
    <p class="card-text">
        <b-nav vertical class="w-30">
            <b-nav-item  v-for="item in menus[2].items">{{item.title}}</b-nav-item>
        </b-nav>
    </p>
</b-card-body>

点击事件：

--有2种思路：

动态添加点击事件，或者添加<a标签>

这里采取添加事件的做法，b-nav-item上，好像有evnet属性，不过，没搞清怎么用

<b-card no-body class="mb-1" v-if="menus.length>0">
    <b-card-header header-tag="header" class="p-1" role="tab">
        <b-btn block href="#" v-b-toggle.accordion1 variant="info">{{menus[0].title}}</b-btn>
    </b-card-header>
    <b-collapse id="accordion1" visible accordion="my-accordion" role="tabpanel">
        <b-card-body>
            <p class="card-text">
                <b-nav vertical class="w-30">
                    <b-nav-item  v-for="item in menus[0].items" v-on:click="openFun(item.title)">{{item.title}}</b-nav-item>
                </b-nav>
            </p>
        </b-card-body>
    </b-collapse>
</b-card>

Vue对象中的方法是：

methods: {
    openFun: function (message) {
        alert(message)
    }
}

动态创建tab标签

逻辑：

点击打开一个菜单

检查数据模型（tab卡）是否存在已经打开的菜单

如果已经打开过，则修改tab模型的数据，为 后面激活 tab卡做准备

如果没有打开，则检查是否已经达最大数，达到最大数则要求关闭

如果没有达到最大数据，则数据模型追加，为后面打开新的tab卡

根据模型数据，追加

Ps:遇到tab card问题，先看bootstrap4,再看bootstrap-vue

单个属性如何添加？如active ，查看源代码，发现和title没有啥区别

测试一下，OK！

<b-tab title="首页"   v-bind:active="false"  >
    <br>I'm the first fading tab
</b-tab>
<b-tab  v-bind:title="tabObjs[1].name" v-bind:active="true"  >
    <br>I'm the second tab content
</b-tab>
<b-tab v-bind:title="tabObjs[2].name"     v-bind:active="false" >
    <br>I'm the three tab content
</b-tab>

（绑定active）

接着用变量,上面代码稍做修改

<b-tab title="首页"   v-bind:active="tabObjs[0].isActive"  >
    <br>I'm the first fading tab
</b-tab>
<b-tab  v-bind:title="tabObjs[1].name" v-bind:active="tabObjs[1].isActive"  >
    <br>I'm the second tab content
</b-tab>
<b-tab v-bind:title="tabObjs[2].name"     v-bind:active="tabObjs[2].isActive" >
    <br>I'm the three tab content
</b-tab>

Ok

问题：但是动态修改数组当中属性isActive，发现前端无效

查阅挂房文档，发现这个是行不通的，好像是因为这个属性是传递到下级的<a>标签当中去了。

采取如下方法，可以传递样式

:title-link-class="linkClass(i.isActive)"

但实际显示的时候，出现2个同时选中的问题

调整思路：

1、数组动态增加

2、追加模块

追加模块的时候，红框内的内容必须加上，否则，新增加的页面不是活动状况；

点击左边导航菜单，已经存在的模块的时候，

关键有2点：

定义数据模型：tabIndex: 0

b-tabs  和上面的数据绑定：

<b-tabs v-model="tabIndex">

电子左边导航菜单的时候，修改tabIndex值

则当前的tab会是活动状态

点击老的？

Tab标签上，加上close按钮

Close上添加关闭事件

针对问题上面的问题，换一种思路。

另外一个思路：预先定义10个tab,和10个元素的数组，10个数组元素都是null.，显示属性全部为false，

1 点击菜单的时候，修改数组;

  检查是否有现有的数据，如果有，则把属变成活动

  如果没有，

则检查现有数据是否已达到可显示最大数10

如果没有达到，则把最后一个不可显示的属性，变成可以显示的

1. 变成一个模型
2. 动态改变当前选中的卡
3. 追加

先上11个元素数组

在上11个标签页

tabObjs: [
    {id:"0",icon:"",menuid:"m0",name:"首页",url:"",isActive:false,isShow:true},
    {id:"1",icon:"",menuid:"test1",name:"test1",url:"",isActive:false,isShow:true},
    {id:"2",icon:"",menuid:"tset2",name:"test2",url:"",isActive:false,isShow:true},
    {id:"3",icon:"",menuid:"tset3",name:"test3",url:"",isActive:false,isShow:true},
    {id:"4",icon:"",menuid:"test4",name:"test4",url:"",isActive:false,isShow:true},
    {id:"5",icon:"",menuid:"tset5",name:"test5",url:"",isActive:false,isShow:true},
    {id:"6",icon:"",menuid:"tset6",name:"test6",url:"",isActive:false,isShow:true},
    {id:"7",icon:"",menuid:"tset7",name:"test7",url:"",isActive:false,isShow:true},
    {id:"8",icon:"",menuid:"tset8",name:"test8",url:"",isActive:false,isShow:true},
    {id:"9",icon:"",menuid:"tset9",name:"test9",url:"",isActive:true,isShow:true},
    {id:"10",icon:"",menuid:"tset10",name:"test10",url:"",isActive:false,isShow:true}

],

11个标签

<b-tab title="首页"      v-if="true"  >
    <br>I'm the first fading tab
</b-tab>

<b-tab  v-bind:title="tabObjs[1].name"     v-if="tabObjs[1].isShow" >
    <br>I'm the second tab content
</b-tab>

<b-tab v-bind:title="tabObjs[2].name"      v-if="tabObjs[2].isShow"  >
    <br>I'm the three tab content
</b-tab>

<b-tab v-bind:title="tabObjs[3].name"        v-if="tabObjs[3].isShow"  >
    <br>I'm the three tab content
</b-tab>

<b-tab  v-bind:title="tabObjs[4].name"    v-if="tabObjs[4].isShow" >
    <br>I'm the second tab content
</b-tab>

<b-tab v-bind:title="tabObjs[5].name"    v-if="tabObjs[5].isShow"  >
    <br>I'm the three tab content
</b-tab>

<b-tab v-bind:title="tabObjs[6].name"    v-if="tabObjs[6].isShow"  >
    <br>I'm the three tab content
</b-tab>

<b-tab v-bind:title="tabObjs[7].name"    v-if="tabObjs[7].isShow"  >
    <br>I'm the three tab content
</b-tab>

<b-tab  v-bind:title="tabObjs[8].name"   v-if="tabObjs[8].isShow" >
    <br>I'm the second tab content
</b-tab>
<b-tab v-bind:title="tabObjs[9].name"      v-if="tabObjs[9].isShow"  >
    <br>I'm the three tab content
</b-tab>

<b-tab v-bind:title="tabObjs[10].name"    v-if="tabObjs[10].isShow"  >
    <br>I'm the three tab content
</b-tab>

默认就10个tab,但一开始都不显示;

点击

初始状态，就一个首页显示；

然后点击一个菜单，如果在原来的数组当中不存在，就在最后一个显示点：

点击菜单的时候，检查原来的项目当中，是否存在

打开菜单：用的axios，不解释

//open menu
    function  getFunction(p){
        axios.get(p).then(function(response){
            console.log("response:--------"+response.data);//请求正确时执行的代码
            setValueForDiv("frameDiv",response.data);
            //$("#frameDiv").html(response.data);
        }).catch(function (response){
            console.log(response);//发生错误时执行的代码
        });
  }

最后

以上就是寂寞小土豆为你收集整理的Flex管理界面布局的全部内容，希望文章能够帮你解决Flex管理界面布局所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。