建站
咨询
售后
建站咨询
vue封装可复用组件confirm,并绑定在vue原型上的示例
如下所示：
十余年的临猗网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网整合营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整临猗建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“临猗网站设计”,“临猗网站推广”以来，每个客户项目都认真落实执行。
首先我们需要创建 confirm.vue ， confirm.js这两个文件，一个实现dom结构，一个实现相关逻辑
confirm.vue
{{text.type}} {{text.msg}}
{{text.btn.no}} {{text.btn.ok}}
confirm.js
import Vue from 'vue';
import confirm from './confirm.vue';
let confirmConstructor = Vue.extend(confirm);
let theConfirm = function (text) {
return new Promise((res, rej) => { //promise封装，ok执行resolve，no执行rejectlet
let confirmDom = new confirmConstructor({
el: document.createElement('div')
})
document.body.appendChild(confirmDom.$el); //new一个对象，然后插入body里面
confirmDom.text = text; //为了使confirm的扩展性更强，这个采用对象的方式传入，所有的字段都可以根据需求自定义
confirmDom.ok = function () {
res()
confirmDom.isShow = false
}
confirmDom.close = function () {
rej()
confirmDom.isShow = false
}
})
}
export default theConfirm;
//暴露出去，别忘记挂载到vue的原型上
// => 在main.js里面先引入 import theConfirm from './components/confirm/confirm.js'
// => 再挂载 Vue.prototype.$confirm = theConfirm;
//在需要的地方直接用以下方法调用即可：
// this.$confirm({
// type:'提示',
// msg:'是否删除这条信息？',
// btn:{
// ok:'yes',
// no:'no'
// }
// }).then(() => {
// console.log('ok')
// })
// .catch(() => {
// console.log('no')
// })
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//这里就是对组件的绑定
import theConfirm from './components/confirm/confirm.js'
Vue.prototype.$confirm = theConfirm;
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: 'helloworld.vue
点击一下
以上这篇vue封装可复用组件confirm,并绑定在vue原型上的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持创新互联。
分享名称：vue封装可复用组件confirm,并绑定在vue原型上的示例
文章转载：http://www.jxjierui.cn/article/ipschp.html
