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>

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。