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