155 lines
3.4 KiB
JavaScript
155 lines
3.4 KiB
JavaScript
// Utils
|
|
import { createNamespace, isDef } from '../utils';
|
|
import { lockClick } from './lock-click'; // Mixins
|
|
|
|
import { PopupMixin } from '../mixins/popup'; // Components
|
|
|
|
import Icon from '../icon';
|
|
import Loading from '../loading';
|
|
|
|
var _createNamespace = createNamespace('toast'),
|
|
createComponent = _createNamespace[0],
|
|
bem = _createNamespace[1];
|
|
|
|
export default createComponent({
|
|
mixins: [PopupMixin()],
|
|
props: {
|
|
icon: String,
|
|
className: null,
|
|
iconPrefix: String,
|
|
loadingType: String,
|
|
forbidClick: Boolean,
|
|
closeOnClick: Boolean,
|
|
message: [Number, String],
|
|
type: {
|
|
type: String,
|
|
default: 'text'
|
|
},
|
|
position: {
|
|
type: String,
|
|
default: 'middle'
|
|
},
|
|
transition: {
|
|
type: String,
|
|
default: 'van-fade'
|
|
},
|
|
lockScroll: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data: function data() {
|
|
return {
|
|
clickable: false
|
|
};
|
|
},
|
|
mounted: function mounted() {
|
|
this.toggleClickable();
|
|
},
|
|
destroyed: function destroyed() {
|
|
this.toggleClickable();
|
|
},
|
|
watch: {
|
|
value: 'toggleClickable',
|
|
forbidClick: 'toggleClickable'
|
|
},
|
|
methods: {
|
|
onClick: function onClick() {
|
|
if (this.closeOnClick) {
|
|
this.close();
|
|
}
|
|
},
|
|
toggleClickable: function toggleClickable() {
|
|
var clickable = this.value && this.forbidClick;
|
|
|
|
if (this.clickable !== clickable) {
|
|
this.clickable = clickable;
|
|
lockClick(clickable);
|
|
}
|
|
},
|
|
|
|
/* istanbul ignore next */
|
|
onAfterEnter: function onAfterEnter() {
|
|
this.$emit('opened');
|
|
|
|
if (this.onOpened) {
|
|
this.onOpened();
|
|
}
|
|
},
|
|
onAfterLeave: function onAfterLeave() {
|
|
this.$emit('closed');
|
|
},
|
|
genIcon: function genIcon() {
|
|
var h = this.$createElement;
|
|
var icon = this.icon,
|
|
type = this.type,
|
|
iconPrefix = this.iconPrefix,
|
|
loadingType = this.loadingType;
|
|
var hasIcon = icon || type === 'success' || type === 'fail';
|
|
|
|
if (hasIcon) {
|
|
return h(Icon, {
|
|
"class": bem('icon'),
|
|
"attrs": {
|
|
"classPrefix": iconPrefix,
|
|
"name": icon || type
|
|
}
|
|
});
|
|
}
|
|
|
|
if (type === 'loading') {
|
|
return h(Loading, {
|
|
"class": bem('loading'),
|
|
"attrs": {
|
|
"type": loadingType
|
|
}
|
|
});
|
|
}
|
|
},
|
|
genMessage: function genMessage() {
|
|
var h = this.$createElement;
|
|
var type = this.type,
|
|
message = this.message;
|
|
|
|
if (!isDef(message) || message === '') {
|
|
return;
|
|
}
|
|
|
|
if (type === 'html') {
|
|
return h("div", {
|
|
"class": bem('text'),
|
|
"domProps": {
|
|
"innerHTML": message
|
|
}
|
|
});
|
|
}
|
|
|
|
return h("div", {
|
|
"class": bem('text')
|
|
}, [message]);
|
|
}
|
|
},
|
|
render: function render() {
|
|
var _ref;
|
|
|
|
var h = arguments[0];
|
|
return h("transition", {
|
|
"attrs": {
|
|
"name": this.transition
|
|
},
|
|
"on": {
|
|
"afterEnter": this.onAfterEnter,
|
|
"afterLeave": this.onAfterLeave
|
|
}
|
|
}, [h("div", {
|
|
"directives": [{
|
|
name: "show",
|
|
value: this.value
|
|
}],
|
|
"class": [bem([this.position, (_ref = {}, _ref[this.type] = !this.icon, _ref)]), this.className],
|
|
"on": {
|
|
"click": this.onClick
|
|
}
|
|
}, [this.genIcon(), this.genMessage()])]);
|
|
}
|
|
}); |