element-ui本地使用

简介: element-ui本地使用

官网上element-ui本地使用的例子:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</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>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>
</html>

在本地使用,需要把通过CDN方式引入的文件下载到本地,本地替换后会出现图标无法显示的问题。

原因:缺少两个文件(index.css中需要)

@font-face{
  font-family:element-icons;
  src:url(fonts/element-icons.woff) format("woff"),
  url(fonts/element-icons.ttf) format("truetype");
  ...
}

官方地址下载这两个文件

点进去,View Raw下载到index.css同级fonts下

图标正常显示了

注意版本要对应


相关文章
element-ui表单验证使用
element-ui的表单验证主要分三部分: validate options rules 最常用的是rules. 定义rule可以有三种形式: 函数: { name(rule, value, callback, source, options) {} } 对象: { name: { typ.
6692 0
|
1月前
|
前端开发 JavaScript 开发者
UI 框架:element-ui(二)
在当今快速发展的前端开发领域,用户界面的设计和交互体验日益成为软件成功的关键因素之一。Element UI,作为一款基于Vue.js的组件库,以其精美的界面和丰富的功能受到了广泛的关注与应用。它为开发者提供了一整套高质量的组件,帮助他们快速构建具有现代感的应用程序。 Element UI不仅注重美观的设计,还提供了良好的文档支持和社区活跃度,使得开发者能够轻松上手并解决实施过程中的各种问题。在这篇文章中,我们将深入探讨Element UI的基本特点、安装步骤,以及如何利用其强大的组件系统高效地构建用户友好的界面。无论您是初学者还是有经验的开发者,这篇文章都将为您开辟一条通向更高效开发的道路。
|
1月前
Element-UI组件的使用
【10月更文挑战第1天】
37 0
|
4月前
Element UI 按需引入(含CollapseTransition)
Element UI 按需引入(含CollapseTransition)
119 1
|
6月前
|
资源调度 JavaScript 开发者
如何强制安装element-ui
如何强制安装element-ui
117 0
|
11月前
|
前端开发 JavaScript CDN
【 Element UI 】—Element UI 的基本使用
【 Element UI 】—Element UI 的基本使用
|
11月前
|
XML JavaScript 小程序
element-ui下拉菜单组件Dropdown
<div id='app' style="margin:50px;"> <!-- 鼠标滑过显示下拉列表 这里设置了触发的方式,注意触发方式不能使用’:’绑定,以及绑定了触发选项时的方法 --> <el-dropdown trigger="hover" @command="handleCommand" > <span class="el-dropdown-link el-input__inner" style="display:block;width:200px;"> <!-- 没有选项的时候,默认显示的
215 0
|
JavaScript
组件toast(类似于element-ui的message组件)的实现
组件toast(类似于element-ui的message组件)的实现
160 0
element-ui中的prop 的相关作用
element-ui中的prop 的相关作用
463 0
element-ui自定义表单验证
element-ui自定义表单验证
56 0