[Improvement] Toast: support Vue.use to register (#690)

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',
+    'Waterfall'
-    'Toast',
-    'ImagePreview',
-    'Locale'
   ];
 
   const importList = Components.map(name => `import ${uppercamelize(name)} from './${name}';`);

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;
   }

packages/dialog/index.js

@@ -69,7 +69,7 @@ Dialog.resetDefaultOptions = () => {
 };
 
 Dialog.install = () => {
-  Vue.component(VanDialog.name, VanDialog);
+  Vue.use(VanDialog);
 };
 
 Vue.prototype.$dialog = Dialog;

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;

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
 ];

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;

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;

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;

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;
   });

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;
+  });
 });

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;
+  });
 });