Flex管理界面布局

最新推荐文章于 2022-05-11 17:03:49 发布

wh_xia_jun

最新推荐文章于 2022-05-11 17:03:49 发布

阅读量823

点赞数

本文链接：https://blog.csdn.net/wh_xia_jun/article/details/86710598

版权

布局关键属性：

flex-direction：

布局用到的css

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

左边导航栏

Bootstrap-Vue

采取Accordion Support:

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

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

2、修改id

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

Id不能重复

b_btn 当中的属性值

这三者要配套修改；

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

vue.js数据模型如下：

这里应该根据数据模型控制风琴栏的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" >
 I'm the first fading tab
</b-tab>
<b-tab v-bind:title="tabObjs[1].name" v-bind:active="true" >
 I'm the second tab content
</b-tab>
<b-tab v-bind:title="tabObjs[2].name" v-bind:active="false" >
 I'm the three tab content
</b-tab>

（绑定active）

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

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

问题：但是动态修改数组当中属性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

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

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

先上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" >
 I'm the first fading tab
</b-tab>

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

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

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

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

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

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

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

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

<b-tab v-bind:title="tabObjs[10].name" v-if="tabObjs[10].isShow" >
 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);//发生错误时执行的代码

        });

  }

wh_xia_jun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Flex管理界面布局

布局关键属性：flex-direction：布局用到的css Flex：1 我理解为100%剩余宽度左边导航栏Bootstrap-Vue采取Accordion Support:使用这个组件要修改三个地方：1、名称 {{menus[0].title}}…{{menus[9].title}}2、修改id&lt;b-colla...
复制链接

扫一扫