Element UI

最新推荐文章于 2023-10-18 14:21:23 发布

HashFlag

最新推荐文章于 2023-10-18 14:21:23 发布

阅读量138

点赞数

分类专栏： python

本文链接：https://blog.csdn.net/sinat_41672927/article/details/105604928

版权

python 专栏收录该内容

89 篇文章 0 订阅

订阅专栏

Element UI

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

基本使用示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style type="text/css">
        .el-menu{
            display: flex;
            align-items: center; /* 水平居中 */
            justify-content: center; /* 垂直居中 */
        }
    </style>
</head>
<body>
<div id="app">
    <my_header></my_header>
    <router-view></router-view>
</div>
<template id="header">
    <div class="luffy_header">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :router="true">
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item index="/course">轻课</el-menu-item>
            <el-menu-item index="3">免费课程</el-menu-item>
            <el-menu-item index="4">学位课程</el-menu-item>
            <el-menu-item index="5">智能题库</el-menu-item>
            <el-menu-item index="6">处理中心</el-menu-item>
        </el-menu>
    </div>
</template>
<script>
    let my_header = {
        template:"#header",
        data(){
            return{
                activeIndex:"/"
            }
        }
    };
    let url = [
        {
            path:"/",
            component:{
                template: '<div><h1>首页组件</h1></div>'
            }
        },
        {
            path:"/course",
            component:{
                template: '<div><h1>课程组件</h1></div>'
            }
        },
    ];
    let router = new VueRouter({
        routes:url,
    })
    const app = new Vue({
        el:"#app",
        router: router,
        components:{
            my_header:my_header
        }
    })
</script>
</body>
</html>

HashFlag

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Element UI

Element UIElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库基本使用示例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> &l...
复制链接

扫一扫