Confirm 插件

1、效果

                                         ![image.png](https://cdn.nlark.com/yuque/0/2020/png/1225858/1599636768099-52e0ffac-6a49-4dea-a1c8-37e32fad293b.png#align=left&display=inline&height=381&margin=%5Bobject%20Object%5D&name=image.png&originHeight=762&originWidth=426&size=151145&status=done&style=none&width=213)

2、 参数

事件

3、使用

main.js 注册

import { Toast, Confirm } from '/Confirm';
Vue.use(Confirm);

page

  this.$confirm({
    text: '是否确认，授权天猫精灵，提供“您的联系方式”给红外码库厂商以便与您联系？',
    cancelTxt: '取消',
    confirmTxt: '确认',
    onConfirm: function() {},
    onCancel: function() {
      that.isChoose = false
    }
  })

4、插件代码

Confirm/index.ts

import ConfirmVue from './src/confirm.vue'
let instance
let Confirm = {
  install(Vue) {
    Vue.prototype.$confirm = function (opts) {
      let defaultOpts = {
        title: '',
        text: '',
        confirmTxt: '确定',
        cancelTxt: '取消'
      }
      if (!instance) {
        instance = new ConfirmVue({
          el: document.createElement('div')
        })
      }
      // let options = Object.assign(defaultOpts, opts)
      // Object.assign(instance, options)
      for(var key in opts){
        if(opts.hasOwnProperty(key) === true){
          defaultOpts[key]=opts[key];
        }
      }
      var options = defaultOpts
      for(var key in options){
        if(options.hasOwnProperty(key) === true){
          instance[key]=options[key];
        }
      }
      document.body.appendChild(instance.$el)
      Vue.nextTick(() => {
        instance.show = true
      })
    }
  }
}
export default Confirm

Confirm/src/confirm.vue

<template>
    <div class="tn-confirm" v-show="show" @touchmove.stop.prevent>
      <div class="tn-confirm__mask"></div>
      <div class="tn-confirm__wrapper" @touchmove.stop.prevent>
        <div class="tn-confirm__title">{{title}}</div>
        <div class="tn-confirm__text">{{text}}</div>
        <div class="tn-confirm__button">
          <div class="tn-confirm__button-cancel" @click="onCancelClick">{{cancelTxt}}</div>
          <div class="tn-confirm__button-confirm" @click="onConfirmClick">{{confirmTxt}}</div>
        </div>
      </div>
    </div>
</template>
<script lang="ts">
import Vue, { PropOptions } from 'vue'
export default Vue.extend({
  name: 'TnConfirm',
  componentName: 'TnConfirm',
  data() {
    return {
      show: false
    }
  },
  props: {
    text: String,
    title: String,
    confirmTxt: String,
    cancelTxt: String,
    onConfirm: {
      type: Function
    } as PropOptions<any>,
    onCancel: {
      type: Function
    } as PropOptions<any>
  },
  methods: {
    onCancelClick() {
      this.show = false
      this.onCancel && this.onCancel()
    },
    onConfirmClick() {
      this.show = false
      this.onConfirm && this.onConfirm()
    }
  }
})
</script>
<style lang="stylus">
  @import '../../../style/confirm.styl'
</style>

confirm.styl

.tn-confirm
  &__wrapper
    top 50%
    left 50%
    position fixed
    display flex
    flex-direction column
    align-items center
    transform translate(-50%, -50%)
    width 270px
    border-radius 12px
    background #fcfcfc
    box-sizing border-box
    text-align center
    z-index 10000
  &__title
    max-width 213px
    margin-top 20px
    color #333
    font-size 17px
    line-height 24px
  &__text
    color #333
    margin-top 10px
    font-size 13px
    max-width 143px
    line-height 18px
  &__button
    display flex
    flex-direction row
    width 100%
    margin-top 20px
    height 45px
    line-height 45px
    color #007AFF
    font-size 17px
    border-top 1px solid rgb(235, 235, 235)
    &-cancel
      flex 1
    &-confirm
      border-left 1px solid rgb(235, 235, 235)
      flex 1
  &__mask
    background rgba(0, 0, 0, 0.4)
    position fixed
    margin 0
    top 0
    right 0
    bottom 0
    left 0
    z-index 10000
  &__text
    font-size 10px
    margin-top 5px
    display inline-block