drip-ui/es/confirm/Confirm.js

Lightweight Mobile UI Components built on Vue

import dripDialog from '../dialog/Dialog';
import create from '../utils/create';
export default create({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', [_c('drip-dialog', {
      attrs: {
        "visible": _vm.visible,
        "touchmoveClose": _vm.touchmoveClose,
        "showClose": false
      },
      on: {
        "onHide": _vm.cancel
      }
    }, [_c('div', {
      "class": _vm.b('confirm')
    }, [_c('div', {
      "class": _vm.b('confirm-content'),
      style: _vm.style,
      domProps: {
        "innerHTML": _vm._s(_vm.content)
      }
    }), _vm._t("default"), _c('div', {
      "class": _vm.b('confirm-btn')
    }, [!_vm.hideCancel ? _c('div', {
      "class": _vm.b('confirm-btn-left'),
      domProps: {
        "textContent": _vm._s(_vm.cancelText)
      },
      on: {
        "click": _vm.cancel
      }
    }) : _vm._e(), !_vm.hideConfirm ? _c('div', {
      "class": _vm.b('confirm-btn-right'),
      domProps: {
        "textContent": _vm._s(_vm.confirmText)
      },
      on: {
        "click": _vm.confirm
      }
    }) : _vm._e()])], 2)])], 1);
  },
  name: 'confirm',
  props: {
    hideCancel: {
      type: Boolean,
      "default": false
    },
    hideConfirm: {
      type: Boolean,
      "default": false
    },
    visible: {
      type: Boolean,
      "default": false
    },
    content: {
      type: String
    },
    cancelText: {
      type: String,
      "default": '取消'
    },
    confirmText: {
      type: String,
      "default": '确认'
    },
    cancelCall: {
      type: Function,
      "default": function _default() {}
    },
    confirmCall: {
      type: Function,
      "default": function _default() {}
    },
    textAlign: {
      type: String,
      "default": 'center'
    },
    fontWeight: {
      type: String,
      "default": '500'
    },
    // fontSize
    fontSize: {
      type: [String, Number],
      "default": '35'
    },
    touchmoveClose: {
      type: Boolean,
      "default": false
    }
  },
  methods: {
    cancel: function cancel() {
      this.$emit('cancel');
      this.cancelCall();
    },
    confirm: function confirm() {
      this.$emit('confirm');
      this.confirmCall();
    }
  },
  components: {
    dripDialog: dripDialog
  },
  computed: {
    // style
    style: function style() {
      var textAlign = this.textAlign,
          fontWeight = this.fontWeight,
          fontSize = this.fontSize; // calc ratio

      var ratio = document.documentElement.clientWidth / 750;
      return {
        'text-align': this.textAlign,
        'font-weight': this.fontWeight,
        'font-size': ratio * fontSize + 'px'
      };
    }
  }
});