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 相关文章推荐
Javascript图像处理思路及实现代码
Dec 25 Javascript
js获得地址栏?问号后参数的方法
Aug 08 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
Mar 16 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
JS中常用的消息框总结
Feb 24 Javascript
Vue和React组件之间的传值方式详解
Jan 31 Javascript
vue实现select下拉显示隐藏功能
Sep 30 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 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中CI操作多个数据库的代码
2012/07/05 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
自己做的模拟模态对话框实现代码
2012/05/23 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
Three.js基础部分学习
2017/01/08 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
Python将json文件写入ES数据库的方法
2019/04/10 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
Django如何实现防止XSS攻击
2020/10/13 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
介绍一下Java的事务处理
2012/12/07 面试题
企业厂务公开实施方案
2014/03/26 职场文书
2014年企业党建工作总结
2014/12/18 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
施工现场安全管理制度
2015/08/05 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL
Python实现仓库管理系统
2022/05/30 Python