From 461b6732eb46648d33d7ba2d5ca7410ffde3d7da Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Wed, 14 Mar 2018 11:47:46 +0800
Subject: [PATCH] [Improvement] Toast: support Vue.use to register (#690)

---
 build/bin/build-entry.js         |  5 +----
 docs/demos/views/popup.vue       |  2 --
 packages/dialog/index.js         |  2 +-
 packages/image-preview/index.js  | 14 ++++++++------
 packages/index.js                |  3 +++
 packages/locale/index.js         |  8 ++++++--
 packages/toast/index.js          |  4 ++++
 packages/waterfall/index.js      |  3 +--
 test/specs/dialog.spec.js        |  2 +-
 test/specs/image-preview.spec.js |  5 +++++
 test/specs/toast.spec.js         |  6 ++++++
 11 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/build/bin/build-entry.js b/build/bin/build-entry.js
index 0ceccbc1c..639e32cf9 100644
--- a/build/bin/build-entry.js
+++ b/build/bin/build-entry.js
@@ -8,10 +8,7 @@ const tips = '// This file is auto gererated by build/bin/build-entry.js';
 function buildVantEntry() {
   const uninstallComponents = [
     'Lazyload',
-    'Waterfall',
-    'Toast',
-    'ImagePreview',
-    'Locale'
+    'Waterfall'
   ];
 
   const importList = Components.map(name => `import ${uppercamelize(name)} from './${name}';`);
diff --git a/docs/demos/views/popup.vue b/docs/demos/views/popup.vue
index 146711989..b73aba431 100644
--- a/docs/demos/views/popup.vue
+++ b/docs/demos/views/popup.vue
@@ -87,8 +87,6 @@ export default {
 
 <style lang="postcss">
 .demo-popup {
-  height: 10000px;
-
   .van-button {
     margin: 10px 0 10px 15px;
   }
diff --git a/packages/dialog/index.js b/packages/dialog/index.js
index 90f811e29..262ec734b 100644
--- a/packages/dialog/index.js
+++ b/packages/dialog/index.js
@@ -69,7 +69,7 @@ Dialog.resetDefaultOptions = () => {
 };
 
 Dialog.install = () => {
-  Vue.component(VanDialog.name, VanDialog);
+  Vue.use(VanDialog);
 };
 
 Vue.prototype.$dialog = Dialog;
diff --git a/packages/image-preview/index.js b/packages/image-preview/index.js
index 0110b3739..abbabc65b 100644
--- a/packages/image-preview/index.js
+++ b/packages/image-preview/index.js
@@ -1,18 +1,16 @@
 import Vue from 'vue';
-import ImagePreview from './image-preview';
+import VueImagePreview from './image-preview';
 
 let instance;
 
-const ImagePreviewConstructor = Vue.extend(ImagePreview);
-
 const initInstance = () => {
-  instance = new ImagePreviewConstructor({
+  instance = new (Vue.extend(VueImagePreview))({
     el: document.createElement('div')
   });
   document.body.appendChild(instance.$el);
 };
 
-const ImagePreviewBox = (images, startPosition = 0) => {
+const ImagePreview = (images, startPosition = 0) => {
   if (!instance) {
     initInstance();
   }
@@ -27,4 +25,8 @@ const ImagePreviewBox = (images, startPosition = 0) => {
   return instance;
 };
 
-export default ImagePreviewBox;
+ImagePreview.install = () => {
+  Vue.use(VueImagePreview);
+};
+
+export default ImagePreview;
diff --git a/packages/index.js b/packages/index.js
index 1fc0b9a57..0df5c8b6e 100644
--- a/packages/index.js
+++ b/packages/index.js
@@ -97,8 +97,10 @@ const components = [
   GoodsActionBigBtn,
   GoodsActionMiniBtn,
   Icon,
+  ImagePreview,
   List,
   Loading,
+  Locale,
   NavBar,
   NoticeBar,
   NumberKeyboard,
@@ -127,6 +129,7 @@ const components = [
   TabbarItem,
   Tabs,
   Tag,
+  Toast,
   TreeSelect,
   Uploader
 ];
diff --git a/packages/locale/index.js b/packages/locale/index.js
index bf456e9a8..ab56b32bc 100644
--- a/packages/locale/index.js
+++ b/packages/locale/index.js
@@ -5,7 +5,10 @@ import defaultMessages from './lang/zh-CN';
 const proto = Vue.prototype;
 const defaultLang = 'zh-CN';
 const locale = {
-  init() {
+  install() {
+    if (proto.$vantLang) {
+      return;
+    }
     Vue.util.defineReactive(proto, '$vantLang', defaultLang);
     Vue.util.defineReactive(proto, '$vantMessages', { [defaultLang]: defaultMessages });
   },
@@ -20,5 +23,6 @@ const locale = {
   }
 };
 
-locale.init();
+locale.install();
+
 export default locale;
diff --git a/packages/toast/index.js b/packages/toast/index.js
index 8df3e940d..1b29758ef 100644
--- a/packages/toast/index.js
+++ b/packages/toast/index.js
@@ -86,6 +86,10 @@ Toast.allowMultiple = (allow = true) => {
   singleton = !allow;
 };
 
+Toast.install = () => {
+  Vue.use(VueToast);
+};
+
 Vue.prototype.$toast = Toast;
 
 export default Toast;
diff --git a/packages/waterfall/index.js b/packages/waterfall/index.js
index 1ad8a0999..34bafacff 100644
--- a/packages/waterfall/index.js
+++ b/packages/waterfall/index.js
@@ -1,6 +1,6 @@
 import Waterfall from './directive.js';
 
-const install = function(Vue) {
+Waterfall.install = function(Vue) {
   if (process.env.NODE_ENV !== 'production') {
     console.warn('[Vant warn] Waterfall is deprecated, please use List component instread.');
   }
@@ -8,5 +8,4 @@ const install = function(Vue) {
   Vue.directive('WaterfallUpper', Waterfall('upper'));
 };
 
-Waterfall.install = install;
 export default Waterfall;
diff --git a/test/specs/dialog.spec.js b/test/specs/dialog.spec.js
index ca56e75ce..6f44beabd 100644
--- a/test/specs/dialog.spec.js
+++ b/test/specs/dialog.spec.js
@@ -60,7 +60,7 @@ describe('Dialog', () => {
     expect(Dialog.currentOptions.title).to.equal('');
   });
 
-  it('register dialog component', () => {
+  it('register component', () => {
     Vue.use(Dialog);
     expect(!!Vue.component('van-dialog')).to.be.true;
   });
diff --git a/test/specs/image-preview.spec.js b/test/specs/image-preview.spec.js
index aa04a5218..75d51fb73 100644
--- a/test/specs/image-preview.spec.js
+++ b/test/specs/image-preview.spec.js
@@ -54,4 +54,9 @@ describe('ImagePreview', () => {
       done();
     });
   });
+
+  it('register component', () => {
+    Vue.use(ImagePreview);
+    expect(!!Vue.component('van-image-preview')).to.be.true;
+  });
 });
diff --git a/test/specs/toast.spec.js b/test/specs/toast.spec.js
index 2e46c90b2..a69a2770e 100644
--- a/test/specs/toast.spec.js
+++ b/test/specs/toast.spec.js
@@ -1,3 +1,4 @@
+import Vue from 'vue';
 import Toast from 'packages/toast';
 
 describe('Toast', () => {
@@ -132,4 +133,9 @@ describe('Toast', () => {
     const toast2 = Toast(1);
     expect(toast2.duration).to.equal(3000);
   });
+
+  it('register component', () => {
+    Vue.use(Toast);
+    expect(!!Vue.component('van-toast')).to.be.true;
+  });
 });