laravel-admin 与 vue 结合使用实例代码详解
由于 Laravel-admin
采用的是 pjax 的方式刷新页面,意味着很多页面刷新的操作,并不是刷新整个 document,而是从服务器拿到部分 document,再通过类似 $(“#pjax-container”).html(newPart)
的方式更新的。
这就造成一个问题,每次 pjax 刷新,都会破坏 vue 的 dom 映射。
所以理论上有2种方法解决:
重新绑定一下 vue 的映射关系
在某些页面禁止 pjax
1 太难搞,而且没啥资料,放弃。2 的话比较可行。
部分禁止 pjax
打开 public/vendor/laravel-admin/laravel-admin/laravel-admin.js
添加代码:
// 不使用 pjax 刷新的页面 $(document).on('pjax:beforeReplace', function (e, options) { // console.log(arguments) var freshPaths = [ /\/admin.*\/products/, ] for (let path of freshPaths) { if (path.test) { if (path.test(e.state.url)) { location.reload() return false } } else if (options.url.search(path) !== -1) { location.reload() return false } } })
使用自定义 view
很多时候我们并不需要大动干戈地建立一个全部的 view,只需要在内置 view 中稍作修改。
这时候,我们需要先自定义一个 Content 类:
use Encore\Admin\Layout\Content; class MyContent extends Content { public function render() { $items = [ 'header' => $this->header, 'description' => $this->description, 'breadcrumb' => $this->breadcrumb, 'content' => $this->build(), ]; return view('admin.content', $items)->render(); } }
然后引用它:
public function index(MyContent $content) { return $content ->header('product') ->description($this->brand) ->body($this->grid()); }
这样一来,每次进入到 index 页面,都会渲染 admin.content 这个 view 。
view 的内容直接 copy 自 vendor/encore/laravel-admin/resources/views/content.blade.php
在 view 里插入 vue 组件
添加2部分代码即可。
第一部分是初始化 vue app:
<script data-exec-on-popstate> // boot up the demo $(function () { // vapp window.vapp = new Vue({ el: '#app', data () { return { status: { showGalleryEditor: false, }, store: { images: [], el: '', }, } }, components: {}, methods: { startGalleryEditing (event) { this.status.showGalleryEditor = true this.store.pk = $(event.target).parent().find('ul').data('pk') this.store.images = $(event.target).parent().find('img').toArray().map((e) => e.getAttribute('src')) window.p = $(event.target).parent().find('ul') }, }, }) }) </script>
第2部分是插入组件:
<gallery-editor :status="status" :images="store.images" :pk="store.pk"> </gallery-editor>
vue 组件单独一个 js 文件
位置如下:
public/vendor/components/gallery-editor.js
定义如下:
Vue.component('gallery-editor', { props: { status: { showGalleryEditor: false, }, images: [], pk: 0, moveTo: [], }, data () { return {} }, watch: { images (newVal, oldVal) { this.moveTo = [] for (let src of newVal) { this.moveTo.push({ src: src, productId: this.pk, deleted: 0, }) } }, }, methods: { close () { this.status.showGalleryEditor = false }, save () { let args = {_token: LA.token} args.id = this.pk args.images = [] args.move_to = [] // console.log(JSON.stringify(this.moveTo)) for (let imgObj of this.moveTo) { if (imgObj.deleted) { continue } if (imgObj.productId === this.pk) { args.images.push(imgObj.src) } else { args.move_to.push({src: imgObj.src, product_id: imgObj.productId}) } } // console.log(JSON.stringify(args)) $.post('/admin/products/move-images', args).done(() => { toastr.success('success') this.status.showGalleryEditor = false }).fail((response) => { toastr.error(response.responseText) }) }, }, template: ` <div class="modal" tabindex="-1" role="dialog" :class="{show: status.showGalleryEditor, fade: !status.showGalleryEditor}"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Editing images</h4> </div> <div class="modal-body"> <ul style="list-style-type: none;"> <li v-for="(imageObj, key) in moveTo" :key="key" style="margin-bottom: 8px"> <img :src="imageObj.src" alt="" style="width:40px;height:40px"> <label>Move to product: <input type="text" v-model="imageObj.productId"></label> <label>Delete:<input type="checkbox" v-model="imageObj.deleted"></label> </li> </ul> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal" @click="close">Close</button> <button type="button" class="btn btn-primary" @click="save">Save changes</button> </div> </div> </div> </div>`, })
这是一个弹出式编辑框,具体作用就不解释了,只是个示例。
然后还需要在 Admin/bootstrap.php
中引用这个 js 文件:
Admin::js('/vendor/components/gallery-editor.js');
为什么不把组件代码直接写进 view 中呢?
因为 pjax 的后端逻辑似乎有 bug,template 的内容无法全部渲染到前端,导致页面出错。
总结
以上所述是小编给大家介绍的laravel-admin 与 vue 结合使用实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
- yii2中结合gridview如何使用modal弹窗实例代码详解
- vue-better-scroll 的使用实例代码详解
- vue移动端裁剪图片结合插件Cropper的使用实例代码
- Vue组件中prop属性使用说明实例代码详解
- 在vue中使用echarts图表实例代码详解
- 在vue中使用vue-echarts-v3的实例代码
- PHP Session 变量的使用方法详解与实例代码
- Vue.js结合Ueditor富文本编辑器的实例代码
- vue中使用echarts制作圆环图的实例代码
- 【常用模块】ESP8266 WIFI串口通信模块使用详解(实例:附STM32详细代码)
- java正则表达式语法详解及其使用代码实例
- Python heapq使用详解及实例代码
- 使用vue和datatables进行表格的服务器端分页实例代码
- 使用Vue-Router 2实现路由功能实例详解
- vue中使用heatmapjs的示例代码(结合百度地图)
- Vue中使用方法、计算属性或观察者的方法实例详解
- libsvm在vs2017下使用c++实例详解(含c++代码)
- 在Vue项目中使用d3.js的实例代码
- Android Fragments 使用详解附代码实例
- php 使用fopen函数创建、打开文件详解及实例代码