vant components

docs/examples-docs/panel.md

@@ -1,7 +1,7 @@
 <style>
 @component-namespace demo {
   @b panel {
-    .zan-panel-sum {
+    .van-panel-sum {
       background: #fff;
       text-align: right;
       font-size: 14px;
@@ -14,10 +14,10 @@
       }
     }
 
-    .zan-panel-buttons {
+    .van-panel-buttons {
       text-align: right;
 
-      .zan-button {
+      .van-button {
         margin-left: 5px;
       }
     }
@@ -33,7 +33,7 @@
 
 ### 使用指南
 
-如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+如果你已经按照快速上手中引入了整个`vant`，以下**组件注册**就可以忽略了，因为你已经全局注册了`vant`中的全部组件。
 
 #### 全局注册
 
@@ -41,8 +41,8 @@
 
 ```js
 import Vue from 'vue';
-import { Panel } from '@youzan/zanui-vue';
-import '@youzan/zanui-vue/lib/zanui-css/panel.css';
+import { Panel } from 'vant';
+import 'vant/lib/vant-css/panel.css';
 
 Vue.component(Panel.name, Panel);
 ```
@@ -52,11 +52,11 @@ Vue.component(Panel.name, Panel);
 如果你只是想在某个组件中使用，你可以在对应组件中注册`Panel`组件，这样只能在你注册的组件中使用`Panel`：
 
 ```js
-import { Panel } from '@youzan/zanui-vue';
+import { Panel } from 'vant';
 
 export default {
   components: {
-    'zan-panel': Panel
+    'van-panel': Panel
   }
 };
 ```
@@ -69,46 +69,46 @@ export default {
 
 :::demo 基础用法
 ```html
-<zan-panel title="标题" desc="标题描述" status="状态">
+<van-panel title="标题" desc="标题描述" status="状态">
   <div class="panel-content">
     panel内容
   </div>
-</zan-panel>
+</van-panel>
 ```
 :::
 
 #### 高级用法
 
-使用`slot`自定义内容。比如在自定义内容中放入一个`zan-card`。
+使用`slot`自定义内容。比如在自定义内容中放入一个`van-card`。
 
 :::demo 高级用法
 ```html
-<zan-panel title="标题" desc="标题描述" status="状态">
-  <zan-card
+<van-panel title="标题" desc="标题描述" status="状态">
+  <van-card
     title="商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余"
     desc="商品SKU1，商品SKU2"
     thumb="https://img.yzcdn.cn/upload_files/2017/02/17/FnDwvwHmU-OiqsbjAO5X7wh1KWrR.jpg!100x100.jpg">
-    <div class="zan-card__row" slot="title">
-      <h4 class="zan-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
-      <span class="zan-card__price">¥ 2.00</span>
+    <div class="van-card__row" slot="title">
+      <h4 class="van-card__title">商品名称是什么，两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余两行显示状态如效果图，多余多余多余</h4>
+      <span class="van-card__price">¥ 2.00</span>
     </div>
-    <div class="zan-card__row" slot="desc">
-      <h4 class="zan-card__desc">商品sku</h4>
-      <span class="zan-card__num">x 2</span>
+    <div class="van-card__row" slot="desc">
+      <h4 class="van-card__desc">商品sku</h4>
+      <span class="van-card__num">x 2</span>
     </div>
-    <div class="zan-card__footer" slot="footer">
-      <zan-button size="mini">按钮一</zan-button>
-      <zan-button size="mini">按钮二</zan-button>
+    <div class="van-card__footer" slot="footer">
+      <van-button size="mini">按钮一</van-button>
+      <van-button size="mini">按钮二</van-button>
     </div>
-  </zan-card>
-  <div class="zan-panel-sum">
+  </van-card>
+  <div class="van-panel-sum">
     合计：<span>¥ 1999.90</span>
   </div>
-  <div class="zan-panel-buttons" slot="footer">
-    <zan-button size="small">按钮一</zan-button>
-    <zan-button size="small" type="danger">按钮二</zan-button>
+  <div class="van-panel-buttons" slot="footer">
+    <van-button size="small">按钮一</van-button>
+    <van-button size="small" type="danger">按钮二</van-button>
   </div>
-</zan-panel>
+</van-panel>
 ```
 :::