vue全局confirmdemo移动端

属性方法注解：

1.new promise((reslove,reject）)

reslove()成功

reject()失败

promise构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。

2.vue.extend创建一个组件构造器，并非一个组件实例，如果需要使用的话需要用new Vue({components,common})

3.$mount()可以理解为局部挂载或者手动挂载

4.$el用于指明 Vue 实例的挂载目标

 

confirm实现

DOM

<div v-show="show" class="contanines">
        <div class="dig">
            <div class="titles">
                {{title}}
            </div>
            <div class="contentTxt">
                {{content}}
            </div>
            <div class="footer">
                <div v-if="cancelBtn!==''" class="btns" @click="cancel">{{cancelBtn}}</div>
                <div v-if="confirmBtn!==''" class="redbtns" @click="besure">{{confirmBtn}}                
          </div>
            </div>
        </div>
    </div>

js

<script>
export default {
  props: {
    title: {
      type: String,
      default: '提示'
    },
    content: {
      type: String,
      default: ''
    },
    cancelBtn: {
      type: String,
      default: '取消'
    },
    confirmBtn: {
      type: String,
      default: '确定'
    }
  },
  data() {
    return {
      show: false,
      prosimiseState: null
    }
  },
  methods: {
    comfirm(txt) {
      const _this = this
      _this.show = true
      return new Promise((resolve, reject) => {
        _this.prosimiseState = { resolve, reject }
      })
    },
    cancel() {
      this.show = false
      this.prosimiseState && this.prosimiseState.reject()
    },
    besure() {
      this.show = false
      this.prosimiseState && this.prosimiseState.resolve()
    }
  }
}
</script>

js引入全局（可另行创建js文件进行存放）

 

import Vue from 'vue'

import common from './index.vue'

const VueComponent = Vue.extend(common)

const vm = new VueComponent().$mount()

// 防止多次创建 暂时不用

const init = false

const defaultBtn = {

cancelBtn: '取消',

confirmBtn: '确定'

}



const comfirm = function(options) {

// 合并confirm，btn,options数据

Object.assign(vm, defaultBtn, options)

document.body.appendChild(vm.$el)

// if(init)append

return vm.comfirm()

}

export default comfirm

最重要的还是全局引用方式多种多样利用原型继承等都可以实现全局实例化

在main.js中引入并使用原型继承即可善始善终代码如下

import comfirm from '@/components/comfirm/comfirm'
Vue.prototype.$comfirm = comfirm

希望还在前端挣扎的小伙伴们能够坚持走下去，并真的很热爱它，

最近看了一些有关华为的事件，感触深切，奉上一句（基础建设真的是很核心，跟做前端工作一样，基本功不牢靠，会用又能怎样，你始终是个Farmer）