@opentiny/vue-docs 2.2.6 → 2.2.8

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>

package/demos/pc/app/time-select/focus.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="timeSelect"></tiny-time-select>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeSelect, Button } from '@opentiny/vue'
 
 export default {
@@ -20,8 +20,17 @@ export default {
   },
   methods: {
     hanleFocus() {
-      this.$refs.timeSelect.focus()
+      this.$refs.timeSelect.handleFocus()
     }
   }
 }
 </script>
+
+<style lang="less" scoped>
+.time-select-demo-focus {
+  width: 270px;
+  & > * {
+    margin-top: 12px;
+  }
+}
+</style>

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

@@ -1,20 +1,28 @@
 <template>
-  <tiny-time-select
-    v-model="value"
-    :picker-options="{
-      start: '08:30',
-      step: '00:15',
-      end: '18:30',
-      minTime: '09:00',
-      maxTime: '12:30'
-    }"
-    placeholder="选择时间"
-  ></tiny-time-select>
+  <div class="time-select-demo-picker">
+    <tiny-time-select
+      v-model="value"
+      :picker-options="{
+        start: '08:30',
+        step: '00:15',
+        end: '18:30',
+        minTime: '09:00',
+        maxTime: '12:30'
+      }"
+      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('09:30')
+const value = ref('')
 </script>
+
+<style scoped>
+.time-select-demo-picker {
+  width: 270px;
+}
+</style>

package/demos/pc/app/time-select/picker-options.vue

@@ -1,18 +1,20 @@
 <template>
-  <tiny-time-select
-    v-model="value"
-    :picker-options="{
-      start: '08:30',
-      step: '00:15',
-      end: '18:30',
-      minTime: '09:00',
-      maxTime: '12:30'
-    }"
-    placeholder="选择时间"
-  ></tiny-time-select>
+  <div class="time-select-demo-picker">
+    <tiny-time-select
+      v-model="value"
+      :picker-options="{
+        start: '08:30',
+        step: '00:15',
+        end: '18:30',
+        minTime: '09:00',
+        maxTime: '12:30'
+      }"
+      placeholder="选择时间"
+    ></tiny-time-select>
+  </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeSelect } from '@opentiny/vue'
 
 export default {
@@ -21,8 +23,14 @@ export default {
   },
   data() {
     return {
-      value: '09:30'
+      value: ''
     }
   }
 }
 </script>
+
+<style scoped>
+.time-select-demo-picker {
+  width: 270px;
+}
+</style>

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

@@ -1,9 +1,14 @@
 <template>
-  <div class="content">
+  <div class="time-select-demo-range">
     <tiny-time-select
       placeholder="起始时间"
       v-model="startTime"
-      :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
+      :picker-options="{
+        start: '08:30',
+        step: '00:15',
+        end: '18:30',
+        maxTime: endTime
+      }"
     ></tiny-time-select>
     <tiny-time-select
       placeholder="结束时间"
@@ -18,10 +23,19 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TimeSelect as TinyTimeSelect } from '@opentiny/vue'
 
 const startTime = ref('')
 const endTime = ref('')
 </script>
+
+<style lang="less" scoped>
+.time-select-demo-range {
+  width: 270px;
+  & > * {
+    margin-top: 12px;
+  }
+}
+</style>

package/demos/pc/app/time-select/range-placeholder.vue

@@ -1,9 +1,14 @@
 <template>
-  <div class="content">
+  <div class="time-select-demo-range">
     <tiny-time-select
       placeholder="起始时间"
       v-model="startTime"
-      :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }"
+      :picker-options="{
+        start: '08:30',
+        step: '00:15',
+        end: '18:30',
+        maxTime: endTime
+      }"
     ></tiny-time-select>
     <tiny-time-select
       placeholder="结束时间"
@@ -18,7 +23,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeSelect } from '@opentiny/vue'
 
 export default {
@@ -33,3 +38,12 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.time-select-demo-range {
+  width: 270px;
+  & > * {
+    margin-top: 12px;
+  }
+}
+</style>

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

@@ -1,10 +1,23 @@
 <template>
-  <tiny-time-select v-model="value" placeholder="选择时间" size="medium"></tiny-time-select>
+  <div class="time-select-demo-size">
+    <tiny-time-select v-model="value" placeholder="尺寸: medium" size="medium"></tiny-time-select>
+    <tiny-time-select v-model="value" placeholder="尺寸: small" size="small"></tiny-time-select>
+    <tiny-time-select v-model="value" placeholder="尺寸: mini" size="mini"></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 lang="less" scoped>
+.time-select-demo-size {
+  width: 270px;
+  & > * {
+    margin-top: 12px;
+  }
+}
+</style>

package/demos/pc/app/time-select/size-medium.vue

@@ -1,8 +1,12 @@
 <template>
-  <tiny-time-select v-model="value" placeholder="选择时间" size="medium"></tiny-time-select>
+  <div class="time-select-demo-size">
+    <tiny-time-select v-model="value" placeholder="尺寸: medium" size="medium"></tiny-time-select>
+    <tiny-time-select v-model="value" placeholder="尺寸: small" size="small"></tiny-time-select>
+    <tiny-time-select v-model="value" placeholder="尺寸: mini" size="mini"></tiny-time-select>
+  </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeSelect } from '@opentiny/vue'
 
 export default {
@@ -16,3 +20,12 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.time-select-demo-size {
+  width: 270px;
+  & > * {
+    margin-top: 12px;
+  }
+}
+</style>

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

@@ -1,10 +1,10 @@
 <template>
-  <div>
+  <div class="time-select-demo-suffix">
     <tiny-time-select v-model="value" :suffix-icon="IconYes" placeholder="选择时间范围"></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'
@@ -12,3 +12,9 @@ import { iconYes } from '@opentiny/vue-icon'
 const IconYes = iconYes()
 const value = ref('08:30')
 </script>
+
+<style scoped>
+.time-select-demo-suffix {
+  width: 270px;
+}
+</style>

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

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