laravel backpack time picker 组件 - 基于 element ui

目前正在使用的 backpack 版本并没有 time picker 组件，所以不得不将 element ui 的 time picker 移植过来。

http://element-cn.eleme.io/#/zh-CN/component/time-picker

记录这个组件的代码结构非常有意义，因为大部分定制化的 backpack 组件都可以沿用这个结构。

另外，jQuery 与 VueJS 的混合使用，虽然看起来很糙，但是异常高效。

注意事项：

id 不要写死，要与 field name 相关

方便兼容一个页面中包含多个此组件，例如

time_picker_{{ $field['name'] }}

依赖的三方 js，css 文件只加载一次

@if ($crud->checkIfFieldIsFirstOfItsType($field, $fields))

具体实现代码

<div @include('crud::inc.field_wrapper_attributes') id="time_picker_{{ $field['name'] }}">
    <input type="hidden" name="{{ $field['name'] }}" value="{{ old($field['name']) ? old($field['name']) : (isset($field['value']) ? $field['value'] : (isset($field['default']) ? $field['default'] : '' )) }}">
    <label>{!! $field['label'] !!}</label>

    @include('crud::inc.field_translatable_icon')

    <div>
        <el-time-select
            v-model="time"
            :picker-options="{
            start: '00:00',
            step: '00:05',
            end: '23:55'
            }"
            placeholder="选择时间">
        </el-time-select>
    </div>

    {{-- HINT --}}
    @if (isset($field['hint']))
    <p class="help-block">{!! $field['hint'] !!}</p>
    @endif
</div>

{{-- ########################################## --}}
{{-- Extra CSS and JS for this particular field --}}
{{-- If a field type is shown multiple times on a form, the CSS and JS will only be loaded once --}}
@if ($crud->checkIfFieldIsFirstOfItsType($field, $fields))

{{-- FIELD CSS - will be loaded in the after_styles section --}}
@push('crud_fields_styles')
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.4.11/theme-chalk/index.css" />
@endpush

{{-- FIELD JS - will be loaded in the after_scripts section --}}
@push('crud_fields_scripts')
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/element-ui/2.4.11/index.js"></script>
@endpush

@endif

@push('crud_fields_scripts')
<script>
var value_{{ $field['name'] }} = $("input[name={{ $field['name'] }}]").val();

if (!value_{{ $field['name'] }}) {
    value_{{ $field['name'] }} = '08:00';
}

new Vue({
    el: "#time_picker_{{ $field['name'] }}",

    data: {
        time: value_{{ $field['name'] }},
    },

    mounted: function() {
    },

    watch: {
        time: function(val) {
            if (val) {
                $("input[name={{ $field['name'] }}]").val(val);
            }
        }
    },

    methods: {
    }
});
</script>
@endpush
{{-- End of Extra CSS and JS --}}

微信关注我哦 👍

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式