123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281 |
- import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
- import { createNamespace, addUnit, noop } from '../utils';
- import { BORDER_TOP, BORDER_LEFT } from '../utils/constant';
- import { PopupMixin } from '../mixins/popup';
- import Button from '../button';
- import GoodsAction from '../goods-action';
- import GoodsActionButton from '../goods-action-button';
- var _createNamespace = createNamespace('dialog'),
- createComponent = _createNamespace[0],
- bem = _createNamespace[1],
- t = _createNamespace[2];
- export default createComponent({
- mixins: [PopupMixin()],
- props: {
- title: String,
- theme: String,
- width: [Number, String],
- message: String,
- className: null,
- callback: Function,
- beforeClose: Function,
- messageAlign: String,
- cancelButtonText: String,
- cancelButtonColor: String,
- confirmButtonText: String,
- confirmButtonColor: String,
- showCancelButton: Boolean,
- overlay: {
- type: Boolean,
- default: true
- },
- allowHtml: {
- type: Boolean,
- default: true
- },
- transition: {
- type: String,
- default: 'van-dialog-bounce'
- },
- showConfirmButton: {
- type: Boolean,
- default: true
- },
- closeOnPopstate: {
- type: Boolean,
- default: true
- },
- closeOnClickOverlay: {
- type: Boolean,
- default: false
- }
- },
- data: function data() {
- return {
- loading: {
- confirm: false,
- cancel: false
- }
- };
- },
- methods: {
- onClickOverlay: function onClickOverlay() {
- this.handleAction('overlay');
- },
- handleAction: function handleAction(action) {
- var _this = this;
- this.$emit(action); // show not trigger close event when hidden
- if (!this.value) {
- return;
- }
- if (this.beforeClose) {
- this.loading[action] = true;
- this.beforeClose(action, function (state) {
- if (state !== false && _this.loading[action]) {
- _this.onClose(action);
- }
- _this.loading.confirm = false;
- _this.loading.cancel = false;
- });
- } else {
- this.onClose(action);
- }
- },
- onClose: function onClose(action) {
- this.close();
- if (this.callback) {
- this.callback(action);
- }
- },
- onOpened: function onOpened() {
- var _this2 = this;
- this.$emit('opened');
- this.$nextTick(function () {
- var _this2$$refs$dialog;
- (_this2$$refs$dialog = _this2.$refs.dialog) == null ? void 0 : _this2$$refs$dialog.focus();
- });
- },
- onClosed: function onClosed() {
- this.$emit('closed');
- },
- onKeydown: function onKeydown(event) {
- var _this3 = this;
- if (event.key === 'Escape' || event.key === 'Enter') {
- // skip keyboard events of child elements
- if (event.target !== this.$refs.dialog) {
- return;
- }
- var onEventType = {
- Enter: this.showConfirmButton ? function () {
- return _this3.handleAction('confirm');
- } : noop,
- Escape: this.showCancelButton ? function () {
- return _this3.handleAction('cancel');
- } : noop
- };
- onEventType[event.key]();
- this.$emit('keydown', event);
- }
- },
- genRoundButtons: function genRoundButtons() {
- var _this4 = this;
- var h = this.$createElement;
- return h(GoodsAction, {
- "class": bem('footer')
- }, [this.showCancelButton && h(GoodsActionButton, {
- "attrs": {
- "size": "large",
- "type": "warning",
- "text": this.cancelButtonText || t('cancel'),
- "color": this.cancelButtonColor,
- "loading": this.loading.cancel
- },
- "class": bem('cancel'),
- "on": {
- "click": function click() {
- _this4.handleAction('cancel');
- }
- }
- }), this.showConfirmButton && h(GoodsActionButton, {
- "attrs": {
- "size": "large",
- "type": "danger",
- "text": this.confirmButtonText || t('confirm'),
- "color": this.confirmButtonColor,
- "loading": this.loading.confirm
- },
- "class": bem('confirm'),
- "on": {
- "click": function click() {
- _this4.handleAction('confirm');
- }
- }
- })]);
- },
- genButtons: function genButtons() {
- var _this5 = this,
- _ref;
- var h = this.$createElement;
- var multiple = this.showCancelButton && this.showConfirmButton;
- return h("div", {
- "class": [BORDER_TOP, bem('footer')]
- }, [this.showCancelButton && h(Button, {
- "attrs": {
- "size": "large",
- "loading": this.loading.cancel,
- "text": this.cancelButtonText || t('cancel'),
- "nativeType": "button"
- },
- "class": bem('cancel'),
- "style": {
- color: this.cancelButtonColor
- },
- "on": {
- "click": function click() {
- _this5.handleAction('cancel');
- }
- }
- }), this.showConfirmButton && h(Button, {
- "attrs": {
- "size": "large",
- "loading": this.loading.confirm,
- "text": this.confirmButtonText || t('confirm'),
- "nativeType": "button"
- },
- "class": [bem('confirm'), (_ref = {}, _ref[BORDER_LEFT] = multiple, _ref)],
- "style": {
- color: this.confirmButtonColor
- },
- "on": {
- "click": function click() {
- _this5.handleAction('confirm');
- }
- }
- })]);
- },
- genContent: function genContent(hasTitle, messageSlot) {
- var h = this.$createElement;
- if (messageSlot) {
- return h("div", {
- "class": bem('content')
- }, [messageSlot]);
- }
- var message = this.message,
- messageAlign = this.messageAlign;
- if (message) {
- var _bem, _domProps;
- var data = {
- class: bem('message', (_bem = {
- 'has-title': hasTitle
- }, _bem[messageAlign] = messageAlign, _bem)),
- domProps: (_domProps = {}, _domProps[this.allowHtml ? 'innerHTML' : 'textContent'] = message, _domProps)
- };
- return h("div", {
- "class": bem('content', {
- isolated: !hasTitle
- })
- }, [h("div", _mergeJSXProps([{}, data]))]);
- }
- }
- },
- render: function render() {
- var h = arguments[0];
- if (!this.shouldRender) {
- return;
- }
- var message = this.message;
- var messageSlot = this.slots();
- var title = this.slots('title') || this.title;
- var Title = title && h("div", {
- "class": bem('header', {
- isolated: !message && !messageSlot
- })
- }, [title]);
- return h("transition", {
- "attrs": {
- "name": this.transition
- },
- "on": {
- "afterEnter": this.onOpened,
- "afterLeave": this.onClosed
- }
- }, [h("div", {
- "directives": [{
- name: "show",
- value: this.value
- }],
- "attrs": {
- "role": "dialog",
- "aria-labelledby": this.title || message,
- "tabIndex": 0
- },
- "class": [bem([this.theme]), this.className],
- "style": {
- width: addUnit(this.width)
- },
- "ref": "dialog",
- "on": {
- "keydown": this.onKeydown
- }
- }, [Title, this.genContent(title, messageSlot), this.theme === 'round-button' ? this.genRoundButtons() : this.genButtons()])]);
- }
- });
|