| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152 |
- import { use } from '../utils';
- import { PopupMixin } from '../mixins/popup';
- import Button from '../button';
- var _use = use('dialog'),
- sfc = _use[0],
- bem = _use[1],
- t = _use[2];
- export default sfc({
- mixins: [PopupMixin],
- props: {
- title: String,
- message: String,
- className: null,
- callback: Function,
- beforeClose: Function,
- messageAlign: String,
- cancelButtonText: String,
- cancelButtonColor: String,
- confirmButtonText: String,
- confirmButtonColor: String,
- showCancelButton: Boolean,
- showConfirmButton: {
- type: Boolean,
- "default": true
- },
- overlay: {
- 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);
- if (this.beforeClose) {
- this.loading[action] = true;
- this.beforeClose(action, function (state) {
- if (state !== false) {
- _this.onClose(action);
- }
- _this.loading[action] = false;
- });
- } else {
- this.onClose(action);
- }
- },
- onClose: function onClose(action) {
- this.close();
- if (this.callback) {
- this.callback(action);
- }
- }
- },
- render: function render(h) {
- var _bem,
- _this2 = this;
- if (!this.shouldRender) {
- return;
- }
- var title = this.title,
- message = this.message,
- messageAlign = this.messageAlign;
- var children = this.slots();
- var Title = title && h("div", {
- "class": bem('header', {
- isolated: !message && !children
- })
- }, [title]);
- var Content = (children || message) && h("div", {
- "class": bem('content')
- }, [children || h("div", {
- "domProps": {
- "innerHTML": message
- },
- "class": bem('message', (_bem = {
- 'has-title': title
- }, _bem[messageAlign] = messageAlign, _bem))
- })]);
- var hasButtons = this.showCancelButton && this.showConfirmButton;
- var ButtonGroup = h("div", {
- "class": ['van-hairline--top', bem('footer', {
- buttons: hasButtons
- })]
- }, [this.showCancelButton && h(Button, {
- "attrs": {
- "size": "large",
- "loading": this.loading.cancel,
- "text": this.cancelButtonText || t('cancel')
- },
- "class": bem('cancel'),
- "style": {
- color: this.cancelButtonColor
- },
- "on": {
- "click": function click() {
- _this2.handleAction('cancel');
- }
- }
- }), this.showConfirmButton && h(Button, {
- "attrs": {
- "size": "large",
- "loading": this.loading.confirm,
- "text": this.confirmButtonText || t('confirm')
- },
- "class": [bem('confirm'), {
- 'van-hairline--left': hasButtons
- }],
- "style": {
- color: this.confirmButtonColor
- },
- "on": {
- "click": function click() {
- _this2.handleAction('confirm');
- }
- }
- })]);
- return h("transition", {
- "attrs": {
- "name": "van-dialog-bounce"
- }
- }, [h("div", {
- "directives": [{
- name: "show",
- value: this.value
- }],
- "class": [bem(), this.className]
- }, [Title, Content, ButtonGroup])]);
- }
- });
|