vue使用ElementUI

1.安装

npm i element-ui -S

2.引入

2.1完整引入

javascript 复制代码
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

2.2.1创建babel.config.js

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

2.2.2 main.js

javascript 复制代码
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

javascript 复制代码
// element-ui挂在原型上
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;

3.2vue

html 复制代码
<a class="btn" @click="open">立即支付</a>

3.3script

javascript 复制代码
    // 弹出框
    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展示

相关推荐
white-persist34 分钟前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师1 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang1 小时前
前端性能优化
前端·javascript·vue.js·性能优化
左手吻左脸。1 小时前
解决el-select因为弹出层层级问题,不展示下拉选
javascript·vue.js·elementui
左手吻左脸。1 小时前
Element UI表格中根据数值动态设置字体颜色
vue.js·ui·elementui
李白的故乡1 小时前
el-tree-select名字
javascript·vue.js·ecmascript
Rysxt_1 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含1 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端1 小时前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友2 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端