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 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式