laravel-admin 与 vue 结合使用实例代码详解
Laravel  /  管理员 发布于 4年前   281
由于 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:
第2部分是插入组件:
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: `Top
- 近期文章
- 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
- PHP 8.4 Alpha 1现已发布!(0个评论)
- Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
- Laravel 11.14版本发布 - 新的字符串助手和ServeCommand改进(0个评论)
- Laravel 11.12版本发布 - Artisan的`make`命令自动剪切`.php `扩展(0个评论)
- golang支持托盘的程序模板:fyneMiniProgram-程序带图标,程序最小化到系统栏(0个评论)
- Laravel的轻量型购物车扩展包:binafy/laravel-cart(0个评论)
- 在go语言中使用http实现multipart/form-data文件上传,不加载文件到内存功能示例(0个评论)
- 2024.07.09日OpenAI将终止对中国等国家和地区API服务(0个评论)
- 在go语言中使用crypto/bcrypt实现用户密码非明文存储示例(0个评论)
- 近期评论
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号