vivo-ui/lib/components/toast/index.js

vivo ui component lib for vue

import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
import mixinType from '../../mixins/type';
import Fade from '../fade/index';

(function () {
  if (typeof document !== 'undefined') {
    var head = document.head || document.getElementsByTagName('head')[0],
        style = document.createElement('style'),
        css = " .vui-toast > div { position: fixed; z-index: 99999; left: 50%; top: 50%; padding: .5em .7em; color: #fff; font-size: .4rem; background: rgba(0, 0, 0, .6); -webkit-border-radius: .33em; -moz-border-radius: .33em; border-radius: .33em; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition-property: opacity; -o-transition-property: opacity; -moz-transition-property: opacity; transition-property: opacity; } .vui-toast > .vui-toast-top { top: 10%; bottom: auto; } .vui-toast > .vui-toast-bottom { top: auto; bottom: 10%; } /*pc样式*/ .vui-toast-pc > div { font-size: 16px; } ";style.type = 'text/css';if (style.styleSheet) {
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }head.appendChild(style);
  }
})();

var index = {
  name: 'toast',
  inheritAttrs: false,
  mixins: [mixinType],
  props: {
    time: {
      type: Number,
      default: 3000
    },
    position: {
      type: String,
      default: 'center',
      validator: function validator(value) {
        return ['top', 'center', 'bottom'].indexOf(value) !== -1;
      }
    },
    single: { // 是否同时只能显示一个toast
      type: Boolean,
      default: true
    },
    className: { // 自定义类名
      type: String,
      default: 'vui-toast-box'
    }
  },
  data: function data() {
    return {
      id: 0,
      list: []
    };
  },

  computed: {
    $style: function $style() {
      return this.$options.cssModules;
    }
  },
  render: function render() {
    var h = arguments[0];

    return h(
      'div',
      { 'class': ['vui-toast', 'vui-toast-' + this.page.type] },
      [this.list.map(function (item) {
        return h('fade', _mergeJSXProps([{
          attrs: { appear: true }
        }, {
          scopedSlots: {
            default: function _default(props) {
              return h(
                'div',
                { 'class': [props.className, item.className, 'vui-toast-' + item.position] },
                [item.slot]
              );
            }
          }
        }]));
      })]
    );
  },

  methods: {
    show: function show() {
      this.$nextTick(function () {
        var _this = this;

        // 只有在nextTick中才能获取更新后的props
        if (!this.single || !this.list.length) {
          var item = {
            id: this.id++,
            slot: this.$slots.default,
            position: this.position,
            className: this.className
          };

          this.list.push(item);
          setTimeout(function () {
            _this.list.splice(_this.list.indexOf(item), 1);
          }, this.time);
        }
      });
    }
  },
  components: {
    Fade: Fade
  }
};

export default index;