@opentiny/vue-docs 2.2.7 → 2.2.8

package/demos/pc/app/drop-times/basic-usage-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 270px">
+  <div class="drop-time-demo-basic">
     <tiny-drop-times v-model="value" placeholder="请选择" @change="change"></tiny-drop-times>
     <p>当前选中值：{{ value }}</p>
   </div>
@@ -15,3 +15,9 @@ function change(value) {
   Modal.message({ message: 'change 事件，当前值为 ' + value })
 }
 </script>
+
+<style scoped>
+.drop-time-demo-basic {
+  width: 270px;
+}
+</style>

package/demos/pc/app/drop-times/basic-usage.vue

@@ -1,11 +1,11 @@
 <template>
-  <div style="width: 270px">
+  <div class="drop-time-demo-basic">
     <tiny-drop-times v-model="value" placeholder="请选择" @change="change"></tiny-drop-times>
     <p>当前选中值：{{ value }}</p>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { DropTimes, Modal } from '@opentiny/vue'
 
 export default {
@@ -24,3 +24,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.drop-time-demo-basic {
+  width: 270px;
+}
+</style>

package/demos/pc/app/drop-times/size-composition-api.vue

@@ -1,13 +1,23 @@
 <template>
-  <div style="width: 270px">
-    <tiny-drop-times size="medium" v-model="value" placeholder="请选择"></tiny-drop-times>
-    <p>当前选中值：{{ value }}</p>
+  <div class="drop-time-demo-size">
+    <tiny-drop-times size="medium" v-model="value" placeholder="尺寸：medium"></tiny-drop-times>
+    <tiny-drop-times size="small" v-model="value" placeholder="尺寸：small"></tiny-drop-times>
+    <tiny-drop-times size="mini" v-model="value" placeholder="尺寸：mini"></tiny-drop-times>
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { DropTimes as TinyDropTimes } from '@opentiny/vue'
 
 const value = ref('')
 </script>
+
+<style lang="less" scoped>
+.drop-time-demo-size {
+  width: 270px;
+  & > * {
+    margin-top: 12px;
+  }
+}
+</style>

package/demos/pc/app/drop-times/size.vue

@@ -1,11 +1,12 @@
 <template>
-  <div style="width: 270px">
-    <tiny-drop-times size="medium" v-model="value" placeholder="请选择"></tiny-drop-times>
-    <p>当前选中值：{{ value }}</p>
+  <div class="drop-time-demo-size">
+    <tiny-drop-times size="medium" v-model="value" placeholder="尺寸：medium"></tiny-drop-times>
+    <tiny-drop-times size="small" v-model="value" placeholder="尺寸：small"></tiny-drop-times>
+    <tiny-drop-times size="mini" v-model="value" placeholder="尺寸：mini"></tiny-drop-times>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { DropTimes } from '@opentiny/vue'
 
 export default {
@@ -19,3 +20,12 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.drop-time-demo-size {
+  width: 270px;
+  & > * {
+    margin-top: 12px;
+  }
+}
+</style>

package/demos/pc/app/drop-times/start-end-step-composition-api.vue

@@ -1,23 +1,18 @@
 <template>
-  <div style="width: 270px">
-    <tiny-drop-times
-      v-model="value"
-      placeholder="请选择"
-      :end="720"
-      :start="60"
-      :step="5"
-      @change="change"
-    ></tiny-drop-times>
+  <div class="drop-time-demo-sse">
+    <tiny-drop-times v-model="value" placeholder="请选择" :start="60" :step="5" :end="720"></tiny-drop-times>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { DropTimes as TinyDropTimes, Modal } from '@opentiny/vue'
+import { DropTimes as TinyDropTimes } from '@opentiny/vue'
 
 const value = ref('')
+</script>
 
-function change(value) {
-  Modal.message({ message: 'change 事件，当前值为 ' + value })
+<style scoped>
+.drop-time-demo-sse {
+  width: 270px;
 }
-</script>
+</style>

package/demos/pc/app/drop-times/start-end-step.vue

@@ -1,18 +1,11 @@
 <template>
-  <div style="width: 270px">
-    <tiny-drop-times
-      v-model="value"
-      placeholder="请选择"
-      :end="720"
-      :start="60"
-      :step="5"
-      @change="change"
-    ></tiny-drop-times>
+  <div class="drop-time-demo-sse">
+    <tiny-drop-times v-model="value" placeholder="请选择" :start="60" :step="5" :end="720"></tiny-drop-times>
   </div>
 </template>
 
-<script lang="jsx">
-import { DropTimes, Modal } from '@opentiny/vue'
+<script>
+import { DropTimes } from '@opentiny/vue'
 
 export default {
   components: {
@@ -22,11 +15,12 @@ export default {
     return {
       value: ''
     }
-  },
-  methods: {
-    change(value) {
-      Modal.message({ message: 'change 事件，当前值为 ' + value })
-    }
   }
 }
 </script>
+
+<style scoped>
+.drop-time-demo-sse {
+  width: 270px;
+}
+</style>

package/demos/pc/app/drop-times/webdoc/drop-times.js

@@ -21,7 +21,7 @@ export default {
     },
     {
       'demoId': 'size',
-      'name': { 'zh-CN': '设置组件大小的size属性', 'en-US': 'Set the size attribute of the component size' },
+      'name': { 'zh-CN': '尺寸', 'en-US': 'Set the size attribute of the component size' },
       'desc': {
         'zh-CN': '<p>可设置为：medium，small，mini</p>\n',
         'en-US': '<p>The value can be medium, small, or mini</p>\n'
@@ -36,17 +36,17 @@ export default {
       'props': [
         {
           'name': 'modelValue / v-model',
-          'type': '—',
-          'defaultValue': '该属性的默认值为 {}',
+          'type': 'string',
+          'defaultValue': '--',
           'desc': { 'zh-CN': '绑定值', 'en-US': 'Set the component size. The value can be medium, small, or mini.' },
-          'demoId': 'start-end-step'
+          'demoId': 'basic-usage'
         },
         {
           'name': 'size',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
-            'zh-CN': '设置组件大小，可以设置为：medium，small，mini',
+            'zh-CN': '输入框尺寸',
             'en-US': 'Class name added to the DropTimes drop-down list box'
           },
           'demoId': 'size'
@@ -54,7 +54,7 @@ export default {
         {
           'name': 'popper-class',
           'type': 'string',
-          'defaultValue': '',
+          'defaultValue': '--',
           'desc': {
             'zh-CN': '为 DropTimes 下拉弹框添加的 class 类名',
             'en-US':
@@ -65,7 +65,7 @@ export default {
         {
           'name': 'popper-append-to-body',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 true',
+          'defaultValue': ' true',
           'desc': {
             'zh-CN':
               '是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false (可参考 select 组件)',
@@ -81,14 +81,14 @@ export default {
             'zh-CN': '设置输入框内的提示占位文本',
             'en-US': 'Set the prompt placeholder text in the text box.'
           },
-          'demoId': 'start-end-step'
+          'demoId': 'basic-usage'
         },
         {
           'name': 'end',
           'type': 'number',
-          'defaultValue': '该属性的默认值为 1440',
+          'defaultValue': ' 1440',
           'desc': {
-            'zh-CN': '结束时间，以分钟计算，默认值为 1440。',
+            'zh-CN': '结束时间，以分钟计算',
             'en-US': 'End time, in minutes. The default value is 1440.'
           },
           'demoId': 'start-end-step'
@@ -96,9 +96,9 @@ export default {
         {
           'name': 'start',
           'type': 'number',
-          'defaultValue': '该属性的默认值为 0',
+          'defaultValue': ' 0',
           'desc': {
-            'zh-CN': '开始时间，以分钟计算，默认值为 0。',
+            'zh-CN': '开始时间，以分钟计算',
             'en-US': 'Start time, in minutes. The default value is 0.'
           },
           'demoId': 'start-end-step'
@@ -106,24 +106,34 @@ export default {
         {
           'name': 'step',
           'type': 'number',
-          'defaultValue': '该属性的默认值为 15',
+          'defaultValue': ' 15',
           'desc': {
-            'zh-CN': '间隔时间，以分钟计算，默认值为 15。',
+            'zh-CN': '间隔时间，以分钟计算',
             'en-US': 'Interval, in minutes. The default value is 15.'
           },
           'demoId': 'start-end-step'
+        },
+        {
+          'name': 'disabled',
+          'type': 'boolean',
+          'defaultValue': ' false',
+          'desc': {
+            'zh-CN': '禁用状态',
+            'en-US': 'Disabled state'
+          },
+          'demoId': ''
         }
       ],
       'events': [
         {
           'name': 'change',
-          'type': '',
+          'type': '(value: string) => void',
           'defaultValue': '',
           'desc': {
             'zh-CN': '下拉切换当前时间后触发该事件',
             'en-US': 'This event is triggered after the current time is switched by the pull-down button.'
           },
-          'demoId': 'start-end-step'
+          'demoId': 'basic-usage'
         }
       ],
       'slots': []

package/demos/pc/app/time-select/basic-usage-composition-api.vue

@@ -1,10 +1,18 @@
 <template>
-  <tiny-time-select v-model="value" placeholder="选择时间"></tiny-time-select>
+  <div class="time-select-demo-basic">
+    <tiny-time-select v-model="value" placeholder="选择时间"></tiny-time-select>
+  </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
 
 const value = ref('')
 </script>
+
+<style scoped>
+.time-select-demo-basic {
+  width: 270px;
+}
+</style>

package/demos/pc/app/time-select/basic-usage.vue

@@ -1,8 +1,10 @@
 <template>
-  <tiny-time-select v-model="value" placeholder="选择时间"></tiny-time-select>
+  <div class="time-select-demo-basic">
+    <tiny-time-select v-model="value" placeholder="选择时间"></tiny-time-select>
+  </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeSelect } from '@opentiny/vue'
 
 export default {
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.time-select-demo-basic {
+  width: 270px;
+}
+</style>

package/demos/pc/app/time-select/clear-icon-composition-api.vue

@@ -1,15 +1,17 @@
 <template>
-  <tiny-time-select
-    v-model="value"
-    popper-class="myselect"
-    placeholder="选择时间"
-    :clear-icon="IconYes"
-    clearable
-    name="name"
-  ></tiny-time-select>
+  <div class="time-select-demo-icon">
+    <tiny-time-select
+      v-model="value"
+      popper-class="myselect"
+      placeholder="选择时间"
+      :clear-icon="IconYes"
+      clearable
+      name="name"
+    ></tiny-time-select>
+  </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
 import { iconYes } from '@opentiny/vue-icon'
@@ -17,3 +19,9 @@ import { iconYes } from '@opentiny/vue-icon'
 const IconYes = iconYes()
 const value = ref('')
 </script>
+
+<style scoped>
+.time-select-demo-icon {
+  width: 270px;
+}
+</style>

package/demos/pc/app/time-select/clear-icon.vue

@@ -1,15 +1,17 @@
 <template>
-  <tiny-time-select
-    v-model="value"
-    popper-class="myselect"
-    placeholder="选择时间"
-    :clear-icon="IconYes"
-    clearable
-    name="name"
-  ></tiny-time-select>
+  <div class="time-select-demo-icon">
+    <tiny-time-select
+      v-model="value"
+      popper-class="myselect"
+      placeholder="选择时间"
+      :clear-icon="IconYes"
+      clearable
+      name="name"
+    ></tiny-time-select>
+  </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeSelect } from '@opentiny/vue'
 import { IconYes } from '@opentiny/vue-icon'
 
@@ -25,3 +27,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.time-select-demo-icon {
+  width: 270px;
+}
+</style>

package/demos/pc/app/time-select/default-value-composition-api.vue

@@ -1,11 +1,19 @@
 <template>
-  <tiny-time-select v-model="value" placeholder="选择时间" :default-value="defaultValue"></tiny-time-select>
+  <div class="time-select-demo-default">
+    <tiny-time-select v-model="value" placeholder="选择时间" :default-value="defaultValue"></tiny-time-select>
+  </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
 
 const value = ref('')
 const defaultValue = ref('10:00')
 </script>
+
+<style scoped>
+.time-select-demo-default {
+  width: 270px;
+}
+</style>

package/demos/pc/app/time-select/default-value.vue

@@ -1,8 +1,10 @@
 <template>
-  <tiny-time-select v-model="value" placeholder="选择时间" :default-value="defaultValue"></tiny-time-select>
+  <div class="time-select-demo-default">
+    <tiny-time-select v-model="value" placeholder="选择时间" :default-value="defaultValue"></tiny-time-select>
+  </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeSelect } from '@opentiny/vue'
 
 export default {
@@ -17,3 +19,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.time-select-demo-default {
+  width: 270px;
+}
+</style>

package/demos/pc/app/time-select/disabled-composition-api.vue

@@ -1,10 +1,18 @@
 <template>
-  <tiny-time-select v-model="value" placeholder="选择时间" disabled></tiny-time-select>
+  <div class="time-select-demo-disabled">
+    <tiny-time-select v-model="value" placeholder="选择时间" disabled></tiny-time-select>
+  </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
 
 const value = ref('')
 </script>
+
+<style scoped>
+.time-select-demo-disabled {
+  width: 270px;
+}
+</style>

package/demos/pc/app/time-select/disabled.vue

@@ -1,8 +1,10 @@
 <template>
-  <tiny-time-select v-model="value" placeholder="选择时间" disabled></tiny-time-select>
+  <div class="time-select-demo-disabled">
+    <tiny-time-select v-model="value" placeholder="选择时间" disabled></tiny-time-select>
+  </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeSelect } from '@opentiny/vue'
 
 export default {
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.time-select-demo-disabled {
+  width: 270px;
+}
+</style>

package/demos/pc/app/time-select/editable-composition-api.vue

@@ -1,10 +1,18 @@
 <template>
-  <tiny-time-select v-model="value" placeholder="选择时间" :editable="false"></tiny-time-select>
+  <div class="time-select-demo-editable">
+    <tiny-time-select v-model="value" placeholder="选择时间" :editable="false"></tiny-time-select>
+  </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
 
 const value = ref('')
 </script>
+
+<style scoped>
+.time-select-demo-editable {
+  width: 270px;
+}
+</style>

package/demos/pc/app/time-select/editable.vue

@@ -1,8 +1,10 @@
 <template>
-  <tiny-time-select v-model="value" placeholder="选择时间" :editable="false"></tiny-time-select>
+  <div class="time-select-demo-editable">
+    <tiny-time-select v-model="value" placeholder="选择时间" :editable="false"></tiny-time-select>
+  </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeSelect } from '@opentiny/vue'
 
 export default {
@@ -16,3 +18,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.time-select-demo-editable {
+  width: 270px;
+}
+</style>

package/demos/pc/app/time-select/event-blur-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="time-select-demo-event">
     <tiny-time-select
       v-model="value1"
       @blur="bulr"
@@ -10,7 +10,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TimeSelect as TinyTimeSelect, Modal } from '@opentiny/vue'
 
@@ -28,3 +28,9 @@ function focus() {
   Modal.message('focus事件')
 }
 </script>
+
+<style scoped>
+.time-select-demo-event {
+  width: 270px;
+}
+</style>

package/demos/pc/app/time-select/event-blur.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="time-select-demo-event">
     <tiny-time-select
       v-model="value1"
       @blur="bulr"
@@ -10,7 +10,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeSelect, Modal } from '@opentiny/vue'
 
 export default {
@@ -26,8 +26,8 @@ export default {
     bulr() {
       Modal.message('blur事件')
     },
-    change() {
-      Modal.message('change事件')
+    change(value) {
+      Modal.message(value)
     },
     focus() {
       Modal.message('focus事件')
@@ -35,3 +35,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.time-select-demo-event {
+  width: 270px;
+}
+</style>

package/demos/pc/app/time-select/focus-composition-api.vue

@@ -1,11 +1,11 @@
 <template>
-  <div>
+  <div class="time-select-demo-focus">
     <tiny-button @click="hanleFocus">手动获取焦点</tiny-button>
     <tiny-time-select v-model="value" placeholder="选择时间" ref="timeSelectRef"></tiny-time-select>
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TimeSelect as TinyTimeSelect, Button as TinyButton } from '@opentiny/vue'
 
@@ -13,6 +13,15 @@ const value = ref('')
 const timeSelectRef = ref()
 
 function hanleFocus() {
-  timeSelectRef.value.focus()
+  timeSelectRef.value.handleFocus()
 }
 </script>
+
+<style lang="less" scoped>
+.time-select-demo-focus {
+  width: 270px;
+  & > * {
+    margin-top: 12px;
+  }
+}
+</style>