手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆

Dcat-Admin with vue

首页 > PHP >

有时候你不得不承认,DCAT-admin / laravel-admin 做后台是属于比较方便的。你硬要说nova之类的,我也无话可说。但毕竟nova要钱,而且文档并没有国内的全。

为什么说dcat-admin,主要还是laravel-admin好久没有大更新了。然后laravel-admin的多应用要钱。虽然我买了,但更新太慢,我现在还是用dcat了。

很多人在github上面问,为什么不支持VUE。其实也能理解 ,vue如果用了, pjax就不太好用了。但我还是得说,如果你只是简单的,不做特别复杂的应用,还是有办法支持vue的。

首先全局引用JS,Admin::js(),这个不用多说,如果不想全局引用,那就在自己的页面里,将它引用出来就行了。

然后用了个简单的demo,

XML/HTML代码
  1. <div id="sign-form">  
  2.   @{{ form }}  
  3.   <el-input v-model="input" placeholder="请输入内容"></el-input>  
  4.     
  5.   <el-steps :active="active" finish-status="success">  
  6.     <el-step title="步骤 1"></el-step>  
  7.     <el-step title="步骤 2"></el-step>  
  8.     <el-step title="步骤 3"></el-step>  
  9.   </el-steps>  
  10.     
  11.   <el-button style="margin-top: 12px;" @click="next">下一步</el-button>  
  12.   
  13. </div>  
  14. <script>  
  15.   var form = {};  
  16.   new Vue({  
  17.     el: '#sign-form',  
  18.     data() {  
  19.       return {  
  20.         form: form,  
  21.         input: '{{date('Y-m-d H:i:s')}}',  
  22.         active: 0  
  23.       };  
  24.     },  
  25.     mounted() {  
  26.       this.request();  
  27.     },  
  28.     methods: {  
  29.       formReset() {  
  30.         this.form = form;  
  31.       },  
  32.       request() {  
  33.         this.form = {a: 1, b: 2, c: 3, d: 5};  
  34.         {{--laravel.get('{{api_url('union/bind/check/123')}}', res => {--}}  
  35.         {{--  console.log(res);--}}  
  36.         {{--});--}}  
  37.       },  
  38.       next() {  
  39.         if (this.active++ > 2) this.active = 0;  
  40.       }  
  41.     }  
  42.   });  
  43. </script>  

 

保存后,点开网页看看。确实不会再加载了。但这种VUE,就只适合单页面用用了(当然,本身也就是为了在复杂的表单上使用它。也够了)

---差点没有保存。。

 




本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"易栈网-膘叔", 保留原始链接, 此外还必须标注原文标题和链接.

« 上一篇 | 下一篇 »

1条记录访客评论

大佬你好,在用dcat 遇到 怎么做无感刷新的问题,请问你有做过吗?可以给个思路吗 ?
---
dcat用的是pjax。本来也几乎就是无感的。如果需要内部刷新,你可以参考一下pjax中的一些方法

Post by uc5bbl8s on 2024, February 1, 3:34 PM 引用此文发表评论 #1


发表评论

评论内容 (必填):