目前正在使用的 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 聊聊, 查看更多联系方式