ElementUI 直接引入示例 不编译

最新推荐文章于 2024-04-27 10:26:13 发布
最新推荐文章于 2024-04-27 10:26:13 发布
阅读量569 收藏
点赞数
文章标签： elementui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lk419121010221/article/details/131509000
版权 
<!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">
    <title>Document</title>
       <!-- 引入样式 -->
       <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-progress type="circle" :percentage="num"></el-progress>
<el-progress type="circle" :percentage="num" status="success"></el-progress>
<el-progress type="circle" :percentage="num" status="warning"></el-progress>

<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">搜索</el-button>




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

<el-row>
  <el-button plain>朴素按钮</el-button>
  <el-button type="primary" plain>主要按钮</el-button>
  <el-button type="success" plain>成功按钮</el-button>
  <el-button type="info" plain>信息按钮</el-button>
  <el-button type="warning" plain>警告按钮</el-button>
  <el-button type="danger" plain>危险按钮</el-button>
</el-row>

<el-row>
  <el-button round>圆角按钮</el-button>
  <el-button type="primary" round>主要按钮</el-button>
  <el-button type="success" round>成功按钮</el-button>
  <el-button type="info" round>信息按钮</el-button>
  <el-button type="warning" round>警告按钮</el-button>
  <el-button type="danger" round>危险按钮</el-button>
</el-row>

<el-row>
  <el-button icon="el-icon-search" circle></el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>

 <div class="block">
    <span class="demonstration">默认</span>
    <el-slider v-model="value1"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">自定义初始值</span>
    <el-slider v-model="value2"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">隐藏 Tooltip</span>
    <el-slider v-model="value3" :show-tooltip="false"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">格式化 Tooltip</span>
    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>
  </div>
  <div class="block">
    <span class="demonstration">禁用</span>
    <el-slider v-model="value5" disabled></el-slider>
  </div>


    </div>

<script>
    new Vue({
      el: '#app',
      data: function() {
        return {
             visible: false ,
             num:0,
			 
			   value1: 0,
        value2: 50,
        value3: 36,
        value4: 48,
        value5: 42
			 
            }
      },
      created(){
        this.fun()
      },
      methods:{
	  
	   formatTooltip(val) {
        return val / 100;
      },
	  
          fun(){
             if(this.num >=100)return
             setTimeout(()=>{
                  this.num+=20
                  this.fun()
              },1000)
          }
      }
    })
</script>
</body>
</html>

ElementUI 直接引入示例  不编译

官方文档：https://element.eleme.cn/#/zh-CN/component/quickstart

杭杭爸爸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
直接编译的Delphi OpenGL三维将军示例代码.rar
03-31
直接编译的Delphi OpenGL三维将军示例代码.rar
html直接引用vue和element-ui的方法
11-19
代码如下所示：
ElementUI项目搭建示例.zip
12-19
ElementUI项目搭建示例
利用vue+elementUI实现部分引入组件的方法详解
08-28
主要给大家介绍了关于利用vue+elementUI实现部分引入组件的相关资料，以及介绍了vue引入elementUI报错的解决方法，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
基于elementUI实现图片预览组件的示例代码
12-09
这是一个简单的点击图片预览的组件 顺便记录一下写组件期间踩的vue中scope的坑~ 从注册全局组件开始叭！ 项目目录： 模仿elementUI目录结构，目录名是组件名，src中是组件源文件（或者js服务文件），文件目录下还有一个index.js用于同一管理src中的所有文件，导出并注册，这个组件我们只有一个vue文件件 先看index.js文件里有什么： //引入了src下的vue组件文件 import starPicList from './src/star-pic-list'; /* istanbul ignore next */ starPicList.install =
elementui2.8版本cdn引用使用
05-07
elementui2.8版本，使用cdn引入时资源源文件。包含js、css及图标文件。可直接使用。
几种引入element UI的方法详解
weixin_43778617的博客
12-26 8207
引入elementUI组件的方法
Vue3加载element依赖步骤以及错误
qq_52384627的博客
09-29 1219
加载element依赖发生错误解决办法
elementUI安装和引入方法（通用）
热门推荐
qq_43985785的博客
03-11 1万+
1.npm安装 官网推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。 npm i element-ui -S 安装完可以在根目录下的package.json里找到deoendencies查看element的安装版本 2.CDN（在页面上引入 js 和 css 文件即可开始使用） 优势：可以直接获取到最新版本的资源 劣势：element升级时可能会遇到兼容性问题，推荐引入 Element 的用户在链接地址上锁定版本（我应该不会用它所以不写了，官网有） <!-- 引入样式
element-ui本地引用方法
ttphoon的博客
03-05 1万+
之前写了讲element-ui下载到本地的方法： https://blog.csdn.net/ttphoon/article/details/104653785 但是，下载下来后要去使用发现只有官方文档里的首个例子可以正常运行，之后的各个脚本执行都是样式无效的，需要去修改一些内容。 首先，引用本地element-ui <script src="/static/html/common/vu...
编译安装redisd的方法示例详解
12-14
安装方法： yum安装 查看yum仓库redis版本 [root@centos ~]# yum list redis Loaded plugins: fastestmirror, langpacks Loading mirror speeds from cached hostfile Available Packages redis.x86_64 3.2.12-2.el7 myepel yum安装 [root@centos ~]# yum install redis -y 启动服务并设为开机启动 [root@centos ~]# systemctl enable --now redis
基于VueElementui实现的一套后台管理系统HTML模板无须编译开箱即用
08-08
基于Vue、Element-ui实现的一套后台管理系统HTML模板，无须编译、开箱即用
vue项目安装使用element_UI
码农键盘上的梦
01-06 7143
6:打开SRC里的APP.vue在终端打开 输入npm run serve 即可运行本文件。要在自己下载vue脚手架自定义命名的文件里用终端打开!5:运行vue项目 打开vue项目在集成终端打开 输入 npm run serve。第一步: 在Vscode 随意打开一个文件夹,在集成终端打开。第二步:新建一个文件夹,并且在集成终端打开安装VUE脚手架。4 :还有要在VScode 安装 vetur 插件!安装element_UI之前需要安装VUE脚手架框架!5: 进入当前文件夹 OK!
从0-1创建Vue项目,整合ElementUI
m0_55627541的博客
04-22 3110
从0-1创建Vue2.0项目
#html直接引用vue和element-ui的方法
Daydreame_r的博客
02-14 3155
html直接引用vue和element-ui的方法。本地引入element-ui，图标不显示不展示的问题。
element-ui如何按需引入以及引入方法的两种方式
weixin_45890764的博客
04-11 8021
按需引入 在使用element-ui时绝大多数情况，我们都是按需引入，我来总结一下如何按需引入 第一步： vue add element 第二步： 这时会出现这个提醒 他是意思是：当前存储库中有未提交的更改，建议提交 或者先藏起来。不用管它，直接 y 这时会下载element 下载完成之后会提示你是完全引入还是按需引入。完全引入的话会使我们的包变大，因为这里边很多组件在我们实际项目中都用不到。所以我们选择按需引入，如下图 第三步： 第四步：选择要加载的区域设置 这样我们就按需引用完毕了。这时我们会
在项目中自定义路径放入element-ui并修改编译源码
liusaint1992的专栏
10-14 9251
在项目中自定义路径引入element-ui并自定义修改element-ui源码后编译使用
vue不用脚手架直接引用elementui组件（完整全过程）
qq_56047419的博客
06-20 1877
vue框架普通模式下（不使用脚手架）使用elementUI组件
el-table-column 表格列自适应宽度的组件封装说明
最新发布
前端，请指教
04-27 337
针对组件业务上的需求，需要给 el-table-column 加上限制，需保证表头在一行展示，部分列的内容要一行展示，自适应单项列的宽度；
elementui引入富文本
05-30
ElementUI并没有提供自己的富文本编辑器，但可以通过引入第三方的富文本编辑器来实现。以下是一个使用ElementUI和Quill富文本编辑器的示例: 1. 首先，需要安装Quill富文本编辑器的npm包，可以通过以下命令进行安装: ``` npm install quill ``` 2. 在需要使用富文本编辑器的组件中引入Quill和ElementUI的样式文件: ```javascript import 'quill/dist/quill.snow.css'; import 'element-ui/lib/theme-chalk/index.css'; ``` 3. 在组件的template中添加一个包含Quill编辑器的div元素: ```html <template> <div> <div ref="editor"></div> </div> </template> ``` 4. 在组件的script中，使用Quill的构造函数创建一个编辑器实例，并将其绑定到div元素上: ```javascript import Quill from 'quill'; export default { mounted() { this.editor = new Quill(this.$refs.editor, { modules: { toolbar: [ [{ 'header': [1, 2, false] }], ['bold', 'italic', 'underline'], ['image', 'code-block'] ] }, placeholder: '请输入内容', theme: 'snow' }); } } ``` 在这个示例中，我们使用了Quill的默认工具栏，并添加了一些自定义的选项，如插入图片和代码块。你可以根据自己的需要来配置工具栏的选项。 5. 最后，如果需要获取编辑器中的内容，可以使用以下代码: ```javascript this.editor.root.innerHTML ``` 这会返回一个包含编辑器内容的HTML字符串。 希望这个示例能够帮助你实现ElementUI中的富文本编辑器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值