element UI1

最新推荐文章于 2024-05-14 21:37:06 发布

苗苗大佬

最新推荐文章于 2024-05-14 21:37:06 发布

阅读量101

点赞数

文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/weixin_39349045/article/details/120250165

版权

【链接】Theworld’smostpopularVueUIframework
https://element.eleme.cn/#/zh-CN
可以思考代码放置的位置
在这里插入图片描述

一、element UI

js文件发布在文件中

1）一开始出错的点在于把new一个vue写在了div中，导致看不到颜色，需要区分div和script的问题
2）引用js文件，需要能直接点击能打开，才能够引用到
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./js/index.css"></style>
    <script src="./js/vue.js"></script>
    <script src="./js/index.js"></script>
    <title>Document</title>

</head>
<body>
    <div id="app" > 
            <el-row>
                    <el-button>默认按钮</el-button>
                    <el-button type="primary">主要按钮</el-button>
                    <el-button type="success">成功按钮</el-button>
                    <el-button type="info">信息按钮</el-button>
                    <el-button type="warning">警告按钮</el-button>
                    <el-button type="danger">危险按钮</el-button>
                  </el-row>  </div>
            <script>       
const vmm=new Vue({
        el:'#app'})
    </script>
 
   
    
</body>
</html>

布局容器

【链接】Theworld’smostpopularVueUIframework
https://element.eleme.cn/#/zh-CN/component/installation

设置全局颜色

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./js/index.css"></style>
    <script src="./js/vue.js"></script>
    <script src="./js/index.js"></script>
    <title>Document</title>
    <style>
            .el-header, .el-footer {
              background-color: #B3C0D1;
              color: #333;
              text-align: center;
              line-height: 60px;
            }
            
            .el-aside {
              background-color: #D3DCE6;
              color: #333;
              text-align: center;
              line-height: 200px;
            }
            
            .el-main {
              background-color: #E9EEF3;
              color: #333;
              text-align: center;
              line-height: 160px;
            }
            
            body > .el-container {
              margin-bottom: 40px;
            }
            
            .el-container:nth-child(5) .el-aside,
            .el-container:nth-child(6) .el-aside {
              line-height: 260px;
            }
            
            .el-container:nth-child(7) .el-aside {
              line-height: 320px;
            }

        body {
    margin: 0px;
}
        body,html
{
    height: 100%
}
        #app{height: 100%}
          </style>
</head>
<body>
    <div id="app" > 
            <el-container style="height:100%">
                    <el-aside width="200px">Aside</el-aside>
                    <el-container>
                      <el-header>Header</el-header>
                      <el-main>Main</el-main>
                    </el-container>
                  </el-container>
                
                
                </div>
            <script>       
const vmm=new Vue({
        el:'#app'})
    </script>
 
   
    
</body>
</html>

导航菜单

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./js/index.css"></style>
    <script src="./js/vue.js"></script>
    <script src="./js/index.js"></script>
    <title>Document</title>
    <style>
            .el-header, .el-footer {
              background-color: #B3C0D1;
              color: #333;
              text-align: center;
              line-height: 60px;
            }
            
            .el-aside {
              background-color: #D3DCE6;
              color: #333;
              text-align: center;
              line-height: 200px;
            }
            
            .el-main {
              background-color: #E9EEF3;
              color: #333;
              text-align: center;
              line-height: 160px;
            }
            
            body > .el-container {
              margin-bottom: 40px;
            }
            
            .el-container:nth-child(5) .el-aside,
            .el-container:nth-child(6) .el-aside {
              line-height: 260px;
            }
            
            .el-container:nth-child(7) .el-aside {
              line-height: 320px;
            }

        body {
    margin: 0px;
}
        body,html
{
    height: 100%
}
        #app{height: 100%}
          </style>
</head>
<body>
    <div id="app" > 
            <el-container style="height:100%">
                    <el-aside width="200px">
                            <el-menu :default-openeds="['1', '3']">
                                    <el-submenu index="1">
                                      <template slot="title"><i class="el-icon-message"></i>导航一</template>
                                      <el-menu-item-group>
                                        <el-menu-item index="1-1">选项1</el-menu-item>
                                        <el-menu-item index="1-2">选项2</el-menu-item>
                                        <el-menu-item index="1-3">选项3</el-menu-item>
                                        <el-menu-item index="1-4">选项4</el-menu-item>
                                      </el-menu-item-group>
                                      
                                       
                                     
                                    </el-submenu>
                                  
                                    
                                  </el-menu>


                    </el-aside>
                    <el-container>
                      <el-header>Header</el-header>
                      <el-main>Main</el-main>
                    </el-container>
                  </el-container>
                
                
                </div>
            <script>       
const vmm=new Vue({
        el:'#app'})
    </script>
 
   
    
</body>
</html>

Layout 布局

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./js/index.css"></style>
    <script src="./js/vue.js"></script>
    <script src="./js/index.js"></script>
    <title>Document</title>
    <style>
        
            .el-header, .el-footer {
              background-color: #B3C0D1;
              color: #333;
              text-align: center;
              line-height: 60px;
            }
            
            .el-aside {
              background-color: #D3DCE6;
              color: #333;
              text-align: center;
              line-height: 200px;
            }
            
            .el-main {
              background-color: #E9EEF3;
              color: #333;
              text-align: center;
              line-height: 160px;
            }
            
            body > .el-container {
              margin-bottom: 40px;
            }
            
            .el-container:nth-child(5) .el-aside,
            .el-container:nth-child(6) .el-aside {
              line-height: 260px;
            }
            
            .el-container:nth-child(7) .el-aside {
              line-height: 320px;
            }

        body {
    margin: 0px;
}
        body,html
{
    height: 100%
}
        #app{height: 100%}



      
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

          </style>
</head>
<body>
    <div id="app" > 
            <el-container style="height:100%">
                    <el-aside width="200px">
                            <el-menu :default-openeds="['1', '3']">
                                    <el-submenu index="1">
                                      <template slot="title"><i class="el-icon-message"></i>导航一</template>
                                      <el-menu-item-group>
                                        <el-menu-item index="1-1">选项1</el-menu-item>
                                        <el-menu-item index="1-2">选项2</el-menu-item>
                                        <el-menu-item index="1-3">选项3</el-menu-item>
                                        <el-menu-item index="1-4">选项4</el-menu-item>
                                      </el-menu-item-group>
                                      
                                       
                                     
                                    </el-submenu>
                                  
                                    
                                  </el-menu>


                    </el-aside>
                    <el-container>
                      <el-header>Header</el-header>
                      <el-main>
                            <el-row>
                                    <el-col :span="12" :offset="6" ><div class="grid-content bg-purple-dark">
                                 <el-input v-model="input"  style="width:250px" placeholder="请输入内容"></el-input>
                                    </div></el-col>
                                  </el-row>
                      </el-main>
                    </el-container>
                  </el-container>
                
                
                </div>
            <script>       
const vmm=new Vue({
        el:'#app', data() {
    return {
      input: ''
    }
  }
    })
    </script>
 
   
    
</body>
</html>

苗苗大佬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
element UI1

【链接】Theworld’smostpopularVueUIframeworkhttps://element.eleme.cn/#/zh-CN可以思考代码放置的位置一、element UIjs文件发布在文件中1）一开始出错的点在于把new一个vue写在了div中，导致看不到颜色，需要区分div和script的问题2）引用js文件，需要能直接点击能打开，才能够引用到<!DOCTYPE html><html lang="en"><head> &
复制链接

扫一扫