| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112 |
- import { use, isDef } from '../utils';
- import { PopupMixin } from '../mixins/popup';
- import Icon from '../icon';
- import Loading from '../loading';
- var _use = use('toast'),
- sfc = _use[0],
- bem = _use[1];
- var STYLE = ['success', 'fail', 'loading'];
- export default sfc({
- mixins: [PopupMixin],
- props: {
- className: null,
- forbidClick: Boolean,
- message: [String, Number],
- type: {
- type: String,
- "default": 'text'
- },
- loadingType: {
- type: String,
- "default": 'circular'
- },
- position: {
- type: String,
- "default": 'middle'
- },
- lockScroll: {
- type: Boolean,
- "default": false
- }
- },
- data: function data() {
- return {
- clickable: false
- };
- },
- mounted: function mounted() {
- this.toggleClickale();
- },
- destroyed: function destroyed() {
- this.toggleClickale();
- },
- watch: {
- value: function value() {
- this.toggleClickale();
- },
- forbidClick: function forbidClick() {
- this.toggleClickale();
- }
- },
- methods: {
- toggleClickale: function toggleClickale() {
- var clickable = this.value && this.forbidClick;
- if (this.clickable !== clickable) {
- this.clickable = clickable;
- var action = clickable ? 'add' : 'remove';
- document.body.classList[action]('van-toast--unclickable');
- }
- }
- },
- render: function render(h) {
- var _this = this;
- var type = this.type,
- message = this.message;
- var style = STYLE.indexOf(type) !== -1 ? 'default' : type;
- var Content = function Content() {
- switch (style) {
- case 'text':
- return h("div", [message]);
- case 'html':
- return h("div", {
- "domProps": {
- "innerHTML": message
- }
- });
- default:
- return [type === 'loading' ? h(Loading, {
- "attrs": {
- "color": "white",
- "type": _this.loadingType
- }
- }) : h(Icon, {
- "class": bem('icon'),
- "attrs": {
- "name": type
- }
- }), isDef(message) && h("div", {
- "class": bem('text')
- }, [message])];
- }
- };
- return h("transition", {
- "attrs": {
- "name": "van-fade"
- }
- }, [h("div", {
- "directives": [{
- name: "show",
- value: this.value
- }],
- "class": [bem([style, this.position]), this.className]
- }, [Content()])]);
- }
- });
|