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()])]);
|
||
|
}
|
||
|
});
|