feat: layout/pagination 增加在线调试功能

src/packages/__VUE/layout/doc.md

@@ -6,7 +6,7 @@
 
 ### 安装
 
-``` javascript
+```javascript
 import { createApp } from 'vue';
 // vue
 import { Layout,Row,Col } from '@nutui/nutui';
@@ -22,123 +22,196 @@ app.use(Col);
 ## 代码演示
 
 ### 基础用法
-
+:::demo
 ```html
-<nut-row>
-  <nut-col :span="24">
-    <div class="flex-content">span:24</div>
-  </nut-col>
-</nut-row>
-<nut-row>
-  <nut-col :span="12">
-    <div class="flex-content">span:12</div>
-  </nut-col>
-  <nut-col :span="12">
-    <div class="flex-content flex-content-light">span:12</div>
-  </nut-col>
-</nut-row>
-<nut-row>
-  <nut-col :span="8">
-    <div class="flex-content">span:8</div>
-  </nut-col>
-  <nut-col :span="8">
-    <div class="flex-content flex-content-light">span:8</div>
-  </nut-col>
-  <nut-col :span="8">
-    <div class="flex-content">span:8</div>
-  </nut-col>
-</nut-row>
-<nut-row>
-  <nut-col :span="6">
-    <div class="flex-content">span:6</div>
-  </nut-col>
-  <nut-col :span="6">
-    <div class="flex-content flex-content-light">span:6</div>
-  </nut-col>
-  <nut-col :span="6">
-    <div class="flex-content">span:6</div>
-  </nut-col>
-  <nut-col :span="6">
-    <div class="flex-content">span:6</div>
-  </nut-col>
-</nut-row>
-```
-
-### 设置元素间距
-
-```html
-<nut-row :gutter="10">
+<template>
+  <nut-row>
+    <nut-col :span="24">
+      <div class="flex-content">span:24</div>
+    </nut-col>
+  </nut-row>
+  <nut-row>
+    <nut-col :span="12">
+      <div class="flex-content">span:12</div>
+    </nut-col>
+    <nut-col :span="12">
+      <div class="flex-content flex-content-light">span:12</div>
+    </nut-col>
+  </nut-row>
+  <nut-row>
     <nut-col :span="8">
-        <div class="flex-content">span:8</div>
+      <div class="flex-content">span:8</div>
     </nut-col>
     <nut-col :span="8">
-        <div class="flex-content flex-content-light">span:8</div>
+      <div class="flex-content flex-content-light">span:8</div>
     </nut-col>
     <nut-col :span="8">
-        <div class="flex-content">span:8</div>
+      <div class="flex-content">span:8</div>
     </nut-col>
-</nut-row>   
+  </nut-row>
+  <nut-row>
+    <nut-col :span="6">
+      <div class="flex-content">span:6</div>
+    </nut-col>
+    <nut-col :span="6">
+      <div class="flex-content flex-content-light">span:6</div>
+    </nut-col>
+    <nut-col :span="6">
+      <div class="flex-content">span:6</div>
+    </nut-col>
+    <nut-col :span="6">
+      <div class="flex-content">span:6</div>
+    </nut-col>
+  </nut-row>
+</template>
+<style lang="scss" scoped>
+.nut-row {
+  overflow: hidden;
+  &:not(:last-child) .nut-col {
+    margin-bottom: 15px;
+  }
+  margin-bottom: 15px;
+}
+.flex-content {
+  line-height: 40px;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  background: #ff8881;
+  &.flex-content-light {
+    background: #ffc7c4;
+  }
+  &.flex-content-height {
+    height: 50px;
+  }
+}
+</style>
 ```
+:::
+### 设置元素间距
+:::demo
+```html
+<template>
+  <nut-row :gutter="10">
+      <nut-col :span="8">
+          <div class="flex-content">span:8</div>
+      </nut-col>
+      <nut-col :span="8">
+          <div class="flex-content flex-content-light">span:8</div>
+      </nut-col>
+      <nut-col :span="8">
+          <div class="flex-content">span:8</div>
+      </nut-col>
+  </nut-row>   
+</template>
+<style lang="scss" scoped>
+.nut-row {
+  overflow: hidden;
+  &:not(:last-child) .nut-col {
+    margin-bottom: 15px;
+  }
+  margin-bottom: 15px;
+}
+.flex-content {
+  line-height: 40px;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  background: #ff8881;
+  &.flex-content-light {
+    background: #ffc7c4;
+  }
+  &.flex-content-height {
+    height: 50px;
+  }
+}
+</style>
+```
+:::
 ### Flex布局
-
+:::demo
 ```html
-<nut-row type="flex" wrap="nowrap">
-  <nut-col :span="6">
-    <div class="flex-content">span:6</div>
-  </nut-col>
-  <nut-col :span="6">
-    <div class="flex-content flex-content-light">span:6</div>
-  </nut-col>
-  <nut-col :span="6">
-    <div class="flex-content">span:6</div>
-  </nut-col>
-</nut-row>
-<nut-row type="flex" justify="center">
-  <nut-col :span="6">
-    <div class="flex-content">span:6</div>
-  </nut-col>
-  <nut-col :span="6">
-    <div class="flex-content flex-content-light">span:6</div>
-  </nut-col>
-  <nut-col :span="6">
-    <div class="flex-content">span:6</div>
-  </nut-col>
-</nut-row>
-<nut-row type="flex" justify="end">
-  <nut-col :span="6">
-    <div class="flex-content">span:6</div>
-  </nut-col>
-  <nut-col :span="6">
-    <div class="flex-content flex-content-light">span:6</div>
-  </nut-col>
-  <nut-col :span="6">
-    <div class="flex-content">span:6</div>
-  </nut-col>
-</nut-row>
-<nut-row type="flex" justify="space-between">
-  <nut-col :span="6">
-    <div class="flex-content">span:6</div>
-  </nut-col>
-  <nut-col :span="6">
-    <div class="flex-content flex-content-light">span:6</div>
-  </nut-col>
-  <nut-col :span="6">
-    <div class="flex-content">span:6</div>
-  </nut-col>
-</nut-row>
-<nut-row type="flex" justify="space-around">
-  <nut-col :span="6">
-    <div class="flex-content">span:6</div>
-  </nut-col>
-  <nut-col :span="6">
-    <div class="flex-content flex-content-light">span:6</div>
-  </nut-col>
-  <nut-col :span="6">
-    <div class="flex-content">span:6</div>
-  </nut-col>
-</nut-row>
+<template>
+  <nut-row type="flex" wrap="nowrap">
+    <nut-col :span="6">
+      <div class="flex-content">span:6</div>
+    </nut-col>
+    <nut-col :span="6">
+      <div class="flex-content flex-content-light">span:6</div>
+    </nut-col>
+    <nut-col :span="6">
+      <div class="flex-content">span:6</div>
+    </nut-col>
+  </nut-row>
+  <nut-row type="flex" justify="center">
+    <nut-col :span="6">
+      <div class="flex-content">span:6</div>
+    </nut-col>
+    <nut-col :span="6">
+      <div class="flex-content flex-content-light">span:6</div>
+    </nut-col>
+    <nut-col :span="6">
+      <div class="flex-content">span:6</div>
+    </nut-col>
+  </nut-row>
+  <nut-row type="flex" justify="end">
+    <nut-col :span="6">
+      <div class="flex-content">span:6</div>
+    </nut-col>
+    <nut-col :span="6">
+      <div class="flex-content flex-content-light">span:6</div>
+    </nut-col>
+    <nut-col :span="6">
+      <div class="flex-content">span:6</div>
+    </nut-col>
+  </nut-row>
+  <nut-row type="flex" justify="space-between">
+    <nut-col :span="6">
+      <div class="flex-content">span:6</div>
+    </nut-col>
+    <nut-col :span="6">
+      <div class="flex-content flex-content-light">span:6</div>
+    </nut-col>
+    <nut-col :span="6">
+      <div class="flex-content">span:6</div>
+    </nut-col>
+  </nut-row>
+  <nut-row type="flex" justify="space-around">
+    <nut-col :span="6">
+      <div class="flex-content">span:6</div>
+    </nut-col>
+    <nut-col :span="6">
+      <div class="flex-content flex-content-light">span:6</div>
+    </nut-col>
+    <nut-col :span="6">
+      <div class="flex-content">span:6</div>
+    </nut-col>
+  </nut-row>
+</template>
+<style lang="scss" scoped>
+.nut-row {
+  overflow: hidden;
+  &:not(:last-child) .nut-col {
+    margin-bottom: 15px;
+  }
+  margin-bottom: 15px;
+}
+.flex-content {
+  line-height: 40px;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  background: #ff8881;
+  &.flex-content-light {
+    background: #ffc7c4;
+  }
+  &.flex-content-height {
+    height: 50px;
+  }
+}
+</style>
 ```
-
+:::
 ## Prop
 
 ### row

src/packages/__VUE/pagination/doc.md

@@ -5,9 +5,12 @@
 当数据量较多时，采用分页的形式分隔长列表。
     
 ### 安装
-``` javascript
+```javascript
 import { createApp } from 'vue';
+//vue
 import { Pagination,Icon } from '@nutui/nutui';
+//taro
+import { Pagination,Icon } from '@nutui/nutui-taro';
 
 const app = createApp();
 app.use(Pagination).use(Icon);
@@ -15,19 +18,19 @@ app.use(Pagination).use(Icon);
     
 ### 基础用法
 通过 v-model 来绑定当前页码。
-``` html
-<nut-pagination v-model="currentPage" :total-items="25" :items-per-page="5" @change="pageChange" />
-```  
-``` javascript
+:::demo
+```html
+<template>
+  <nut-pagination v-model="currentPage" :total-items="25" :items-per-page="5" @change="pageChange" />
+</template>
+<script lang="ts">
+import { ref, reactive, toRefs } from 'vue';
 export default {
   setup() {
     const state = reactive({
       currentPage: 1,
-      currentPage1: 1,
-      currentPage2: 1,
-      currentPage3: 1
     });
-    const pageChange = (value) => {
+    const pageChange = (value: number) => {
       console.log(value);
     };
 
@@ -37,33 +40,120 @@ export default {
     };
   }
 };
-```
+</script>
+<style lang="scss" scoped>
+  .nut-pagination {
+    margin-left:20px;
+  }
+</style>
+```  
+:::
 ### 简单模式
 将 mode 设置为 simple 来切换到简单模式，此时分页器不会展示具体的页码按钮。
-``` html
-<nut-pagination v-model="currentPage1" :page-count="12" mode="simple" @change="pageChange" />
-```  
+:::demo
+```html
+<template>
+  <nut-pagination v-model="currentPage1" :page-count="12" mode="simple" @change="pageChange" />
+</template>
+<script lang="ts">
+import { ref, reactive, toRefs } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      currentPage1: 1,
+    });
+    const pageChange = (value: number) => {
+      console.log(value);
+    };
+
+    return {
+      ...toRefs(state),
+      pageChange
+    };
+  }
+};
+</script>
+<style lang="scss" scoped>
+  .nut-pagination {
+    margin-left:20px;
+  }
+</style>
+```
+:::
 ### 显示省略号
 设置 force-ellipses 后会展示省略号按钮，点击后可以快速跳转。
-``` html
-<nut-pagination v-model="currentPage2" :total-items="125" :show-page-size="3"  @change="pageChange"  force-ellipses/>
-``` 
+:::demo
+```html
+<template>
+  <nut-pagination v-model="currentPage2" :total-items="125" :show-page-size="3"  @change="pageChange"  force-ellipses/>
+</template>
+<script lang="ts">
+import { ref, reactive, toRefs } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      currentPage2: 1,
+    });
+    const pageChange = (value: number) => {
+      console.log(value);
+    };
+
+    return {
+      ...toRefs(state),
+      pageChange
+    };
+  }
+};
+</script>
+<style lang="scss" scoped>
+  .nut-pagination {
+    margin-left:20px;
+  }
+</style>
+```
+:::
 ### 自定义按钮
 设置 force-ellipses 后会展示省略号按钮，点击后可以快速跳转。
-``` html
-<nut-pagination v-model="currentPage3" :total-items="500"  @change="pageChange"  :show-page-size="5">
-    <template #prev-text>
-        <nut-icon name="left" size="10px" />
-    </template>
-    <template #next-text>
-        <nut-icon name="right" size="10px" />
-    </template>
-    <template #page="{ item }">
-        {{ item.number == 3 ? 'hot' : item.text }}
-    </template>
-</nut-pagination>
-``` 
+:::demo
+```html
+<template>
+  <nut-pagination v-model="currentPage3" :total-items="500"  @change="pageChange"  :show-page-size="5">
+      <template #prev-text>
+          <nut-icon name="left" size="10px" />
+      </template>
+      <template #next-text>
+          <nut-icon name="right" size="10px" />
+      </template>
+      <template #page="{ item }">
+          {{ item.number == 3 ? 'hot' : item.text }}
+      </template>
+  </nut-pagination>
+</template>
+<script lang="ts">
+import { ref, reactive, toRefs } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      currentPage3: 1,
+    });
+    const pageChange = (value: number) => {
+      console.log(value);
+    };
 
+    return {
+      ...toRefs(state),
+      pageChange
+    };
+  }
+};
+</script>
+<style lang="scss" scoped>
+  .nut-pagination {
+    margin-left:20px;
+  }
+</style>
+``` 
+:::
 
     
 ## API