Browse Source

docs: edit

Drjingfubo 3 years ago
parent
commit
ee2d948953

+ 5 - 26
src/packages/__VUE/numberkeyboard/demo.vue

@@ -1,14 +1,9 @@
 <template>
 <template>
   <div class="demo">
   <div class="demo">
-    <nut-cell :isLink="true" @touchstart.stop="showKeyBoard(1)" :showIcon="true" :title="translate('basic')"></nut-cell>
+    <nut-cell :isLink="true" @touchstart.stop="showKeyBoard(1)" :title="translate('basic')"></nut-cell>
     <nut-number-keyboard v-model:visible="visible1" @blur="onBlur(1)" @input="input" @delete="onDelete">
     <nut-number-keyboard v-model:visible="visible1" @blur="onBlur(1)" @input="input" @delete="onDelete">
     </nut-number-keyboard>
     </nut-number-keyboard>
-    <nut-cell
-      :isLink="true"
-      @touchstart.stop="showKeyBoard(2)"
-      :showIcon="true"
-      :title="translate('sidebar')"
-    ></nut-cell>
+    <nut-cell :isLink="true" @touchstart.stop="showKeyBoard(2)" :title="translate('sidebar')"></nut-cell>
     <nut-number-keyboard
     <nut-number-keyboard
       type="rightColumn"
       type="rightColumn"
       v-model:visible="visible2"
       v-model:visible="visible2"
@@ -19,12 +14,7 @@
       @blur="onBlur(2)"
       @blur="onBlur(2)"
     >
     >
     </nut-number-keyboard>
     </nut-number-keyboard>
-    <nut-cell
-      :isLink="true"
-      @touchstart.stop="showKeyBoard(3)"
-      :showIcon="true"
-      :title="translate('randomKeyOrder')"
-    ></nut-cell>
+    <nut-cell :isLink="true" @touchstart.stop="showKeyBoard(3)" :title="translate('randomKeyOrder')"></nut-cell>
     <nut-number-keyboard
     <nut-number-keyboard
       type="rightColumn"
       type="rightColumn"
       v-model:visible="visible3"
       v-model:visible="visible3"
@@ -36,12 +26,7 @@
     >
     >
     </nut-number-keyboard>
     </nut-number-keyboard>
 
 
-    <nut-cell
-      :isLink="true"
-      @touchstart.stop="showKeyBoard(4)"
-      :showIcon="true"
-      :title="translate('withTitle')"
-    ></nut-cell>
+    <nut-cell :isLink="true" @touchstart.stop="showKeyBoard(4)" :title="translate('withTitle')"></nut-cell>
     <nut-number-keyboard
     <nut-number-keyboard
       :title="translate('title')"
       :title="translate('title')"
       v-model:visible="visible4"
       v-model:visible="visible4"
@@ -52,12 +37,7 @@
     >
     >
     </nut-number-keyboard>
     </nut-number-keyboard>
 
 
-    <nut-cell
-      :isLink="true"
-      @touchstart.stop="showKeyBoard(6)"
-      :showIcon="true"
-      :title="translate('idNumberKeyboard')"
-    ></nut-cell>
+    <nut-cell :isLink="true" @touchstart.stop="showKeyBoard(6)" :title="translate('idNumberKeyboard')"></nut-cell>
     <nut-number-keyboard
     <nut-number-keyboard
       v-model:visible="visible6"
       v-model:visible="visible6"
       :custom-key="customKey3"
       :custom-key="customKey3"
@@ -71,7 +51,6 @@
       desc-text-align="left"
       desc-text-align="left"
       @touchstart.stop="showKeyBoard(5)"
       @touchstart.stop="showKeyBoard(5)"
       :desc="value"
       :desc="value"
-      :showIcon="true"
       :title="translate('bindValue')"
       :title="translate('bindValue')"
     ></nut-cell>
     ></nut-cell>
     <nut-number-keyboard v-model:visible="visible5" v-model="value" maxlength="6" @blur="onBlur(5)" @close="close(5)">
     <nut-number-keyboard v-model:visible="visible5" v-model="value" maxlength="6" @blur="onBlur(5)" @close="close(5)">

+ 5 - 6
src/packages/__VUE/numberkeyboard/doc.en-US.md

@@ -20,7 +20,7 @@ For online debugging, please change the browser to mobile mode
 :::demo
 :::demo
 ```html
 ```html
 <template>
 <template>
-    <nut-cell :isLink="true" @click="showKeyBoard" :showIcon="true" title="Default Keyboard"></nut-cell>
+    <nut-cell :isLink="true" @click="showKeyBoard"  title="Default Keyboard"></nut-cell>
     <nut-number-keyboard v-model:visible="visible" @input="input" @delete="onDelete" @close="close"> </nut-number-keyboard>
     <nut-number-keyboard v-model:visible="visible" @input="input" @delete="onDelete" @close="close"> </nut-number-keyboard>
 </template>
 </template>
 <script>
 <script>
@@ -60,7 +60,7 @@ export default{
 :::demo
 :::demo
 ```html
 ```html
 <template>
 <template>
-    <nut-cell :isLink="true" @click="showKeyBoard" :showIcon="true" title="Keyboard With Sidebar"></nut-cell>
+    <nut-cell :isLink="true" @click="showKeyBoard"  title="Keyboard With Sidebar"></nut-cell>
      <nut-number-keyboard
      <nut-number-keyboard
       type="rightColumn"
       type="rightColumn"
       v-model:visible="visible"
       v-model:visible="visible"
@@ -107,7 +107,7 @@ export default{
 :::demo
 :::demo
 ```html
 ```html
 <template>
 <template>
-    <nut-cell :isLink="true" @click="showKeyBoard" :showIcon="true" title="Random Key Order"></nut-cell>
+    <nut-cell :isLink="true" @click="showKeyBoard"  title="Random Key Order"></nut-cell>
     <nut-number-keyboard
     <nut-number-keyboard
       type="rightColumn"
       type="rightColumn"
       v-model:visible="visible"
       v-model:visible="visible"
@@ -152,7 +152,7 @@ export default{
 :::demo
 :::demo
 ```html
 ```html
 <template>
 <template>
-     <nut-cell :isLink="true" @click="showKeyBoard(4)" :showIcon="true" title="Show Keyboard With Title"></nut-cell>
+     <nut-cell :isLink="true" @click="showKeyBoard(4)"  title="Show Keyboard With Title"></nut-cell>
     <nut-number-keyboard
     <nut-number-keyboard
       title="title"
       title="title"
       v-model:visible="visible"
       v-model:visible="visible"
@@ -196,7 +196,7 @@ export default{
 :::demo
 :::demo
 ```html
 ```html
 <template>
 <template>
-     <nut-cell :isLink="true" @click="showKeyBoard(4)" :showIcon="true" title="IdNumber Keyboard"></nut-cell>
+     <nut-cell :isLink="true" @click="showKeyBoard(4)"  title="IdNumber Keyboard"></nut-cell>
     <nut-number-keyboard
     <nut-number-keyboard
       v-model:visible="visible"
       v-model:visible="visible"
       :custom-key="customKey"
       :custom-key="customKey"
@@ -245,7 +245,6 @@ export default{
       desc-text-align="left"
       desc-text-align="left"
       @click="showKeyBoard"
       @click="showKeyBoard"
       :desc="value"
       :desc="value"
-      :showIcon="true"
       title="Bind Value"
       title="Bind Value"
     ></nut-cell>
     ></nut-cell>
      <nut-number-keyboard 
      <nut-number-keyboard 

+ 43 - 0
src/packages/__VUE/progress/doc.en-US.md

@@ -135,6 +135,49 @@ app.use(Progress);
 </template>
 </template>
 ```
 ```
 :::
 :::
+
+### Dynamic Change
+:::demo
+```html
+<template>
+   <div>
+    <nut-cell>
+      <nut-progress :percentage="val" />
+    </nut-cell>
+    <nut-cell>
+      <nut-button type="default" @click="setReduceVal">reduce</nut-button>
+      <nut-button type="primary" @click="setAddVal">add</nut-button>
+    </nut-cell>
+    </div>
+</template>
+<script lang="ts">
+  import { ref } from 'vue';
+  export default{
+    setup() {
+    const val = ref(0);
+    const setAddVal = () => {
+      if (val.value >= 100) {
+        return false;
+      }
+      val.value += 10;
+    };
+    const setReduceVal = () => {
+      if (val.value <= 0) {
+        return false;
+      }
+      val.value -= 10;
+    };
+    return {
+      val,
+      setAddVal,
+      setReduceVal,
+    };
+  }
+
+  }
+</script>
+```
+:::
 ## API
 ## API
 ### Props
 ### Props
 
 

+ 42 - 0
src/packages/__VUE/progress/doc.md

@@ -130,6 +130,48 @@ app.use(Progress);
 </script>
 </script>
 ```
 ```
 :::
 :::
+### 动态改变
+:::demo
+```html
+<template>
+   <div>
+    <nut-cell>
+      <nut-progress :percentage="val" />
+    </nut-cell>
+    <nut-cell>
+      <nut-button type="default" @click="setReduceVal">减少</nut-button>
+      <nut-button type="primary" @click="setAddVal">增加</nut-button>
+    </nut-cell>
+    </div>
+</template>
+<script lang="ts">
+  import { ref } from 'vue';
+  export default{
+    setup() {
+    const val = ref(0);
+    const setAddVal = () => {
+      if (val.value >= 100) {
+        return false;
+      }
+      val.value += 10;
+    };
+    const setReduceVal = () => {
+      if (val.value <= 0) {
+        return false;
+      }
+      val.value -= 10;
+    };
+    return {
+      val,
+      setAddVal,
+      setReduceVal,
+    };
+  }
+
+  }
+</script>
+```
+:::
 ## API
 ## API
 ### Props
 ### Props
 
 

+ 49 - 0
src/packages/__VUE/progress/doc.taro.md

@@ -121,6 +121,55 @@ app.use(Progress);
       </nut-cell>
       </nut-cell>
     </div>
     </div>
 </template>
 </template>
+<script lang="ts">
+  import {Issue } from '@nutui/icons-vue-taro';
+  export default{
+    components: {Issue},
+  }
+</script>
+```
+:::
+
+### 动态改变
+:::demo
+```html
+<template>
+   <div>
+    <nut-cell>
+      <nut-progress :percentage="val" />
+    </nut-cell>
+    <nut-cell>
+      <nut-button type="default" @click="setReduceVal">减少</nut-button>
+      <nut-button type="primary" @click="setAddVal">增加</nut-button>
+    </nut-cell>
+    </div>
+</template>
+<script lang="ts">
+  import { ref } from 'vue';
+  export default{
+    setup() {
+    const val = ref(0);
+    const setAddVal = () => {
+      if (val.value >= 100) {
+        return false;
+      }
+      val.value += 10;
+    };
+    const setReduceVal = () => {
+      if (val.value <= 0) {
+        return false;
+      }
+      val.value -= 10;
+    };
+    return {
+      val,
+      setAddVal,
+      setReduceVal,
+    };
+  }
+
+  }
+</script>
 ```
 ```
 :::
 :::
 ## API
 ## API

+ 6 - 6
src/sites/mobile-taro/vue/src/dentry/pages/numberkeyboard/index.vue

@@ -1,10 +1,10 @@
 <template>
 <template>
   <div class="demo" :class="{ web: env === 'WEB' }">
   <div class="demo" :class="{ web: env === 'WEB' }">
     <Header v-if="env === 'WEB'" />
     <Header v-if="env === 'WEB'" />
-    <nut-cell :isLink="true" @click="showKeyBoard(1)" :showIcon="true" title="默认键盘"></nut-cell>
+    <nut-cell :isLink="true" @click="showKeyBoard(1)" title="默认键盘"></nut-cell>
     <nut-number-keyboard overlay v-model:visible="visible1" @input="input" @delete="onDelete" @close="close(1)">
     <nut-number-keyboard overlay v-model:visible="visible1" @input="input" @delete="onDelete" @close="close(1)">
     </nut-number-keyboard>
     </nut-number-keyboard>
-    <nut-cell :isLink="true" @click="showKeyBoard(2)" :showIcon="true" title="带右侧栏键盘"></nut-cell>
+    <nut-cell :isLink="true" @click="showKeyBoard(2)" title="带右侧栏键盘"></nut-cell>
     <nut-number-keyboard
     <nut-number-keyboard
       type="rightColumn"
       type="rightColumn"
       overlay
       overlay
@@ -14,7 +14,7 @@
       @close="close(2)"
       @close="close(2)"
     >
     >
     </nut-number-keyboard>
     </nut-number-keyboard>
-    <nut-cell :isLink="true" @click="showKeyBoard(3)" :showIcon="true" title="随机数键盘"></nut-cell>
+    <nut-cell :isLink="true" @click="showKeyBoard(3)" title="随机数键盘"></nut-cell>
     <nut-number-keyboard
     <nut-number-keyboard
       type="rightColumn"
       type="rightColumn"
       overlay
       overlay
@@ -26,7 +26,7 @@
     >
     >
     </nut-number-keyboard>
     </nut-number-keyboard>
 
 
-    <nut-cell :isLink="true" @click="showKeyBoard(4)" :showIcon="true" title="带标题栏键盘"></nut-cell>
+    <nut-cell :isLink="true" @click="showKeyBoard(4)" title="带标题栏键盘"></nut-cell>
     <nut-number-keyboard
     <nut-number-keyboard
       title="默认键盘"
       title="默认键盘"
       overlay
       overlay
@@ -36,10 +36,10 @@
       @close="close(4)"
       @close="close(4)"
     >
     >
     </nut-number-keyboard>
     </nut-number-keyboard>
-    <nut-cell :isLink="true" @click="showKeyBoard(6)" :showIcon="true" title="身份证键盘"></nut-cell>
+    <nut-cell :isLink="true" @click="showKeyBoard(6)" title="身份证键盘"></nut-cell>
     <nut-number-keyboard overlay v-model:visible="visible6" :custom-key="customKey3" @input="input" @close="close(6)">
     <nut-number-keyboard overlay v-model:visible="visible6" :custom-key="customKey3" @input="input" @close="close(6)">
     </nut-number-keyboard>
     </nut-number-keyboard>
-    <nut-cell :isLink="true" :desc="value" @click="showKeyBoard(5)" :showIcon="true" title="双向绑定"></nut-cell>
+    <nut-cell :isLink="true" :desc="value" @click="showKeyBoard(5)" title="双向绑定"></nut-cell>
     <nut-number-keyboard overlay v-model:visible="visible5" v-model="value" maxlength="6" @close="close(5)">
     <nut-number-keyboard overlay v-model:visible="visible5" v-model="value" maxlength="6" @close="close(5)">
     </nut-number-keyboard>
     </nut-number-keyboard>
   </div>
   </div>