feat: 增加timepicker 任意时间点选择

Author: LKCCY

app/views/test-common/const.js

@@ -73,9 +73,15 @@ export const schema = [
       formItem: { label: '成绩' },
       attrs: { 'show-stops': true, step: 10 }
     }, {
-      type: 'timeselect',
+      type: 'timepicker',
       prop: 'sleepTime',
-      formItem: { label: '晚睡时间' }
+      formItem: { label: '晚睡时间' },
+      attrs: {
+        'picker-options': {
+          selectableRange: '18:30:00 - 20:30:00'
+        },
+        'arrow-control': true
+      }
     }, {
       type: 'rate',
       prop: 'star',

docs/guide/component/schema.md

@@ -18,7 +18,8 @@ cascader| 级联选择器 | [el-cascader](https://element.eleme.cn/#/zh-CN/compo
 switch| 开关 | [el-switch](https://element.eleme.cn/#/zh-CN/component/switch)
 slider| 滑块 | [el-slider](https://element.eleme.cn/#/zh-CN/component/slider)
 datepicker| 日期选择器 | [el-date-picker](https://element.eleme.cn/#/zh-CN/component/date-picker)
-timeselect| 时间选择器 | [el-time-select](https://element.eleme.cn/#/zh-CN/component/time-picker)
+timeselect| 固定时间 | [el-time-select](https://element.eleme.cn/#/zh-CN/component/time-picker)
+timepicker| 任意时间 | [el-time-picker](https://element.eleme.cn/#/zh-CN/component/time-picker)
 colorpicker| 颜色选择器 | [el-color-picker](https://element.eleme.cn/#/zh-CN/component/color-picker)
 progress| 进度条 | [el-progress](https://element.eleme.cn/#/zh-CN/component/progress)
 rate| 评分 | [el-rate](https://element.eleme.cn/#/zh-CN/component/rate)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueblocks/element-schema-form",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "A schema-based form generator component for Element UI.",
   "author": "xiaoluoboding <xiaoluoboding@gmail.com>",
   "scripts": {

src/index.js

@@ -8,6 +8,7 @@ import SchemaFormPlaceholder from './packages/components/SchemaFormPlaceholder.v
 import SchemaFormCheckbox from './packages/components/SchemaFormCheckbox.vue'
 import SchemaFormSlider from './packages/components/SchemaFormSlider.vue'
 import SchemaFormTimeselect from './packages/components/SchemaFormTimeselect.vue'
+import SchemaFormTimepicker from './packages/components/SchemaFormTimepicker.vue'
 import SchemaFormRate from './packages/components/SchemaFormRate.vue'
 import SchemaFormSwitch from './packages/components/SchemaFormSwitch.vue'
 import SchemaFormColorpicker from './packages/components/SchemaFormColorpicker.vue'
@@ -34,7 +35,8 @@ const components = [
   SchemaFormSwitch,
   SchemaFormColorpicker,
   SchemaFormTags,
-  SchemaFormProgress
+  SchemaFormProgress,
+  SchemaFormTimepicker
 ]
 
 function install (Vue, opts = {}) {

src/packages/SchemaForm.vue

@@ -19,8 +19,8 @@
               :options="options"
               v-on="$listeners"
             >
-             <slot v-if="col.frontSlot" :name="col.frontSlot" :slot="col.frontSlot"></slot>
-             <slot v-if="col.rearSlot" :name="col.rearSlot" :slot="col.rearSlot"></slot>
+              <slot v-if="col.frontSlot" :name="col.frontSlot" :slot="col.frontSlot"></slot>
+              <slot v-if="col.rearSlot" :name="col.rearSlot" :slot="col.rearSlot"></slot>
             </schema-form-item>
           </template>
         </el-col>

src/packages/SchemaFormItem.vue

@@ -33,7 +33,7 @@ export default {
   data () {
     return {
       builtInNames: ['input', 'select', 'radio', 'datepicker',
-        'cascader', 'placeholder', 'checkbox', 'slider', 'timeselect', 'jsoneditor', 'quill', 'codemirror',
+        'cascader', 'placeholder', 'checkbox', 'slider', 'timeselect', 'timepicker', 'jsoneditor', 'quill', 'codemirror',
         'rate', 'switch', 'colorpicker', 'tags', 'progress']
     }
   },

src/packages/components/SchemaFormTimepicker.vue

@@ -0,0 +1,22 @@
+<template>
+  <el-time-picker
+    v-model="bindVal"
+    v-bind="attrsAll"
+    v-on="onEvents"
+    @change="$emit('change', { prop, value: $event })"
+  >
+  </el-time-picker>
+</template>
+
+<script>
+import FormMixin from '../mixins/form-mixin'
+
+export default {
+  name: 'SchemaFormTimepicker',
+  mixins: [FormMixin]
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>