feat: 添加range组件、calendar组件在线文档 (#964)

* feat: 添加range组件、calendar组件在线文档

src/packages/__VUE/calendar/doc.md

@@ -16,34 +16,37 @@ import { Calendar,Popup } from '@nutui/nutui-taro';
 const app = createApp();
 app.use(Calendar);
 app.use(Popup);
+
 ```
 
 ## 代码演示
 
 ### 基础用法
-
+:::demo
 ```html
-<nut-cell
-  :showIcon="true"
-  title="选择单个日期"
-  :desc="date ? `${date} ${dateWeek}` : '请选择'"
-  @click="openSwitch('isVisible')"
->
-</nut-cell>
-<nut-calendar
-  v-model:visible="isVisible"
-  :default-value="date"
-  @close="closeSwitch('isVisible')"
-  @choose="setChooseValue"
-  :start-date="`2019-10-11`"
-  :end-date="`2022-11-11`"
->
-</nut-calendar>
-```
-
-```javascript
-setup() {
-    const state: TestCalendarState = reactive({
+<template>
+  <nut-cell
+    :showIcon="true"
+    title="选择单个日期"
+    :desc="date ? `${date} ${dateWeek}` : '请选择'"
+    @click="openSwitch('isVisible')"
+  >
+  </nut-cell>
+  <nut-calendar
+    v-model:visible="isVisible"
+    :default-value="date"
+    @close="closeSwitch('isVisible')"
+    @choose="setChooseValue"
+    :start-date="`2019-10-11`"
+    :end-date="`2022-11-11`"
+  >
+  </nut-calendar>
+</template>
+<script lang="ts">
+import { reactive, toRefs } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
       isVisible: false,
       date: '',
       dateWeek: ''
@@ -65,35 +68,39 @@ setup() {
       setChooseValue
     };
   }
+};
+</script>
 ```
-
+:::
 ### 区间选择
-
+:::demo
 ```html
-<nut-cell
-  :showIcon="true"
-  title="选择日期区间"
-  :desc="date ? `${date[0]}至${date[1]}` : '请选择'"
-  @click="openSwitch('isVisible')"
->
-</nut-cell>
-<nut-calendar
-  v-model:visible="isVisible"
-  :default-value="date"
-  type="range"
-  :start-date="`2019-12-22`"
-  :end-date="`2021-01-08`"
-  @close="closeSwitch('isVisible')"
-  @choose="setChooseValue"
->
-</nut-calendar>
-```
-
-```javascript
-setup() {
-    const state: TestCalendarState = reactive({
+<template>
+  <nut-cell
+    :showIcon="true"
+    title="选择日期区间"
+    :desc="date ? `${date[0]}至${date[1]}` : '请选择'"
+    @click="openSwitch('isVisible')"
+  >
+  </nut-cell>
+  <nut-calendar
+    v-model:visible="isVisible"
+    :default-value="date"
+    type="range"
+    :start-date="`2019-12-22`"
+    :end-date="`2021-01-08`"
+    @close="closeSwitch('isVisible')"
+    @choose="setChooseValue"
+  >
+  </nut-calendar>
+</template>
+<script lang="ts">
+import { reactive, toRefs } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
       date: ['2019-12-23', '2019-12-26'],
-      isVisible2: true
+      isVisible: false
     });
     const openSwitch = param => {
       state[`${param}`] = true;
@@ -110,33 +117,37 @@ setup() {
       closeSwitch,
       setChooseValue,
     };
-  }
+  }  
+};
+</script>
 ```
-
+:::
 ### 自定义日历-自动回填
-
+:::demo
 ```html
-<nut-cell
-  :showIcon="true"
-  title="选择日期"
-  :desc="date ? date : '请选择'"
-  @click="openSwitch('isVisible')"
->
-</nut-cell>
-<nut-calendar
-  v-model:visible="isVisible"
-  @close="closeSwitch('isVisible')"
-  @choose="setChooseValue"
-  :start-date="null"
-  :end-date="null"
-  :is-auto-back-fill="true"
->
-</nut-calendar>
-```
-
-```javascript
-setup() {
-    const state: TestCalendarState = reactive({
+<template>
+  <nut-cell
+    :showIcon="true"
+    title="选择日期"
+    :desc="date ? date : '请选择'"
+    @click="openSwitch('isVisible')"
+  >
+  </nut-cell>
+  <nut-calendar
+    v-model:visible="isVisible"
+    @close="closeSwitch('isVisible')"
+    @choose="setChooseValue"
+    :start-date="null"
+    :end-date="null"
+    :is-auto-back-fill="true"
+  >
+  </nut-calendar>
+</template>
+<script lang="ts">
+import { reactive, toRefs } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
       date: '',
       isVisible: false
     });
@@ -151,29 +162,35 @@ setup() {
     };
     return {
       ...toRefs(state),
-      setChooseValue
+      setChooseValue,
+      openSwitch,
+      closeSwitch
     };
   }
+}
+</script>
 ```
-
+:::
 ### 平铺展示
-
+:::demo
 ```html
-<div class="test-calendar-wrapper">
-  <nut-calendar
-    :poppable="false"
-    :is-auto-back-fill="true"
-    :default-value="date"
-    @choose="setChooseValue"
-  >
-  </nut-calendar
-></div>
-```
-
-```javascript
-setup() {
-    const state: TestCalendarState = reactive({
-      date: '2020-07-08'
+<template>
+  <div class="test-calendar-wrapper">
+    <nut-calendar
+        :poppable="false"
+        :default-value="date"
+        :is-auto-back-fill="true"
+        @choose="setChooseValue"
+    >
+    </nut-calendar>
+  </div>
+</template>
+<script lang="ts">
+import { reactive, toRefs } from 'vue';
+export default {
+  setup() {
+    const state = reactive({
+      date: '2022-07-08'
     });
     const setChooseValue = param => {
       state.date = param[3];
@@ -183,16 +200,11 @@ setup() {
       setChooseValue
     };
   }
+}
+</script>
 ```
+:::
 
-### 基础用法
-
-```html
-
-```
-
-```javascript
-```
 
 ## API
 

src/packages/__VUE/range/doc.md

@@ -20,16 +20,48 @@ app.use(Range);
 ## 代码演示
 
 ### 基础用法
+:::demo
+
 ```html
-<nut-range v-model="value" @change="onChange"></nut-range>
+<template>
+  <nut-cell :style="{padding: '40px 18px'}">
+    <nut-range v-model="value" @change="onChange"></nut-range>
+  </nut-cell>
+</template>
+
+<script lang="ts">
+  import { ref } from 'vue';
+  import { Toast } from '@nutui/nutui';
+  export default {
+    setup() {
+      const value = ref(40);
+      const onChange = (value) => Toast.text('当前值：' + value);
+      return {
+        value,
+        onChange,
+      };
+    },
+  };
+</script>
+
 ```
-```javascript
+:::
+
+### 双滑块
+:::demo
+```html
+<template>
+  <nut-cell :style="{padding: '40px 18px'}">
+    <nut-range range v-model="value" @change="onChange"></nut-range>
+  </nut-cell>
+</template>
+
+<script lang="ts">
 import { ref } from 'vue';
 import { Toast } from '@nutui/nutui';
-
 export default {
   setup() {
-    const value = ref(40);
+    const value = ref([20, 80]);
     const onChange = (value) => Toast.text('当前值：' + value);
     return {
       value,
@@ -37,19 +69,24 @@ export default {
     };
   },
 };
+</script>
 ```
-
-### 双滑块
+:::
+### 指定范围
+:::demo
 ```html
-<nut-range range v-model="value" @change="onChange"></nut-range>
-```
-```javascript
+<template>
+  <nut-cell :style="{padding: '40px 18px'}">
+    <nut-range v-model="value" :max="10" :min="-10" @change="onChange" />
+  </nut-cell>
+</template>
+
+<script lang="ts">
 import { ref } from 'vue';
 import { Toast } from '@nutui/nutui';
-
 export default {
   setup() {
-    const value = ref([20, 80]);
+    const value = ref(0);
     const onChange = (value) => Toast.text('当前值：' + value);
     return {
       value,
@@ -57,51 +94,150 @@ export default {
     };
   },
 };
+</script>
 ```
-
-### 指定范围
-```html
-<nut-range v-model="value" :max="10" :min="-10" @change="onChange"></nut-range>
-```
-
+:::
 ### 设置步长
+:::demo
 ```html
-<nut-range v-model="value" :step="5" @change="onChange"></nut-range>
+<template>
+  <nut-cell :style="{padding: '40px 18px'}">
+    <nut-range v-model="value" :step="5" @change="onChange"></nut-range>
+  </nut-cell>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default {
+  setup() {
+    const value = ref(20);
+    const onChange = (value) => Toast.text('当前值：' + value);
+    return {
+      value,
+      onChange,
+    };
+  },
+};
+</script>
 ```
+:::
 ### 隐藏范围
+:::demo
 ```html
-<nut-range v-model="value" hidden-range @change="onChange"></nut-range>
-```
+<template>
+  <nut-cell :style="{padding: '40px 18px'}">
+    <nut-range v-model="value" hidden-range @change="onChange"></nut-range>
+  </nut-cell>
+</template>
 
+<script lang="ts">
+import { ref } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default {
+  setup() {
+    const value = ref(30);
+    const onChange = (value) => Toast.text('当前值：' + value);
+    return {
+      value,
+      onChange,
+    };
+  },
+};
+</script>
+```
+:::
 ### 隐藏标签
+:::demo
 ```html
-<nut-range v-model="value" hidden-tag @change="onChange"></nut-range>
+<template>
+  <nut-cell :style="{padding: '40px 18px'}">
+    <nut-range v-model="value" :hidden-tag="true" @change="onChange"></nut-range>
+  </nut-cell>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default {
+  setup() {
+    const value = ref(40);
+    const onChange = (value) => Toast.text('当前值：' + value);
+    return {
+      value,
+      onChange,
+    };
+  },
+};
+</script>
 ```
+:::
 
 ### 禁用
+:::demo
 ```html
-<nut-range v-model="value" disabled @change="onChange"></nut-range>
-```
+<template>
+  <nut-cell :style="{padding: '40px 18px'}">
+    <nut-range v-model="value" disabled @change="onChange"></nut-range>
+  </nut-cell>
+</template>
 
+<script lang="ts">
+import { ref } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default {
+  setup() {
+    const value = ref(50);
+    const onChange = (value) => Toast.text('当前值：' + value);
+    return {
+      value,
+      onChange,
+    };
+  },
+};
+</script>
+```
+:::
 ### 自定义样式
+:::demo
 ```html
-<nut-range
-  v-model="value"
-  inactive-color="rgba(163,184,255,1)"
-  button-color="rgba(52,96,250,1)"
-  active-color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%"
-  @change="onChange">
-</nut-range>
+<template>
+  <nut-cell :style="{padding: '40px 18px'}">
+    <nut-range
+      v-model="value"
+      inactive-color="rgba(163,184,255,1)"
+      button-color="rgba(52,96,250,1)"
+      active-color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%"
+      @change="onChange">
+    </nut-range>
+  </nut-cell>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default {
+  setup() {
+    const value = ref(40);
+    const onChange = (value) => Toast.text('当前值：' + value);
+    return {
+      value,
+      onChange,
+    };
+  },
+};
+</script>
 ```
+:::
 
 ### 自定义按钮
 ```html
-<nut-range v-model="value" @change="onChange">
-  <template #button>
-    <div class="custom-button">{{ value }}</div>
-  </template>
-</nut-range>
 
+
+
+```
+:::demo
+```html
 <style>
   .custom-button {
     width: 26px;
@@ -113,8 +249,32 @@ export default {
     border-radius: 100px;
   }
 </style>
-```
+<template>
+  <nut-cell :style="{padding: '40px 18px'}">
+   <nut-range v-model="value" @change="onChange">
+      <template #button>
+        <div class="custom-button">{{ value }}</div>
+      </template>
+    </nut-range>
+  </nut-cell>
+</template>
 
+<script lang="ts">
+import { ref } from 'vue';
+import { Toast } from '@nutui/nutui';
+export default {
+  setup() {
+    const value = ref(60);
+    const onChange = (value) => Toast.text('当前值：' + value);
+    return {
+      value,
+      onChange,
+    };
+  },
+};
+</script>
+```
+:::
   ## API
   
   ### Props