Merge branch 'next' of https://github.com/ailululu/nutui into next (#969)

增加price、input在线文档 #969

src/packages/__VUE/input/doc.md

@@ -24,86 +24,158 @@ app.use(Icon);
 
 双向绑定
 
+:::demo
+
 ```html
-<nut-input
-      v-model="state.val1"
-      @change="change"
-      @focus="focus"
-      @blur="blur"
-      label="文本"
-    />
-<nut-input placeholder="请输入文本"
-      @change="change"
-      v-model="state.val0"
-      :require-show="true"
-      label="文本"
-      @clear="clear"
-    />
+<template>
+  <nut-input
+        v-model="state.val1"
+        @change="change"
+        @focus="focus"
+        @blur="blur"
+        label="文本"
+      />
+  <nut-input placeholder="请输入文本"
+        @change="change"
+        v-model="state.val0"
+        :require-show="true"
+        label="文本"
+        @clear="clear"
+      />
+</template>
+<script lang="ts">
+  import { reactive } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        val0: '',
+        val1: '初始数据'
+      });
+      setTimeout(function() {
+        state.val1 = '异步数据';
+      }, 2000);
+      const change = (value: string | number,event:Event) => {
+        console.log('change: ', value,event);
+      };
+      const focus = (value: string | number,event:Event) => {
+        console.log('focus:', value,event);
+      };
+      const blur = (value: string | number,event:Event) => {
+        console.log('blur:', value,event);
+      };
+      const clear = (value: string | number) => {
+        console.log('clear:', value);
+      };
+
+      return {
+        state,
+        change,
+        blur,
+        clear,
+        focus
+      };
+    }
+  }
+</script>
 ```
 
+:::
+
 ### 禁用和只读
 
+:::demo
 
 ```html
-<nut-input v-model="state.val2" @change="change"  disabled="true" label="标题："/>
-<nut-input v-model="state.val3" @change="change" readonly="true"  label="标题："/>
+<template>
+  <nut-input v-model="state.val2" @change="change"  disabled="true" label="标题："/>
+  <nut-input v-model="state.val3" @change="change" readonly="true"  label="标题："/>
+</template>
+<script lang="ts">
+  import { reactive } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        val2: '禁止修改',
+        val3: 'readonly 只读'
+      });
+      const change = (value: string | number,event:Event) => {
+        console.log('change: ', value,event);
+      };
+
+      return {
+        state,
+        change
+      };
+    }
+  }
+</script>
 ```
 
+:::
+
 ### 限制输入长度
 
+:::demo
+
 ```html
- <nut-input v-model="state.val4" @change="change" max-length="7" label="限制7" />
+<template>
+  <nut-input v-model="state.val4" @change="change" max-length="7" label="限制7" />
+</template>
+<script lang="ts">
+  import { reactive } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        val4: ''
+      });
+      const change = (value: string | number,event:Event) => {
+        console.log('change: ', value,event);
+      };
+
+      return {
+        state,
+        change
+      };
+    }
+  }
+</script>
 ```
+
+:::
 ### 其他类型
 
-```html
-<nut-input v-model="state.val0" @change="change" type="password" label="密码"/>
-<nut-input v-model="state.val5" @change="change" type="number" label="整数" />
-<nut-input v-model="state.val6" @change="change" type="digit" placeholder="支持小数点的输入" label="数字"/>
-```
+:::demo
 
-### 代码
 ```html
-import { reactive } from 'vue';
-export default {
-  setup() {
-    const state = reactive({
-      val0: '',
-      val1: '初始数据',
-      val2: '禁止修改',
-      val3: 'readonly 只读',
-      val4: '',
-      val5: '',
-      val6: '',
-      val7: '',
-      val8: '文案'
-    });
-    setTimeout(function() {
-      state.val1 = '异步数据';
-    }, 2000);
-    const change = (value: string | number,event:Event) => {
-      console.log('change: ', value,event);
-    };
-    const focus = (value: string | number,event:Event) => {
-      console.log('focus:', value,event);
-    };
-    const blur = (value: string | number,event:Event) => {
-      console.log('blur:', value,event);
-    };
-    const clear = (value: string | number) => {
-      console.log('clear:', value);
-    };
-
-    return {
-      state,
-      change,
-      blur,
-      clear,
-      focus
-    };
+<template>
+  <nut-input v-model="state.val0" @change="change" type="password" label="密码"/>
+  <nut-input v-model="state.val5" @change="change" type="number" label="整数" />
+  <nut-input v-model="state.val6" @change="change" type="digit" placeholder="支持小数点的输入" label="数字"/>
+</template>
+<script lang="ts">
+  import { reactive } from 'vue';
+  export default {
+    setup() {
+      const state = reactive({
+        val0: '',
+        val5: '',
+        val6: ''
+      });
+      const change = (value: string | number,event:Event) => {
+        console.log('change: ', value,event);
+      };
+
+      return {
+        state,
+        change
+      };
+    }
   }
-}
+</script>
 ```
+
+:::
+
 ### Prop
 
 | 参数         | 说明                                   | 类型           | 默认值  |

src/packages/__VUE/price/doc.md

@@ -6,7 +6,7 @@
 
 ### 安装
 
-``` javascript
+```javascript
 import { createApp } from 'vue';
 //vue
 import { Price } from '@nutui/nutui';
@@ -21,48 +21,90 @@ app.use(Price);
 
 ### 基本用法 small normal large
 
+:::demo
+
 ``` html
-<nut-price :price="0" size="small" :need-symbol="false" :thousands="true" />
-<nut-price :price="0" size="normal" :need-symbol="false" :thousands="true" />
-<nut-price :price="0" size="large" :need-symbol="false" :thousands="true" />
+<template>
+    <nut-price :price="0" size="small" :need-symbol="false" :thousands="true" />
+    <nut-price :price="0" size="normal" :need-symbol="false" :thousands="true" />
+    <nut-price :price="0" size="large" :need-symbol="false" :thousands="true" />
+</template>
 ```
 
+:::
+
 ### 不保留小数
+
+:::demo
+
 ``` html
-<nut-price :price="8888" decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" />
+<template>
+    <nut-price :price="8888" decimal-digits="0" size="normal" :need-symbol="true" :thousands="true" />
+</template>
 ```
+
+:::
+
 ### 调整 symbol 符号位置
+
+:::demo
+
 ``` html
-<nut-price :price="8888.01" position="after" symbol="元" size="normal" :need-symbol="true" :thousands="true" />
+<template>
+    <nut-price :price="8888.01" position="after" symbol="元" size="normal" :need-symbol="true" :thousands="true" />
+</template>
 ```
 
+:::
+
 ### 有人民币符号，无千位分隔
 
+:::demo
+
 ``` html
-<nut-price :price="10010.01" :need-symbol="true" :thousands="false" />
-```
 
+<template>
+    <nut-price :price="10010.01" :need-symbol="true" :thousands="false" />
+</template>
+```
+:::
 ### 带人民币符号，有千位分隔，保留小数点后三位
 
+:::demo
+
 ``` html
-<nut-price :price="15213.1221" :decimal-digits="3" :need-symbol="true" :thousands="true" />
+<template>
+    <nut-price :price="15213.1221" :decimal-digits="3" :need-symbol="true" :thousands="true" />
+</template>
 ```
+
+:::
 ### 异步随机变更
 
+:::demo
+
 ``` html
-<nut-price :price="price" :decimal-digits="3" :need-symbol="true" :thousands="true" />
-```
-``` javascript
-setup() {
-    const price = ref(0);
-    setInterval(() => {
-        price.value = Math.random()*10000000;
-    }, 1000);
-    return {
-        price
-    };
-}
+<template>
+    <nut-price :price="price" :decimal-digits="3" :need-symbol="true" :thousands="true" />
+</template>
+
+
+<script lang="ts">
+    import { ref } from 'vue';
+    export default {
+        setup() {
+            const price = ref(0);
+            setInterval(() => {
+                price.value = Math.random()*10000000;
+            }, 1000);
+            return {
+                price
+            };
+        }
+    }
+</script>
 ```
+:::
 
 ### Prop