laravel-admin 与 vue 结合使用实例代码详解

2023-08-22 15:52:04 158

由于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)
varfreshPaths=[
/\/admin.*\/products/,
]
for(letpathoffreshPaths){
if(path.test){
if(path.test(e.state.url)){
location.reload()
returnfalse
}
}
elseif(options.url.search(path)!==-1){
location.reload()
returnfalse
}
}
})

使用自定义view

很多时候我们并不需要大动干戈地建立一个全部的view，只需要在内置view中稍作修改。

这时候，我们需要先自定义一个Content类：

useEncore\Admin\Layout\Content;
classMyContentextendsContent{
publicfunctionrender(){
$items=[
'header'=>$this->header,
'description'=>$this->description,
'breadcrumb'=>$this->breadcrumb,
'content'=>$this->build(),
];
returnview('admin.content',$items)->render();
}
}

然后引用它：

publicfunctionindex(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部分代码即可。

第一部分是初始化vueapp：


//bootupthedemo
$(function(){

//vapp
window.vapp=newVue({
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')
},
},
})
})

第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(letsrcofnewVal){
this.moveTo.push({
src:src,
productId:this.pk,
deleted:0,
})
}
},
},
methods:{
close(){
this.status.showGalleryEditor=false
},
save(){
letargs={_token:LA.token}
args.id=this.pk
args.images=[]
args.move_to=[]

//console.log(JSON.stringify(this.moveTo))
for(letimgObjofthis.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:`




×
Editingimages

Movetoproduct: Delete:

Close Savechanges

laravel-admin 与 vue 结合使用实例代码详解

热门推荐

随机推荐