Element UI

Element UI

简介

基于 Vue 2.0 的桌面端组件库，可在官网查看中文文档。

安装

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 -->
<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>

使用

  1. 在 <head> </head> 中引入elementUI样式

  2. 引入Vue

    Vue引入要在 elementUI 组件引入之前

  3. 引入 elementUI 组件库

  4. 新建 Vue 对象进行挂载

    不挂载不会生效

标准示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <el-button @click="visible = true">Button</el-button>
        <el-dialog :visible.sync="visible" title="Hello world">
            <p>Try Element</p>
        </el-dialog>
    </div>
</body>
<!-- 引入Vue -->
<script src="../vue.js"></script>
<!-- 引入组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: function () {
            return { visible: false }
        }
    })
</script>
</html>

常用组件

Icon 图标

提供了一套常用的图标集合，直接使用 i 标签结合 class 来使用：

<i class="el-icon-iconName"></i>

el-icon-iconName 为官网定义的图标名称，直接取官网查找对应的图标，修改 class 属性即可。

Button 按钮

是 Element UI 提供的一组常用的操作按钮组件，直接使 用封装好的 el-button ,比如：

<el-button>按钮</el-button>

基于 el-button 按钮，可以使用 type、plain、round、 circle 、disabled等属性对按钮进行修饰。

  • type 设置按钮的样式
  • plain 可以减弱按钮的背景颜色效果
  • round 用来给按钮设置圆角
  • circle 将按钮设置为圆形
  • disabled 设置按钮的可用状态
  • loading 属性可用给按钮设置“加载中”的效果
  • size 属性可用设置按钮的大小，medium，small，mini

文字超链接，使用 el-link 标签来实现

<el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
posted @ 2022-05-05 08:08  AncilunKiang  阅读(399)  评论(0)    收藏  举报