vue使用ElementUI

这篇具有很好参考价值的文章主要介绍了vue使用ElementUI。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.安装

npm i element-ui -S

vue使用ElementUI,ElementUI,vue.js,elementui,前端 

2.引入

2.1完整引入

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

2.2按需引入

说明:为了输入时候有提示,建议安装vue-helper

npm install babel-plugin-component -D

 vue使用ElementUI,ElementUI,vue.js,elementui,前端

2.2.1创建babel.config.js

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk",
      },
    ],
  ],
};

2.2.2 main.js

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

3.案例

说明:弹出框的实现。

3.1main.js

// element-ui挂在原型上
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;

3.2vue

<a class="btn" @click="open">立即支付</a>

3.3script

    // 弹出框
    async open() {
      // 生成一个二维码(地址)
      let url = await QRCode.toDataURL(this.payInfo.codeUrl);

      this.$alert(`<img src=${url} />`, "请你微信支付", {
        // 	是否将 message 属性作为 HTML 片段处理,
        // 也就是展示标签的意思
        dangerouslyUseHTMLString: true,
        // 是否居中布局
        center: true,
        // 是否显示取消按钮
        showCancelButton: true,
        // MessageBox 是否显示右上角关闭按钮
        showClose: true,
        // 取消按钮的文本
        cancelButtonText: "支付遇见问题",
        // 确定按钮的文本内容
        confirmButtonText: "已支付成功",
        // 关闭弹出框的配置值
        brforeClose: (type, instance, done) => {
          // type区分取消||确定按钮
          // instance当前组件实例
          // done:关闭弹出框的方法
          if (type == "cancel") {
            alert("请联系管理员");
            // 清除定时器
            clearInterval(this.timer);
            this.timer = null;
            done();
          } else {
            // 判断是否真的支付了
            // if (this.code == 200) {
              clearInterval(this.timer);
              this.timer = null;
              done()
              // 有的时候定时器还没监听到,用户支付成功了发现没跳转 立马点了支付成功的情况。
              this.$router.push("/paysuccess");
            // }
          }
        },
      });
      // 支付成功||失败
      // 支付成功,路由跳转,如果支付失败,提示信息
      // 定时器没有,那么要开启一个定时器
      if (!this.timer) {
        this.time = setTimeout(async () => {
          // 发请求获取用户支付的状态
          let result = await this.$API.reqPayStatus(this.orderId);
          // 如果code等于200,那么表示支付已经成功了
          if (result.code == 200 || result.code == 205) {
            // 清楚定时器
            clearInterval(this.timer);
            this.timer = null;
            // 保存code
            this.code = result.code;
            // 关闭弹出框
            this.$msgbox.close();
            // 跳转到下一页路由
            this.$router.push("/paysuccess");
          }
        }, 1000);
      }
    },

 3.4展示

 文章来源地址https://www.toymoban.com/news/detail-640628.html

 

 

 

到了这里,关于vue使用ElementUI的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue + ElementUI 实现后台管理系统模板 -- 前端篇

    使用场景分析: Home.vue 页面中,Header 部分有个折叠按钮,点击之后,可以折叠与展开 Aside 组件,这之间就设计到数据在组件间的共享。 使用 vuex 后,数据统一管理,当数据发生变化时,其所有引用的地方均会修改。 2、安装、模块化使用 vuex 1》安装 项目构建时,已经安装

    2024年04月11日
    浏览(42)
  • 40、使用elementUI分别实现前端,后端表格分页

    一、前端分页 1、创建表格 说明:slice(a,b)的作用是从已有的数组中返回选定的元素\\\"a\\\"表示开始,\\\"b\\\"表示结束。 而currentPage和pageSize在此网页的作用会在接下来进行说明。 2、创建分页 说明分页器绑定变量说明: :current-page的值表示当前是第几页; :page-sizes的值表示可以选择一

    2024年02月12日
    浏览(89)
  • vue使用ElementUI

    npm i element-ui -S   说明:为了输入时候有提示,建议安装vue-helper npm install babel-plugin-component -D   2.2.1创建babel.config.js 2.2.2 main.js 说明:弹出框的实现。        

    2024年02月13日
    浏览(29)
  • 使用Vue+elementUI实现CRUD

    最近了解了一下前端框架VUE,来记录一下 Vue官网https://cn.vuejs.org/ Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整

    2024年02月16日
    浏览(40)
  • Vue简单使用及整合elementui

    在vue工程目录下 npm install vue 下载离线vue https://v2.vuejs.org/v2/guide/installation.html 引入工程中 测试 测试页面 修改vm对象,绑定的值跟着变化 谷歌商店下载 在打开html时候可以看到有个vue选项看到vue中的对象 全局安装 npm install webpack -g 全局安装 npm install webpack -g @vue/cli-init 安装

    2024年02月16日
    浏览(35)
  • 前端使用elementui开发后台管理系统的常用功能(持续更新)

    前言:本次的文章完全是自己开发中遇到的一些问题,经过不断的修改终于完成的一些功能,当个快捷的查看手册吧~ 功能描述:数据使用的若依的字典,或者是自定义数据,可以点击每个选项进行选择,取消选择,也可以在已选择进行清除和单个删除 使用: @selection-change

    2024年02月09日
    浏览(48)
  • vue elementui 实现从excel从复制多行多列后粘贴到前端界面el-table

    可以全部复制粘贴,也可以单独对某行、某列进行复制粘贴 从excel复制粘贴到前端页面的table上 html部分: js部分:

    2024年02月04日
    浏览(57)
  • 前端vue+elementui导出复杂(单元格合并,多级表头)表格el-table转为excel导出

    需求 :前端对el-table表格导出 插件 : npm install xlsx -S npm install file-saver --save 原理 :直接导出el-table的表格里面的数据,这样就会存在缺点,只会导出当前页面的数据,如果需要导出全部数据,可以自己重新渲染一个全部数据不可见的el-table表格,来导出就可以了 扩展 :经过

    2024年02月04日
    浏览(66)
  • (一)前端环境搭建---基于SpringBoot+MySQL+Vue+ElementUI+Mybatis前后端分离面向小白管理系统搭建

    这里是为2023届学生完成一个管理系统(主要是后台)的连续更新博客。持续时间为20天,每日练习时间约2-3小时。默认已有系统开发的基础知识,如SpringBoot、数据库、HTML、CSS、JavaScript等,连载过程中,遇到细节问题也可以咨询。QQ群:1140508453。视频将在B站推出。 B站链接:

    2023年04月23日
    浏览(48)
  • 【VUE】使用elementUI上传组件-提示不存在

    使用elementUI上传组件上传图片后,表单验证还是提示不存在 主要是因为组件包的层级比较深,验证取不到值导致 可以通过绑定其他元素获取到值进行验证 比如增加el-checkbox-group元素,将值绑定到它上面

    2024年02月15日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包