在laravel-admin
中可以很方便的使用vuejs
,下面是一个使用vuejs
实现的一个简单的number-input
示例
先参考上一篇文档,在app/Admin/bootstrap.php
中定义资源依赖:
\Encore\Admin\Assets::define('vuejs', [
'js' => ['https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js',],
'export' => 'Vue',
]);
开发视图文件/resources/views/admin/number-input.blade.php
:
<section class="vue-number">
<div class="input-group">
<span class="input-group-prepend">
<button type="button" class="btn btn-info" v-on:click="decrement" >-{{ step }}</button>
</span>
<input type="text" class="form-control text-center" :value="value">
<span class="input-group-append">
<button type="button" class="btn btn-info" v-on:click="increment">+{{ step }}</button>
</span>
</div>
</section>
<style>
.vue-number {
width: 250px;
}
</style>
<script require="vuejs">
new Vue({
el: ".vue-number",
data: function() {
return @json($options);
},
methods: {
increment: function() {
this.value = Math.min(this.value + this.step, this.max);
},
decrement: function() {
this.value = Math.max(this.value - this.step, this.min);
}
}
});
</script>
在控制器中使用:
<?php
use Encore\Admin\Layout\Content;
class VuejsController extends Controller
{
public function index(Content $content)
{
$options = ['value' => 50, 'max' => 100, 'min' => 5, 'step' => 2];
return $content
->title('Vue number')
->description('介绍..')
->view('admin.number-input', compact('options'));
}
}
显示效果如下: