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;
// 保存code
this.code = result.code;
// 关闭弹出框
this.$msgbox.close();
// 跳转到下一页路由
this.$router.push("/paysuccess");
}
}, 1000);
}
},
3.4展示
文章来源地址https://www.toymoban.com/news/detail-640628.html
文章来源:https://www.toymoban.com/news/detail-640628.html
到了这里,关于vue使用ElementUI的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!