当前位置：首页 > news >正文

vue使用ElementUI

news 2025/8/10 15:16:25

1.安装

npm i element-ui -S

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

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;// 保存codethis.code = result.code;// 关闭弹出框this.$msgbox.close();// 跳转到下一页路由this.$router.push("/paysuccess");}}, 1000);}},