VueJs使用Amaze ui调整列表和内容页面


Posted in Javascript onNovember 30, 2017

制作左侧菜单

一个后台管理系统,大致的样式都是分为南北东西的,而西(也就是左侧)一般是我们的菜单。如图:

VueJs使用Amaze ui调整列表和内容页面

我们今天就来把我们的项目完成到如上图的样式,首先我们来制作左侧的菜单,在/src/components/下新建menu.vue。代码如下:

<template>
<div class="admin-sidebar am-offcanvas" id="admin-offcanvas">
 <div class="am-offcanvas-bar admin-offcanvas-bar">
  <ul class="am-list admin-sidebar-list">
   <li class="admin-parent" v-for="menu in menus"><router-link :to="menu.href">{{menu.name}}</router-link>
    <ul class="am-list am-collapse admin-sidebar-sub am-in" id="collapse-nav">
      <li v-for="child in menu.childs" v-if="menu.childs"><router-link :to="child.href"><span class="am-icon-check"></span> {{child.name}}<span class="am-icon-star am-fr am-margin-right admin-icon-yellow"></span></router-link></li>
     </ul>
   </li>
  </ul>
 </div>
</div>
</template>
<script>
export default{
  name : "Menu",
  data(){
    return {
      menus:[{
        name:"首页",
        href:"/",
        childs:[]
      },{
        name:"写信",
        href:"/",
        childs:[]
      },{
        name:"收件箱",
        href:"/Inbox",
        childs:[]
      },{
        name:"发件箱",
        href:"/Outbox",
        childs:[]
      },{
        name:"垃圾箱",
        href:"/",
        childs:[]
      },{
        name:"草稿箱",
        href:"/",
        childs:[]
      },{
        name:"其他文件夹",
        href:"/",
        childs:[{
          name:"已发送邮件",
          href:"/"
        },{
          name:"已删除邮件",
          href:"/"
        }]
      }]
    }
  }
}
</script>

现在我们的菜单就已经做好了,只需要将菜单应用到我们的项目中就可以了。打开/src/App.vue,修改如下位置:

VueJs使用Amaze ui调整列表和内容页面

调整列表页面

打开/src/pages/Index.vue代码如下:

<template>
<div class="admin-content">
 <div class="admin-content-body">
  <div class="am-cf am-padding am-padding-bottom-0">
   <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">收件箱</strong> / <small>Inbox</small></div>
  </div>
  <hr>
  <div class="am-g">
   <div class="am-u-sm-12 am-u-md-6">
    <div class="am-btn-toolbar">
     <div class="am-btn-group am-btn-group-xs">
      <button type="button" class="am-btn am-btn-default" @click="toAdd"><span class="am-icon-plus"></span> 新增</button>
      <button type="button" class="am-btn am-btn-default" @click="save"><span class="am-icon-save"></span> 保存</button>
      <button type="button" class="am-btn am-btn-default" @click="verify"><span class="am-icon-archive"></span> 审核</button>
      <button type="button" class="am-btn am-btn-default" @click="remove"><span class="am-icon-trash-o"></span> 删除</button>
     </div>
    </div>
   </div>
   <div class="am-u-sm-12 am-u-md-3">
    <div class="am-input-group am-input-group-sm">
     <input type="text" class="am-form-field">
    <span class="am-input-group-btn">
     <button class="am-btn am-btn-default" type="button">搜索</button>
    </span>
    </div>
   </div>
  </div>
  <!-- admin-content-body end -->
  <div class="am-g" style="margin-top:5px;">
   <div class="am-u-sm-12">
    <form class="am-form">
     <table class="am-table am-table-striped am-table-hover table-main am-table-bordered am-table-radius" >
      <thead>
      <tr>
       <th class="table-check"><input type="checkbox" /></th><th class="table-id">ID</th><th class="table-title">标题</th><th class="table-type">类别</th><th class="table-author am-hide-sm-only">作者</th><th class="table-date am-hide-sm-only">修改日期</th><th class="table-set">操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item,index) in tableList">
       <td><input type="checkbox" /></td>
       <td>{{index + 1}}</td>
       <td><router-link :to="'/Content/' + item.id">{{item.title}}</router-link></td>
       <td>{{item.tab}}</td>
       <td class="am-hide-sm-only">{{item.author.loginname}}</td>
       <td class="am-hide-sm-only">{{item.create_at}}</td>
       <td>
        <div class="am-btn-toolbar">
         <div class="am-btn-group am-btn-group-xs">
          <button class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</button>
          <button class="am-btn am-btn-default am-btn-xs am-hide-sm-only"><span class="am-icon-copy"></span> 复制</button>
          <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</button>
         </div>
        </div>
       </td>
      </tr>
      </tbody>
     </table>
     <div class="am-cf">
      共 15 条记录
      <div class="am-fr">
       <ul class="am-pagination">
        <li class="am-disabled"><a href="#">«</a></li>
        <li class="am-active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">»</a></li>
       </ul>
      </div>
     </div>
    </form>
   </div>
  </div>
  <!-- am-g end -->
 </div>
</div>
</template>
<script>
 export default{
  name : "Inbox",
  data () {
    return {
     tableList: []
    }
   },
   created () {
    this.initialization()
   },
   mounted () {
    $(".admin-content").css("height",(document.documentElement.clientHeight-36-50)+"px");
   },
   methods: {
    initialization () {
     this.$api.get('topics', {page:1,limit:10}, r => {
      console.log(r);
      if(r.success){
       this.tableList = r.data;
      }
     })
    },
    toAdd(){
      alert("添加");
    },
    save(){
      alert("保存");
    },
    verify(){
      alert("审核");
    },
    remove(){
      alert("删除");
    }
   }
 }
</script>

注意:上面我们初始化查询第一页的数据,并规定每页显示10条,我们没有做分页功能的开发。是由于cnodejs.org的api并没有给我们返回分页的信息,将来如果是实际开发,那么接口正常情况是会返回分页信息的,我们到时候再具体的渲染就好了。

调整内容页面

打开/src/pages/Content.vue,代码如下:

<template>
<div class="admin-content">
  <h2 v-text="article.title"></h2>
  <p>作者:{{article.author.loginname}}发表于:{{article.create_at}}</p>
  <hr>
  <article v-html="article.content"></article>
  <h3>网友回复:</h3>
  <ul>
   <li v-for="i in article.replies">
    <p>评论者:{{i.author.loginname}}
评论于:{{i.create_at}}</p>
    <article v-html="i.content"></article>
   </li>
  </ul>
 </div>
</template>
<script>
 export default {
  name : "Content",
  data () {
   return {
    id: this.$route.params.id,
    article: {
     author: {
      loginname:""
     }
    }
   }
  },
  created () {
   this.getData();
  },
  mounted () {
   $(".admin-content").css("height",(document.documentElement.clientHeight-36-50)+"px");
  },
  methods: {
   getData () {
    this.$api.get('topic/' + this.id, null, r => {
     console.log(r.data);
     this.article = r.data;
    })
   }
  }
 }
</script>

到此为止我们就完成了列表页面和内容页面的整合了,说明一下在调整后的script中,多了个mounted 方法,这个是vuejs的勾子函数,我理解的意思表示元素已经创建,数据也渲染完成。我们来设置admin-content的高度就没有问题了,不过这个我不确定是我的写法有问题,还是Amaze ui和vuejs整合后的影响,目前只能这样解决了。

最终效果

列表页面:

VueJs使用Amaze ui调整列表和内容页面

内容页面:

VueJs使用Amaze ui调整列表和内容页面

总结

以上所述是小编给大家介绍的VueJs使用Amaze ui调整列表和内容页面,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js程序中美元符号$是什么
Jun 05 Javascript
javascript关于运动的各种问题经典总结
Apr 27 Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
AngularJS监听ng-repeat渲染完成的方法
Mar 20 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
axios 封装上传文件的请求方法
Sep 26 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
详解滑动穿透(锁body)终极探索
Apr 16 Javascript
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 Javascript
JS数组的常用10种方法详解
May 08 Javascript
vue的状态管理模式vuex
Nov 30 #Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
Nov 30 #Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 #Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 #Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 #Javascript
jQuery zTree 异步加载添加子节点重复问题
Nov 29 #jQuery
写给小白看的JavaScript异步
Nov 29 #Javascript
You might like
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
在React框架中实现一些AngularJS中ng指令的例子
2016/03/06 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
用jQuery实现抽奖程序
2020/04/12 jQuery
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
[01:07:17]EG vs Optic Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python科学计算之NumPy入门教程
2017/01/15 Python
python 垃圾收集机制的实例详解
2017/08/20 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
python 调用有道api接口的方法
2019/01/03 Python
python读取几个G的csv文件方法
2019/01/07 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
django创建简单的页面响应实例教程
2019/09/06 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
新锐科技Java程序员面试题
2016/07/25 面试题
大学考试作弊检讨书
2014/01/30 职场文书
团日活动总结书
2014/05/08 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
初婚未育证明样本
2014/10/24 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
五好家庭申报材料
2014/12/20 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
庐山导游词
2015/02/03 职场文书