Vue进阶(八)-Vue框架之集成Element-ui

最新推荐文章于 2024-05-15 22:50:31 发布

Coder-michael

最新推荐文章于 2024-05-15 22:50:31 发布

阅读量564

点赞数

分类专栏： Vue进阶文章标签： vue js 前端 vue.js javascript

本文链接：https://blog.csdn.net/weixin_46036165/article/details/105598842

版权

Vue进阶专栏收录该内容

15 篇文章 4 订阅

订阅专栏

Element-ui

ui 库，Element-ui 是饿了么出品的基于 Vue.js 的后台组件库！
官网： https://element.eleme.cn/#/zh-CN

1.安装使用

安装

npm install vue #install vue
vpm install

将所需要用到的vue.min.js和element-ui整合到lib目录中待用
在这里插入图片描述

2.第一个element-ui程序

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="./lib/element-ui/lib/theme-chalk/index.css">
</head>

<body>
  <div id="app">
    <!-- 所有的el-开头的标签都是elementui的组件！ -->
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>
  </div>
</body>
<!-- import Vue before Element -->
<script src="./lib/vue.min.js"></script>
<!-- import JavaScript -->
<script src="./lib/element-ui/lib/index.js"></script>

<script>
  new Vue({
    el: '#app',
    data: function () {
      return { visible: false }
    }
  })
</script>

</html>

3.常用的element-ui组件学习

1、容器

可以根据实际的UI设计直接粘贴过来使用

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="./lib/element-ui/lib/theme-chalk/index.css">
  <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;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 所有的el-开头的标签都是elementui的组件！ -->
      
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
        <el-footer>Footer</el-footer>
      </el-container>
      
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
      
  </div>
</body>
<!-- import Vue before Element -->
<script src="./lib/vue.min.js"></script>
<!-- import JavaScript -->
<script src="./lib/element-ui/lib/index.js"></script>

<script>
  new Vue({
    el: '#app',
    data: function () {
      return { visible: false }
    }
  })
</script>

</html>

2、图标（el内置的）

也推荐大家使用 https://fontawesome.dashgame.com/

icon="el-icon-search"

3、按钮

    <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>

4、文字链接

<div>
  <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
  <el-link type="primary">主要链接</el-link>
  <el-link type="success">成功链接</el-link>
  <el-link type="warning">警告链接</el-link>
  <el-link type="danger">危险链接</el-link>
  <el-link type="info">信息链接</el-link>
</div>

5、Form表单

radio

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="./lib/element-ui/lib/theme-chalk/index.css">
</head>

<body>
  <div id="app">
    <!-- 数据和vm对象绑定 -->
    <template>
        <el-radio v-model="radio" label="1">备选项</el-radio>
        <el-radio v-model="radio" label="2">备选项</el-radio>
      </template>
  </div>
</body>
<!-- import Vue before Element -->
<script src="./lib/vue.min.js"></script>
<!-- import JavaScript -->
<script src="./lib/element-ui/lib/index.js"></script>

<script>
  new Vue({
    el: '#app',
    data: function () {
        return {
        radio: '1'
      }
    }
  })
</script>

</html>

select

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="./lib/element-ui/lib/theme-chalk/index.css">
</head>

<body>
  <div id="app">
    <!-- 数据和vm对象绑定 -->
    <template>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </template>
  </div>
</body>
<!-- import Vue before Element -->
<script src="./lib/vue.min.js"></script>
<!-- import JavaScript -->
<script src="./lib/element-ui/lib/index.js"></script>

<script>
  new Vue({
    el: '#app',
    data: function () {
        return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  })
</script>

</html>

Coder-michael

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue进阶(八)-Vue框架之集成Element-ui

Element-uiui 库，Element-ui 是饿了么出品的基于 Vue.js 的后台组件库！官网： https://element.eleme.cn/#/zh-CN.1.安装使用安装npm install vue #install vuevpm install将所需要用到的vue.min.js和element-ui整合到lib目录中待用2.第一个element-ui程序...
复制链接

扫一扫

专栏目录