碼上歡樂
相關內容    簡體    繁體

[javascript] 基於elementui的后台界面開發

本文轉載自   查看原文   2020-04-27 18:04   564    PHP

elementui是一套vuejs框架的ui庫 , 主要邏輯是按照vuejs的組件方式來組合的

安裝有多種方式,可以使用npm的包安裝,也可以直接引用cdn資源,在這里為了簡單起見使用cdn方式. 主體架構還是傳統的iframe的結構 , 框進來一個main界面

沒有使用vue-router , 只是把vue當做一個模板引擎來用

引入資源還是這種直接引入 , 沒有使用構建工具去打包 , 因為對於后端來說 ,還是這種方式最簡單直觀有效

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/theme-chalk/index.css">
        <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入組件庫 -->
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"></script>

 

把結構加上 , 架構使用template包起來 ,這樣在js渲染之前不會顯示出亂的界面 . 標簽上的屬性傳參和循環邏輯等都是vuejs里面的功能 , 需要看vuejs的文檔才能知道這些是干啥的

<div id="app">
    <template>
        <el-menu 
            class="hg-header"
            default-active="2"
            mode="horizontal" 
            >
            <el-menu-item index="1" class="mainLogo">海廣傳媒</el-menu-item>
            <el-menu-item index="2">輿情監控</el-menu-item>
            <el-menu-item index="3">媒資庫</el-menu-item>
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>yalaya</span>
            </el-header>
        </el-menu>

        <el-container>
            <el-aside width="200px">
                <el-menu
                    default-active="1"
                    class="el-menu-vertical-demo"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    >
                    <el-menu-item index="1" v-on:click="openUrl('index.php?r=media/weibolist', '微博監控')">
                        <i class="el-icon-menu"></i>
                        <span slot="title">微博監控</span>
                    </el-menu-item>
                    <el-menu-item index="2" v-on:click="openUrl('index.php?r=media/weibolist', '微博監控')">
                        <i class="el-icon-menu"></i>
                        <span slot="title">微信監控</span>
                    </el-menu-item>
                    <el-menu-item index="3" v-on:click="openUrl('http://www.baidu.com', '微博監控')">
                        <i class="el-icon-menu"></i>
                        <span slot="title">頭條監控</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>



            <el-main class="mainMain">
                <iframe id="mainIframe" class="mainIframe"  v-bind:src="iframeUrl" frameborder="0"></iframe>
            </el-main>
        </el-container>
    </template>            
</div>

js把數據 , 綁定的點擊事件等加上

    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    iframeUrl: "index.php?r=media/weibolist",
                }
            },
            methods: {
                openUrl: function (url,msg) {
                    this.iframeUrl=url;
                }
            }
        })


    </script>

 

 

　　

完整的帶着覆蓋樣式的代碼如下:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <meta charset="utf-8" />
        <title>媒資庫</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/theme-chalk/index.css">
        <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

        <style>
            html, body{
                margin: 0;
                padding: 0;
            }
            #app{
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                overflow: hidden;
                right: 0;
            }
            .mainLogo{
                font-size: 20px;
                font-weight: bold;
            }
            .hg-header{
                background-color: rgb(31, 123, 182);
            }
            .el-menu.el-menu--horizontal{
                border-bottom: none;
                padding-bottom: 4px;
            }
            .el-menu--horizontal>.el-menu-item.is-active{
                border-bottom: 3px solid #ffffff;
                color: #fff;
            }

            .el-menu--horizontal>.el-menu-item{
                color:#fff;
            }
            .el-menu--horizontal>.el-menu-item:hover{
                border-bottom: 3px solid #ffffff;

            }
            .el-menu--horizontal .el-menu-item:not(.is-disabled):focus{
                color:#fff;
                background: none;
            }
            .el-menu--horizontal .el-menu-item:not(.is-disabled):hover{
                color:#fff;
                background-color:rgb(26, 101, 150);
            }
            .el-header{
                line-height: 60px;
                color: #fff;
            }
            .el-dropdown{
                color: #fff;
            }
            .el-aside{
                background-color: rgb(84, 92, 100);
            }
            .el-menu{
                border-right: none;
            }
            .el-container{
                height:100%;
            }
            .mainMain{
                height:calc(100% - 64px);
                overflow-y: hidden;
            }
            .mainIframe{
                width:100%;
                height:100%;
            }
            .mainBorad{
                display: block;
            }
            .clearfix{
                clear: both;
            }
        </style>
    </head>
    <body>
        


<div id="app">
    <template>
        <el-menu 
            class="hg-header"
            default-active="2"
            mode="horizontal" 
            >
            <el-menu-item index="1" class="mainLogo">海廣傳媒</el-menu-item>
            <el-menu-item index="2">輿情監控</el-menu-item>
            <el-menu-item index="3">媒資庫</el-menu-item>
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>yalaya</span>
            </el-header>
        </el-menu>

        <el-container>
            <el-aside width="200px">
                <el-menu
                    default-active="1"
                    class="el-menu-vertical-demo"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    >
                    <el-menu-item index="1" v-on:click="openUrl('index.php?r=media/weibolist', '微博監控')">
                        <i class="el-icon-menu"></i>
                        <span slot="title">微博監控</span>
                    </el-menu-item>
                    <el-menu-item index="2" v-on:click="openUrl('index.php?r=media/weibolist', '微博監控')">
                        <i class="el-icon-menu"></i>
                        <span slot="title">微信監控</span>
                    </el-menu-item>
                    <el-menu-item index="3" v-on:click="openUrl('http://www.baidu.com', '微博監控')">
                        <i class="el-icon-menu"></i>
                        <span slot="title">頭條監控</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>



            <el-main class="mainMain">
                <iframe id="mainIframe" class="mainIframe"  v-bind:src="iframeUrl" frameborder="0"></iframe>
            </el-main>
        </el-container>
    </template>            
</div>



    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入組件庫 -->
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    iframeUrl: "index.php?r=media/weibolist",
                }
            },
            methods: {
                openUrl: function (url,msg) {
                    this.iframeUrl=url;
                }
            }
        })


    </script>
</html>

　　

iframe框進去的頁面完整代碼如下:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <meta charset="utf-8" />
        <title>媒資庫</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/theme-chalk/index.css">
        <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

        <style>
            html, body{
                margin: 0;
                padding: 0;
            }
            #app{
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                overflow: hidden;
                right: 0;
            }
            .mainLogo{
                font-size: 20px;
                font-weight: bold;
            }
            .hg-header{
                background-color: rgb(31, 123, 182);
            }
            .el-menu.el-menu--horizontal{
                border-bottom: none;
                padding-bottom: 4px;
            }
            .el-menu--horizontal>.el-menu-item.is-active{
                border-bottom: 3px solid #ffffff;
                color: #fff;
            }

            .el-menu--horizontal>.el-menu-item{
                color:#fff;
            }
            .el-menu--horizontal>.el-menu-item:hover{
                border-bottom: 3px solid #ffffff;

            }
            .el-menu--horizontal .el-menu-item:not(.is-disabled):focus{
                color:#fff;
                background: none;
            }
            .el-menu--horizontal .el-menu-item:not(.is-disabled):hover{
                color:#fff;
                background-color:rgb(26, 101, 150);
            }
            .el-header{
                line-height: 60px;
                color: #fff;
            }
            .el-dropdown{
                color: #fff;
            }
            .el-aside{
                background-color: rgb(84, 92, 100);
            }
            .el-menu{
                border-right: none;
            }
            .el-container{
                height:100%;
            }
            .mainMain{
                height:calc(100% - 64px);
                overflow-y: hidden;
            }
            .mainIframe{
                width:100%;
                height:100%;
            }
            .mainBorad{
                display: block;
            }
            .clearfix{
                clear: both;
            }
        </style>
    </head>
    <body>
        <style>
    .mainAccountList{
        line-height: 22px;
        font-size: 14px;
    }
    .mainAccountList .title{
        font-weight: bold;
        font-size: 14px;
    }
    .mainAccountList .mainTime{
        font-size: 12px;
        color:#898989;
    }
    .mainAccountList .el-button{
        padding: 8px 10px;
        margin-right:40px;
    }
    .mainAccountBox{
        margin-bottom: 20px;
    }
    .mainSearch{
        margin-bottom: 15px;
        line-height: 40px;
    }
    .mainSearch .todayUpdate{
        font-size: 14px;
        float: right;
        text-align: right;
        color:#a8a8a8;
    }
</style>
<div id="weibolist">
    <template>
        <el-container>
            <el-header height="20px">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首頁</el-breadcrumb-item>
                    <el-breadcrumb-item>輿情監控</el-breadcrumb-item>
                    <el-breadcrumb-item>微博監控</el-breadcrumb-item>
                </el-breadcrumb>
            </el-header>
            <el-main>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <!--微博賬戶-->
                    <el-tab-pane label="監控賬戶信息流" name="first">
                        <div class="mainSearch">
                            <el-row>
                                <el-col :span="10">
                                    <el-input placeholder="在信息流中搜索關鍵詞" v-model="weiboSearch" class="input-with-select">
                                        <el-button slot="append" icon="el-icon-search"></el-button>
                                    </el-input>
                                </el-col>
                                <el-col :span="4" class="todayUpdate">
                                    今日更新:27條
                                </el-col>
                            </el-row>
                        </div>
                        <el-row v-for="item in (1,2,3,4)" class="mainAccountBox">
                            <el-card :body-style="{ padding: '10px' }">
                                <el-col :span="2">
                                    <el-avatar :size="80">
                                        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                                    </el-avatar>
                                </el-col>
                                <el-col :span="22">

                                    <div class="mainAccountList">
                                        <div class="title">海口發布</div>
                                        <div class="mainIntro">
                                            【#交警扮盲人帶導盲犬坐公交被趕# ，狗狗哭了】近日，山西太原。交警莉姐扮盲人體驗生活，帶導盲犬上公交車被拒，有乘客罵罵咧咧，說耽誤別人的事，被趕下車的導盲犬委屈地哭了。據相關法規導盲犬可以乘坐公共交通。（素材來源：網絡）
                                        </div>
                                        <div class="mainTime">
                                            2020-4-27 16:24:38
                                            <el-button type="text" class="button">來自專業版微博平台</el-button>
                                        </div>
                                        <div class="bottom">
                                            <el-button type="primary" class="button">復制URL</el-button>
                                            <el-button type="primary" class="button">復制短URL</el-button>
                                            <el-button type="success" class="button">推至CMS</el-button>
                                        </div>
                                    </div>
                                </el-col>
                                <div class="clearfix"></div>
                            </el-card>

                        </el-row>

                    </el-tab-pane>
                    <!--//微博賬戶-->
                    <el-tab-pane label="監控關鍵詞信息流" name="second">監控關鍵詞信息流</el-tab-pane>
                    <el-tab-pane label="微博熱搜榜單" name="third">微博熱搜榜單</el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
    </template>            
</div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入組件庫 -->
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    iframeUrl: "index.php?r=media/weibolist",
                }
            },
            methods: {
                openUrl: function (url,msg) {
                    this.iframeUrl=url;
                }
            }
        })


        new Vue({
            el: '#weibolist',
            data: function () {
                return {
                    activeName:"first",
                }
            },
            methods: {
                handleClick(tab, event) {
                    console.log(tab, event);
                }
            }
        })
    </script>
</html>

　　

　　

　　


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 vue+elementui搭建后台管理界面 JavaScript界面傳值與前后台互調 vue+elementui搭建后台管理界面(1登錄) vue+elementui搭建后台管理界面(2首頁) vue+elementui搭建后台管理界面(7 vuex和mockjs的使用) [javascript] elementui下login登錄頁界面和js驗證邏輯 SpringBoot + Vue + ElementUI 開發的后台管理系統模板 vue+elementui搭建后台管理界面(3側邊欄菜單) vue+elementui搭建后台管理界面(6登錄和菜單權限控制[二]) vue+elementui搭建后台管理界面(4使用font-awesome)
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM