vant components

packages/toast/README.md

@@ -0,0 +1,26 @@
+# @youzan/<%= name %>
+
+!!! 请在此处填写你的文档最简单描述 !!!
+
+[![version][version-image]][download-url]
+[![download][download-image]][download-url]
+
+[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
+[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
+[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
+
+## Demo
+
+## Usage
+
+## API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| className | 自定义额外类名 | string  | ''          | ''          |
+
+
+
+
+## License
+[MIT](https://opensource.org/licenses/MIT)

packages/toast/index.js

@@ -0,0 +1,3 @@
+import Toast from './src/toast';
+
+export default Toast;

packages/toast/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@youzan/van-toast",
+  "version": "0.0.1",
+  "description": "toast component",
+  "main": "./index.js",
+  "author": "jiangruowei",
+  "license": "MIT",
+  "devDependencies": {},
+  "dependencies": {}
+}

packages/toast/src/toast.js

@@ -0,0 +1,75 @@
+import Vue from 'vue';
+import merge from 'src/utils/merge';
+
+const ToastConstructor = Vue.extend(require('./toast.vue'));
+let instance;
+
+const getInstance = () => {
+  if (instance) instance.clear();
+
+  instance = new ToastConstructor({
+    el: document.createElement('div')
+  });
+  return instance;
+};
+
+const removeDom = event => {
+  if (event.target.parentNode) {
+    event.target.parentNode.removeChild(event.target);
+  }
+};
+
+var Toast = (options = {}) => {
+  const duration = options.duration || 3000;
+
+  const instance = getInstance();
+  instance.closed = false;
+  clearTimeout(instance.timer);
+  instance.type = options.type ? options.type : 'text';
+  instance.message = typeof options === 'string' ? options : options.message;
+  instance.forbidClick = options.forbidClick ? options.forbidClick : false;
+  instance.clear = () => {
+    if (instance.closed) return;
+    instance.visible = false;
+    instance.$el.addEventListener('transitionend', removeDom);
+    instance.closed = true;
+  };
+
+  document.body.appendChild(instance.$el);
+  Vue.nextTick(function() {
+    instance.visible = true;
+    instance.$el.removeEventListener('transitionend', removeDom);
+    instance.timer = setTimeout(function() {
+      instance.clear();
+    }, duration);
+  });
+  return instance;
+};
+
+Toast.loading = (options) => {
+  return new Toast(merge({
+    type: 'loading'
+  }, options));
+};
+
+Toast.success = (options) => {
+  const message = typeof options === 'string' ? options : options.message;
+  return new Toast(merge({
+    type: 'success',
+    message: message
+  }, options));
+};
+
+Toast.fail = (options) => {
+  const message = typeof options === 'string' ? options : options.message;
+  return new Toast(merge({
+    type: 'fail',
+    message: message
+  }, options));
+};
+
+Toast.clear = () => {
+  if (instance) instance.clear();
+};
+
+export default Toast;

packages/toast/src/toast.vue

@@ -0,0 +1,77 @@
+<template>
+  <transition name="van-toast-fade">
+    <div class="van-toast-wrapper" v-show="visible">
+      <div class="van-toast" :class="['van-toast--' + displayStyle]">
+        <!-- 只显示文字 -->
+        <template v-if="displayStyle === 'text'" >
+          <div class="van-toast__text">{{message}}</div>
+        </template>
+        <!-- 加载中 -->
+        <template v-if="displayStyle === 'loading'">
+            <van-loading v-if="type === 'loading'" type="gradient-circle" color="white"></van-loading>
+        </template>
+        <!-- 图案加文字 -->
+        <template v-if="displayStyle === 'default'">
+          <van-icon class="van-toast__icon" :name="type"></van-icon>
+          <div class="van-toast__text">{{message}}</div>
+        </template>
+        <!-- 传入html -->
+        <template v-if="displayStyle === 'html'">
+          <div class="van-toast__text" v-html="message"></div>
+        </template>
+      </div>
+      <div class="van-toast__overlay" v-if="forbidClick"></div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import zanLoading from 'packages/loading';
+import zanIcon from 'packages/icon';
+
+const TOAST_TYPES = ['text', 'html', 'loading', 'success', 'fail'];
+const DEFAULT_STYLE_LIST = ['success', 'fail'];
+/**
+ * van-toast
+ * @module components/toast
+ * @desc toast
+ * @param {string} [type=false] - 类型
+ * @param {string} [message] - 信息
+ *
+ */
+export default {
+  name: 'van-toast',
+
+  components: {
+    'van-loading': zanLoading,
+    'van-icon': zanIcon
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'text',
+      validator(value) {
+        return TOAST_TYPES.indexOf(value) > -1;
+      }
+    },
+    message: {
+      type: String,
+      default: ''
+    },
+    forbidClick: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      visible: false
+    };
+  },
+  computed: {
+    displayStyle() {
+      return DEFAULT_STYLE_LIST.indexOf(this.type) > -1 ? 'default' : this.type;
+    }
+  }
+};
+</script>