docs: add import when using Toast or Notify

src/action-sheet/README.md

@@ -19,7 +19,9 @@ Use `actions` prop to set options of action-sheet.
 <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
 ```
 
-```javascript
+```js
+import { Toast } from 'vant';
+
 export default {
   data() {
     return {
@@ -31,7 +33,6 @@ export default {
       ]
     };
   },
-
   methods: {
     onSelect(item) {
       this.show = false;
@@ -47,7 +48,7 @@ export default {
 <van-action-sheet v-model="show" :actions="actions" />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {
@@ -74,13 +75,14 @@ export default {
 ```
 
 ```js
+import { Toast } from 'vant';
+
 export default {
   data() {
     return {
       show: false
     };
   },
-
   methods: {
     onCancel() {
       this.show = false;

src/action-sheet/README.zh-CN.md

@@ -19,7 +19,9 @@ Vue.use(ActionSheet);
 <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
 ```
 
-```javascript
+```js
+import { Toast } from 'vant';
+
 export default {
   data() {
     return {
@@ -31,7 +33,6 @@ export default {
       ]
     };
   },
-
   methods: {
     onSelect(item) {
       // 默认情况下，点击选项时不会自动关闭菜单
@@ -51,7 +52,7 @@ export default {
 <van-action-sheet v-model="show" :actions="actions" />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {
@@ -80,13 +81,14 @@ export default {
 ```
 
 ```js
+import { Toast } from 'vant';
+
 export default {
   data() {
     return {
       show: false
     };
   },
-
   methods: {
     onCancel() {
       this.show = false;

src/address-edit/README.md

@@ -28,7 +28,9 @@ Vue.use(AddressEdit);
 />
 ```
 
-```javascript
+```js
+import { Toast } from 'vant';
+
 export default {
   data() {
     return {
@@ -36,7 +38,6 @@ export default {
       searchResult: []
     }
   },
-
   methods: {
     onSave() {
       Toast('save');

src/address-edit/README.zh-CN.md

@@ -28,7 +28,9 @@ Vue.use(AddressEdit);
 />
 ```
 
-```javascript
+```js
+import { Toast } from 'vant';
+
 export default {
   data() {
     return {
@@ -36,7 +38,6 @@ export default {
       searchResult: []
     }
   },
-
   methods: {
     onSave() {
       Toast('save');

src/address-list/README.md

@@ -25,7 +25,9 @@ Vue.use(AddressList);
 />
 ```
 
-```javascript
+```js
+import { Toast } from 'vant';
+
 export default {
   data() {
     return {
@@ -54,7 +56,6 @@ export default {
       ]
     }
   },
-
   methods: {
     onAdd() {
       Toast('Add');

src/address-list/README.zh-CN.md

@@ -25,7 +25,9 @@ Vue.use(AddressList);
 />
 ```
 
-```javascript
+```js
+import { Toast } from 'vant';
+
 export default {
   data() {
     return {
@@ -54,12 +56,10 @@ export default {
       ]
     }
   },
-
   methods: {
     onAdd() {
       Toast('新增地址');
     },
-
     onEdit(item, index) {
       Toast('编辑地址:' + index);
     }

src/area/README.md

@@ -94,7 +94,7 @@ Each property is a simple key-value object, key is a 6-bit code of the area of w
 
 Example of `AreaList`
 
-```javascript
+```js
 {
   province_list: {
     110000: 'Beijing',
@@ -123,7 +123,7 @@ All code of China: [Area.json](https://github.com/youzan/vant/blob/dev/src/area/
 An array contains selected area objects.
 
 `code` - code of selected area, `name` - name of selected area
-```javascript
+```js
 [{
   code: '330000',
   name: 'Zhejiang Province'

src/area/README.zh-CN.md

@@ -6,7 +6,7 @@
 
 ### 引入
 
-```javascript
+```js
 import Vue from 'vue';
 import { Area } from 'vant';
 
@@ -94,7 +94,7 @@ Vue.use(Area);
 
 `AreaList`具体格式如下：
 
-```javascript
+```js
 {
   province_list: {
     110000: '北京市',
@@ -129,7 +129,7 @@ Vue.use(Area);
 
 `code` 代表被选中的地区编码， `name` 代表被选中的地区名称
 
-```javascript
+```js
 [
   {
     code: '110000',

src/checkbox/README.md

@@ -18,7 +18,7 @@ Vue.use(CheckboxGroup);
 <van-checkbox v-model="checked">Checkbox</van-checkbox>
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {
@@ -97,7 +97,7 @@ When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an
 </van-checkbox-group>
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {

src/checkbox/README.zh-CN.md

@@ -20,7 +20,7 @@ Vue.use(CheckboxGroup);
 <van-checkbox v-model="checked">复选框</van-checkbox>
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {
@@ -107,7 +107,7 @@ export default {
 </van-checkbox-group>
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {

src/count-down/README.md

@@ -89,6 +89,8 @@ export default {
 ```
 
 ```js
+import { Toast } from 'vant';
+
 export default {
   methods: {
     start() {
@@ -101,7 +103,7 @@ export default {
       this.$refs.countDown.reset();
     },
     finish() {
-      this.$toast('Finished');
+      Toast('Finished');
     }
   }
 }

src/count-down/README.zh-CN.md

@@ -99,6 +99,8 @@ export default {
 ```
 
 ```js
+import { Toast } from 'vant';
+
 export default {
   methods: {
     start() {
@@ -111,7 +113,7 @@ export default {
       this.$refs.countDown.reset();
     },
     finish() {
-      this.$toast('倒计时结束');
+      Toast('倒计时结束');
     }
   }
 }

src/coupon-list/README.md

@@ -39,7 +39,7 @@ Vue.use(CouponList);
 </van-popup>
 ```
 
-```javascript
+```js
 const coupon = {
   available: 1,
   originCondition: 0,

src/coupon-list/README.zh-CN.md

@@ -39,7 +39,7 @@ Vue.use(CouponList);
 </van-popup>
 ```
 
-```javascript
+```js
 const coupon = {
   available: 1,
   condition: '无使用门槛\n最多优惠12元',

src/datetime-picker/README.md

@@ -26,7 +26,7 @@ Vue.use(DatetimePicker);
 />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {

src/datetime-picker/README.zh-CN.md

@@ -6,7 +6,7 @@
 
 ### 引入
 
-```javascript
+```js
 import Vue from 'vue';
 import { DatetimePicker } from 'vant';
 
@@ -26,7 +26,7 @@ Vue.use(DatetimePicker);
 />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {

src/dialog/README.md

@@ -15,7 +15,7 @@ Vue.use(Dialog);
 
 Used to prompt for some messages, only including one confirm button
 
-```javascript
+```js
 Dialog.alert({
   title: 'Title',
   message: 'Content'
@@ -34,7 +34,7 @@ Dialog.alert({
 
 Used to confirm some messages, including a confirm button and a cancel button
 
-```javascript
+```js
  Dialog.confirm({
   title: 'Title',
   message: 'Content'

src/dialog/README.zh-CN.md

@@ -41,7 +41,7 @@ export default {
 
 用于提示一些消息，只包含一个确认按钮
 
-```javascript
+```js
 Dialog.alert({
   title: '标题',
   message: '弹窗内容'
@@ -60,7 +60,7 @@ Dialog.alert({
 
 用于确认消息，包含取消和确认按钮
 
-```javascript
+```js
 Dialog.confirm({
   title: '标题',
   message: '弹窗内容'

src/goods-action/README.md

@@ -24,7 +24,9 @@ Vue.use(GoodsActionIcon);
 </van-goods-action>
 ```
 
-```javascript
+```js
+import { Toast } from 'vant';
+
 export default {
   methods: {
     onClickIcon() {

src/goods-action/README.zh-CN.md

@@ -24,7 +24,9 @@ Vue.use(GoodsActionIcon);
 </van-goods-action>
 ```
 
-```javascript
+```js
+import { Toast } from 'vant';
+
 export default {
   methods: {
     onClickIcon() {

src/image-preview/README.md

@@ -13,7 +13,7 @@ Vue.use(ImagePreview);
 
 ### Basic Usage
 
-```javascript
+```js
 ImagePreview([
   'https://img.yzcdn.cn/vant/apple-1.jpg',
   'https://img.yzcdn.cn/vant/apple-2.jpg'
@@ -22,7 +22,7 @@ ImagePreview([
 
 ### Custom config
 
-```javascript
+```js
 ImagePreview({
   images: [
     'https://img.yzcdn.cn/vant/apple-1.jpg',
@@ -37,7 +37,7 @@ ImagePreview({
 
 ### Async Close
 
-```javascript
+```js
 const instance = ImagePreview({
   images: [
     'https://img.yzcdn.cn/vant/apple-1.jpg',

src/image-preview/README.zh-CN.md

@@ -17,7 +17,7 @@ Vue.use(ImagePreview);
 
 直接传入图片数组，即可展示图片预览
 
-```javascript
+```js
 ImagePreview([
   'https://img.yzcdn.cn/1.jpg',
   'https://img.yzcdn.cn/2.jpg'
@@ -28,7 +28,7 @@ ImagePreview([
 
 通过传入配置对象，可以指定初始图片的位置、监听关闭事件
 
-```javascript
+```js
 ImagePreview({
   images: [
     'https://img.yzcdn.cn/1.jpg',
@@ -45,7 +45,7 @@ ImagePreview({
 
 通过`asyncClose`属性可以开启异步关闭，开启后异步关闭后，只能通过实例上的 close 方法关闭图片预览
 
-```javascript
+```js
 const instance = ImagePreview({
   images: [
     'https://img.yzcdn.cn/1.jpg',

src/lazyload/README.md

@@ -22,7 +22,7 @@ Vue.use(Lazyload, {
 <img v-for="img in imageList" v-lazy="img" >
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {

src/lazyload/README.zh-CN.md

@@ -26,7 +26,7 @@ Vue.use(Lazyload, {
 <img v-for="img in imageList" v-lazy="img" >
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {

src/nav-bar/README.md

@@ -25,6 +25,8 @@ Vue.use(NavBar);
 ```
 
 ```js
+import { Toast } from 'vant';
+
 export default {
   methods: {
     onClickLeft() {

src/nav-bar/README.zh-CN.md

@@ -25,6 +25,8 @@ Vue.use(NavBar);
 ```
 
 ```js
+import { Toast } from 'vant';
+
 export default {
   methods: {
     onClickLeft() {

src/number-keyboard/README.md

@@ -28,14 +28,15 @@ Vue.use(NumberKeyboard);
 />
 ```
 
-```javascript
+```js
+import { Toast } from 'vant';
+
 export default {
   data() {
     return {
       show: true
     }
   },
-
   methods: {
     onInput(value) {
       Toast(value);
@@ -79,7 +80,7 @@ export default {
 />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {

src/number-keyboard/README.zh-CN.md

@@ -32,14 +32,15 @@ Vue.use(NumberKeyboard);
 />
 ```
 
-```javascript
+```js
+import { Toast } from 'vant';
+
 export default {
   data() {
     return {
       show: true
     }
   },
-
   methods: {
     onInput(value) {
       Toast(value);
@@ -85,7 +86,7 @@ export default {
 />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {

src/pagination/README.md

@@ -21,7 +21,7 @@ Vue.use(Pagination);
 />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return  {

src/pagination/README.zh-CN.md

@@ -22,7 +22,7 @@ Vue.use(Pagination);
 />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return  {

src/password-input/README.md

@@ -36,7 +36,7 @@ Vue.use(NumberKeyboard);
 />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {
@@ -101,7 +101,7 @@ Use `error-info` prop to set error message. For example, a password error is pro
 />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {

src/password-input/README.zh-CN.md

@@ -36,7 +36,7 @@ Vue.use(NumberKeyboard);
 />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {
@@ -101,7 +101,7 @@ export default {
 />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {

src/picker/README.md

@@ -21,7 +21,9 @@ Vue.use(Picker);
 <van-picker :columns="columns" @change="onChange" />
 ```
 
-```javascript
+```js
+import { Toast } from 'vant';
+
 export default {
   data() {
     return {
@@ -58,7 +60,9 @@ export default {
 />
 ```
 
-```javascript
+```js
+import { Toast } from 'vant';
+
 export default {
   data() {
     return {
@@ -122,7 +126,7 @@ export default {
 <van-picker :columns="columns" />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {
@@ -142,7 +146,7 @@ export default {
 <van-picker :columns="columns" @change="onChange" />
 ```
 
-```javascript
+```js
 const states = {
   'Group1': ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
   'Group2': ['Alabama', 'Kansas', 'Louisiana', 'Texas']

src/picker/README.zh-CN.md

@@ -23,7 +23,9 @@ Vue.use(Picker);
 <van-picker :columns="columns" @change="onChange" />
 ```
 
-```javascript
+```js
+import { Toast } from 'vant';
+
 export default {
   data() {
     return {
@@ -64,7 +66,9 @@ export default {
 />
 ```
 
-```javascript
+```js
+import { Toast } from 'vant';
+
 export default {
   data() {
     return {
@@ -130,7 +134,7 @@ export default {
 <van-picker :columns="columns" />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {
@@ -150,7 +154,7 @@ export default {
 <van-picker :columns="columns" @change="onChange" />
 ```
 
-```javascript
+```js
 const citys = {
   '浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州'],
   '福建': ['福州', '厦门', '莆田', '三明', '泉州']

src/popup/README.md

@@ -19,7 +19,7 @@ Vue.use(Popup);
 <van-popup v-model="show">Content</van-popup>
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {

src/popup/README.zh-CN.md

@@ -25,7 +25,7 @@ Vue.use(Popup);
 <van-popup v-model="show">内容</van-popup>
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {

src/pull-refresh/README.md

@@ -21,7 +21,9 @@ The `refresh` event will be triggered when pull refresh, you should set `v-model
 </van-pull-refresh>
 ```
 
-```javascript
+```js
+import { Toast } from 'vant';
+
 export default {
   data() {
     return {
@@ -29,11 +31,10 @@ export default {
       isLoading: false
     }
   },
-
   methods: {
     onRefresh() {
       setTimeout(() => {
-        this.$toast('Refresh Success');
+        Toast('Refresh Success');
         this.isLoading = false;
         this.count++;
       }, 1000);

src/pull-refresh/README.zh-CN.md

@@ -21,7 +21,9 @@ Vue.use(PullRefresh);
 </van-pull-refresh>
 ```
 
-```javascript
+```js
+import { Toast } from 'vant';
+
 export default {
   data() {
     return {
@@ -29,11 +31,10 @@ export default {
       isLoading: false
     }
   },
-
   methods: {
     onRefresh() {
       setTimeout(() => {
-        this.$toast('刷新成功');
+        Toast('刷新成功');
         this.isLoading = false;
         this.count++;
       }, 1000);

src/radio/README.md

@@ -23,7 +23,7 @@ Use `v-model` to bind the name of checked radio
 </van-radio-group>
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {

src/radio/README.zh-CN.md

@@ -23,7 +23,7 @@ Vue.use(RadioGroup);
 </van-radio-group>
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {

src/rate/README.md

@@ -17,7 +17,7 @@ Vue.use(Rate);
 <van-rate v-model="value" />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {
@@ -60,7 +60,7 @@ export default {
 />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {

src/rate/README.zh-CN.md

@@ -17,7 +17,7 @@ Vue.use(Rate);
 <van-rate v-model="value" />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {
@@ -60,7 +60,7 @@ export default {
 />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {

src/search/README.md

@@ -17,7 +17,7 @@ Vue.use(Search);
 <van-search placeholder="Placeholder" v-model="value" />
 ```
 
-```javascript
+```js
 export default {
   data() {
     value: ''

src/sidebar/README.md

@@ -63,6 +63,8 @@ export default {
 ```
 
 ```js
+import { Notify } from 'vant';
+
 export default {
   data() {
     return {

src/sidebar/README.zh-CN.md

@@ -72,6 +72,8 @@ export default {
 ```
 
 ```js
+import { Notify } from 'vant';
+
 export default {
   data() {
     return {

src/sku/README.md

@@ -2,7 +2,7 @@
 
 ### Install
 
-```javascript
+```js
 import Vue from 'vue';
 import { Sku } from 'vant';
 
@@ -182,7 +182,7 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Sku instance and call instance m
 
 ### Sku Data Structure
 
-```javascript
+```js
 sku: {
   tree: [
     {
@@ -253,7 +253,7 @@ sku: {
 
 ### properties Data Structure
 
-```javascript
+```js
   [
     {
       k_id: 123,
@@ -277,7 +277,7 @@ sku: {
 
 ### initialSku Data Structure
 
-```javascript
+```js
 {
   // Key：skuKeyStr
   // Value：skuValueId
@@ -292,7 +292,7 @@ sku: {
 
 ### Goods Data Structure
 
-```javascript
+```js
 goods: {
   title: 'Title',
   picture: 'https://img.yzcdn.cn/1.jpg'
@@ -302,7 +302,7 @@ goods: {
 
 ### customStepperConfig Data Structure
 
-```javascript
+```js
 customStepperConfig: {
   // custom quota text
   quotaText: 'only 5 can buy',
@@ -334,7 +334,7 @@ customStepperConfig: {
 
 ### messageConfig Data Structure
 
-```javascript
+```js
 messageConfig: {
   // the upload image callback
   uploadImg: () => {
@@ -355,7 +355,7 @@ messageConfig: {
 
 ### Events Params Data Structure
 
-```javascript
+```js
 skuData: {
   goodsId: '946755',
   messages: {

src/sku/README.zh-CN.md

@@ -2,7 +2,7 @@
 
 ### 引入
 
-```javascript
+```js
 import Vue from 'vue';
 import { Sku } from 'vant';
 
@@ -188,7 +188,7 @@ Sku 组件默认划分好了若干区块，这些区块都定义成了插槽，
 
 ### sku 对象结构
 
-```javascript
+```js
 sku: {
   // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
   // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
@@ -244,7 +244,7 @@ sku: {
 
 ### properties 对象结构
 
-```javascript
+```js
   [ // 商品属性
     {
       k_id: 123, // 属性id
@@ -268,7 +268,7 @@ sku: {
 
 ### initialSku 对象结构
 
-```javascript
+```js
 {
   // 键：skuKeyStr（sku 组合列表中当前类目对应的 key 值）
   // 值：skuValueId（规格值 id）
@@ -287,7 +287,7 @@ sku: {
 
 ### goods 对象结构
 
-```javascript
+```js
 goods: {
   // 商品标题
   title: '测试商品',
@@ -298,7 +298,7 @@ goods: {
 
 ### customStepperConfig 对象结构
 
-```javascript
+```js
 customStepperConfig: {
   // 自定义限购文案
   quotaText: '每次限购xxx件',
@@ -330,7 +330,7 @@ customStepperConfig: {
 
 ### messageConfig Data Structure
 
-```javascript
+```js
 messageConfig: {
   // 图片上传回调，需要返回一个promise，promise正确执行的结果需要是一个图片url
   uploadImg: () => {
@@ -351,7 +351,7 @@ messageConfig: {
 
 ### 添加购物车和点击购买回调函数接收的 skuData 对象结构
 
-```javascript
+```js
 skuData: {
   // 商品 id
   goodsId: '946755',

src/slider/README.md

@@ -18,16 +18,17 @@ Vue.use(Slider);
 ```
 
 ```js
+import { Toast } from 'vant';
+
 export default {
   data() {
     return {
       value: 50
     };
   },
-
   methods: {
     onChange(value) {
-      this.$toast('Current value：' + value);
+      Toast('Current value：' + value);
     }
   }
 };

src/slider/README.zh-CN.md

@@ -18,16 +18,17 @@ Vue.use(Slider);
 ```
 
 ```js
+import { Toast } from 'vant';
+
 export default {
   data() {
     return {
       value: 50
     };
   },
-
   methods: {
     onChange(value) {
-      this.$toast('当前值：' + value);
+      Toast('当前值：' + value);
     }
   }
 };

src/stepper/README.md

@@ -17,7 +17,7 @@ Vue.use(Stepper);
 <van-stepper v-model="value" />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {
@@ -79,14 +79,15 @@ export default {
 />
 ```
 
-```javascript
+```js
+import { Toast } from 'vant';
+
 export default {
   data() {
     return {
       value: 1
     }
   },
-
   methods: {
     onChange(value) {
       Toast.loading({ forbidClick: true });

src/stepper/README.zh-CN.md

@@ -23,7 +23,7 @@ Vue.use(Stepper);
 <van-stepper v-model="value" />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {
@@ -101,14 +101,15 @@ export default {
 />
 ```
 
-```javascript
+```js
+import { Toast } from 'vant';
+
 export default {
   data() {
     return {
       value: 1
     }
   },
-
   methods: {
     onChange(value) {
       Toast.loading({ forbidClick: true });

src/steps/README.md

@@ -23,7 +23,7 @@ Vue.use(Steps);
 </van-steps>
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {

src/steps/README.zh-CN.md

@@ -23,7 +23,7 @@ Vue.use(Steps);
 </van-steps>
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {

src/swipe/README.md

@@ -37,7 +37,7 @@ Use [Lazyload](#/en-US/lazyload) component to lazyload image
 </van-swipe>
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {
@@ -62,6 +62,8 @@ export default {
 ```
 
 ```js
+import { Toast } from 'vant';
+
 export default {
   methods: {
     onChange(index) {

src/swipe/README.zh-CN.md

@@ -37,7 +37,7 @@ Vue.use(SwipeItem);
 </van-swipe>
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {
@@ -62,6 +62,8 @@ export default {
 ```
 
 ```js
+import { Toast } from 'vant';
+
 export default {
   methods: {
     onChange(index) {

src/switch-cell/README.md

@@ -23,7 +23,7 @@ Vue.use(SwitchCell);
 </van-cell-group>
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {

src/switch-cell/README.zh-CN.md

@@ -23,7 +23,7 @@ Vue.use(SwitchCell);
 </van-cell-group>
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {

src/switch/README.md

@@ -17,7 +17,7 @@ Vue.use(Switch);
 <van-switch v-model="checked" />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {

src/switch/README.zh-CN.md

@@ -19,7 +19,7 @@ Vue.use(Switch);
 <van-switch v-model="checked" />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {

src/tab/README.md

@@ -78,11 +78,13 @@ You can set `disabled` attribute on the corresponding `van-tab`.
 </van-tabs>
 ```
 
-```javascript
+```js
+import { Toast } from 'vant';
+
 export default {
   methods: {
     onClickDisabled(name, title) {
-      this.$toast(title + ' is disabled');
+      Toast(title + ' is disabled');
     }
   }
 };
@@ -110,11 +112,13 @@ Tabs styled as cards.
 </van-tabs>
 ```
 
-```javascript
+```js
+import { Toast } from 'vant';
+
 export default {
   methods: {
     onClick(name, title) {
-      this.$toast(title);
+      Toast(title);
     }
   }
 };

src/tab/README.zh-CN.md

@@ -81,11 +81,13 @@ export default {
 </van-tabs>
 ```
 
-```javascript
+```js
+import { Toast } from 'vant';
+
 export default {
   methods: {
     onClickDisabled(name, title) {
-      this.$toast(name + '已被禁用');
+      Toast(name + '已被禁用');
     }
   }
 };
@@ -114,11 +116,13 @@ export default {
 </van-tabs>
 ```
 
-```javascript
+```js
+import { Toast } from 'vant';
+
 export default {
   methods: {
     onClick(name, title) {
-      this.$toast(title);
+      Toast(title);
     }
   }
 };

src/tabbar/README.md

@@ -23,7 +23,7 @@ Vue.use(TabbarItem);
 </van-tabbar>
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {
@@ -44,7 +44,7 @@ export default {
 </van-tabbar>
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {
@@ -84,7 +84,7 @@ Use `icon` slot to custom icon
 </van-tabbar>
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {
@@ -126,6 +126,8 @@ export default {
 ```
 
 ```js
+import { Notify } from 'vant';
+
 export default {
   methods: {
     onChange(index) {

src/tabbar/README.zh-CN.md

@@ -25,7 +25,7 @@ Vue.use(TabbarItem);
 </van-tabbar>
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {
@@ -48,7 +48,7 @@ export default {
 </van-tabbar>
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {
@@ -90,7 +90,7 @@ export default {
 </van-tabbar>
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {
@@ -131,6 +131,8 @@ export default {
 ```
 
 ```js
+import { Notify } from 'vant';
+
 export default {
   methods: {
     onChange(index) {

src/toast/README.md

@@ -2,7 +2,7 @@
 
 ### Install
 
-```javascript
+```js
 import Vue from 'vue';
 import { Toast } from 'vant';
 
@@ -13,13 +13,13 @@ Vue.use(Toast);
 
 ### Text
 
-```javascript
+```js
 Toast('Some messages');
 ```
 
 ### Loading
 
-```javascript
+```js
 Toast.loading({
   message: 'Loading...',
   forbidClick: true
@@ -34,7 +34,7 @@ Toast.loading({
 
 ### Success/Fail
 
-```javascript
+```js
 Toast.success('Success');
 Toast.fail('Fail');
 ```
@@ -55,7 +55,7 @@ Toast({
 
 ### Update Message
 
-```javascript
+```js
 const toast = Toast.loading({
   duration: 0, // continuous display toast
   forbidClick: true,

src/tree-select/README.md

@@ -21,7 +21,7 @@ Vue.use(TreeSelect);
 />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {
@@ -43,7 +43,7 @@ export default {
 />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {
@@ -136,7 +136,7 @@ export default {
 
 In every tree object, `text` property defines `id` stands for the unique key while the `children` contains sub-tree objects.
 
-```javascript
+```js
 [
   {
     // name of the parent node

src/tree-select/README.zh-CN.md

@@ -23,7 +23,7 @@ Vue.use(TreeSelect);
 />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {
@@ -47,7 +47,7 @@ export default {
 />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {
@@ -142,7 +142,7 @@ export default {
 
 `items` 整体为一个数组，数组内包含一系列描述分类的对象，每个分类里，`text`表示当前分类的名称，`children`表示分类里的可选项。
 
-```javascript
+```js
 [
   {
     // 导航名称

src/uploader/README.md

@@ -17,7 +17,7 @@ Vue.use(Uploader);
 <van-uploader :after-read="afterRead" />
 ```
 
-```javascript
+```js
 export default {
   methods: {
     afterRead(file) {
@@ -33,7 +33,7 @@ export default {
 <van-uploader v-model="fileList" multiple />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {
@@ -55,7 +55,7 @@ export default {
 />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {
@@ -80,6 +80,8 @@ export default {
 ```
 
 ```js
+import { Toast } from 'vant';
+
 export default {
   methods: {
     beforeRead(file) {
@@ -90,7 +92,6 @@ export default {
     
       return true;
     },
-
     asyncBeforeRead(file) {
       return new Promise((resolve, reject) => {
         if (file.type !== 'image/jpeg') {

src/uploader/README.zh-CN.md

@@ -19,7 +19,7 @@ Vue.use(Uploader);
 <van-uploader :after-read="afterRead" />
 ```
 
-```javascript
+```js
 export default {
   methods: {
     afterRead(file) {
@@ -38,7 +38,7 @@ export default {
 <van-uploader v-model="fileList" multiple />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {
@@ -65,7 +65,7 @@ export default {
 />
 ```
 
-```javascript
+```js
 export default {
   data() {
     return {
@@ -94,6 +94,8 @@ export default {
 ```
 
 ```js
+import { Toast } from 'vant';
+
 export default {
   methods: {
     // 返回布尔值
@@ -105,7 +107,6 @@ export default {
     
       return true;
     },
-
     // 返回 Promise
     asyncBeforeRead(file) {
       return new Promise((resolve, reject) => {