laravel-admin 與 vue 結(jié)合使用實(shí)例代碼詳解
由于 Laravel-admin
采用的是 pjax 的方式刷新頁(yè)面,意味著很多頁(yè)面刷新的操作,并不是刷新整個(gè) document,而是從服務(wù)器拿到部分 document,再通過(guò)類(lèi)似 $(“#pjax-container”).html(newPart)
的方式更新的。
這就造成一個(gè)問(wèn)題,每次 pjax 刷新,都會(huì)破壞 vue 的 dom 映射。
所以理論上有2種方法解決:
重新綁定一下 vue 的映射關(guān)系
在某些頁(yè)面禁止 pjax
1 太難搞,而且沒(méi)啥資料,放棄。2 的話(huà)比較可行。
部分禁止 pjax
打開(kāi) public/vendor/laravel-admin/laravel-admin/laravel-admin.js
添加代碼:
// 不使用 pjax 刷新的頁(yè)面 $(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
很多時(shí)候我們并不需要大動(dòng)干戈地建立一個(gè)全部的 view,只需要在內(nèi)置 view 中稍作修改。
這時(shí)候,我們需要先自定義一個(gè) Content 類(lèi):
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()); }
這樣一來(lái),每次進(jìn)入到 index 頁(yè)面,都會(huì)渲染 admin.content 這個(gè) view 。
view 的內(nèi)容直接 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 組件單獨(dú)一個(gè) 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>`, })
這是一個(gè)彈出式編輯框,具體作用就不解釋了,只是個(gè)示例。
然后還需要在 Admin/bootstrap.php
中引用這個(gè) js 文件:
Admin::js('/vendor/components/gallery-editor.js');
為什么不把組件代碼直接寫(xiě)進(jìn) view 中呢?
因?yàn)?pjax 的后端邏輯似乎有 bug,template 的內(nèi)容無(wú)法全部渲染到前端,導(dǎo)致頁(yè)面出錯(cuò)。
總結(jié)
以上所述是小編給大家介紹的laravel-admin 與 vue 結(jié)合使用實(shí)例代碼詳解,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Vue和SpringBoot之間傳遞時(shí)間的方法實(shí)現(xiàn)
本文主要介紹了Vue和SpringBoot之間傳遞時(shí)間的方法實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07vue3?ts編寫(xiě)echart是tooltip無(wú)法展示的解決
這篇文章主要介紹了vue3?ts編寫(xiě)echart是tooltip無(wú)法展示的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10VUE組件中的 Drawer 抽屜實(shí)現(xiàn)代碼
這篇文章主要介紹了VUE組件 之 Drawer 抽屜 ,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08Vue中computed和watch的區(qū)別小結(jié)
watch和computed都是以Vue的依賴(lài)追蹤機(jī)制為基礎(chǔ)的,當(dāng)某一個(gè)依賴(lài)型數(shù)據(jù)發(fā)生變化的時(shí)候,所有依賴(lài)這個(gè)數(shù)據(jù)的相關(guān)數(shù)據(jù)會(huì)自動(dòng)發(fā)生變化,即自動(dòng)調(diào)用相關(guān)的函數(shù),來(lái)實(shí)現(xiàn)數(shù)據(jù)的變動(dòng),這篇文章簡(jiǎn)單介紹下Vue中computed和watch的區(qū)別異同,感興趣的朋友一起看看吧2022-12-12VUE中computed 、created 、mounted的先后順序說(shuō)明
這篇文章主要介紹了VUE中computed 、created 、mounted的先后順序說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03