vue封裝可復用組件confirm,并綁定在vue原型上的示例

更新時間：2019年10月31日 09:06:28 作者：Amy o-O

今天小編就為大家分享一篇vue封裝可復用組件confirm,并綁定在vue原型上的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

如下所示：

首先我們需要創(chuàng)建 confirm.vue ， confirm.js這兩個文件，一個實現(xiàn)dom結構，一個實現(xiàn)相關邏輯

confirm.vue

<template>
 <div class="confirm" v-if="isShow">
  <div class="con_box" >
   <div class="context">
    <h6>{{text.type}}</h6>
    <p>{{text.msg}}</p>
    <div class="btn">
     <span @click="close()" v-if="text.btn.no">{{text.btn.no}}</span>
     <span @click="ok()" v-if="text.btn.ok">{{text.btn.ok}}</span>
    </div>
   </div>
  </div>
 </div>
</template>
<script>
export default {
 data(){
  return{
   isShow:true,
   text:{
    type:'提示',    
    msg:'確定刪除此條信息？',
    btn:{
     ok:'確定',
     no:'取消'
    },
   }
  }
 },
 methods:{
  close(){
   console.log('關閉');
  },
  ok(){
   console.log('確定')
  }
 }
}
</script>
<style scoped>
.confirm{background-color:rgba(0, 0, 0, 0.6);width: 100%;height: 100%; position: fixed;top: 0;}
.con_box{width: 75%;height: 22%;background-color: white;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;border-radius: 5px;}
.context{padding: 10px;}
.context h6{font-size: 24px;padding: 15px;}
.context p{font-size: 20px;padding: 35px 15px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.btn{padding: 15px;text-align: right;}
.btn span{padding: 10px 35px; color: white;border-radius: 5px;}
.btn span:nth-child(1){background-color: #f1f1f1;color: rgb(106, 223, 223);}
.btn span:nth-child(2){background-color: rgb(106, 223, 223);}
</style>

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執(zhí)行resolve，no執(zhí)行rejectlet
  let confirmDom = new confirmConstructor({ 
  el: document.createElement('div')
  })
  document.body.appendChild(confirmDom.$el); //new一個對象，然后插入body里面

  confirmDom.text = text; //為了使confirm的擴展性更強，這個采用對象的方式傳入，所有的字段都可以根據(jù)需求自定義
  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;
 //在需要的地方直接用以下方法調(diào)用即可：
 // 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: '<App/>'
})

helloworld.vue

<template>
 <div class="hello">
  <span @click="handMe()">點擊一下</span>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 data () {
 return {
  
 }
 },
 methods:{
 handMe(){
 this.$confirm({
 type:'提示',
 msg:'是否刪除這條信息？',
 btn:{
  ok:'yes',
  no:'no'
 }
 }).then(() => {
 console.log('ok')
 })
 .catch(() => {
 console.log('no')
 })
 }
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
span{font-size: 24px;}
</style>

以上這篇vue封裝可復用組件confirm,并綁定在vue原型上的示例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: