VueJs使用Amaze ui調整列表和內(nèi)容頁面

更新時間：2017年11月30日 10:05:56 作者：王二麻子

這篇文章主要介紹了VueJs 填坑日記之使用Amaze ui調整列表和內(nèi)容頁面,需要的朋友可以參考下

制作左側菜單

一個后臺管理系統(tǒng)，大致的樣式都是分為南北東西的，而西（也就是左側）一般是我們的菜單。如圖：

我們今天就來把我們的項目完成到如上圖的樣式，首先我們來制作左側的菜單，在/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:"發(fā)件箱",
        href:"/Outbox",
        childs:[]
      },{
        name:"垃圾箱",
        href:"/",
        childs:[]
      },{
        name:"草稿箱",
        href:"/",
        childs:[]
      },{
        name:"其他文件夾",
        href:"/",
        childs:[{
          name:"已發(fā)送郵件",
          href:"/"
        },{
          name:"已刪除郵件",
          href:"/"
        }]
      }]
    }
  }
}
</script>

現(xiàn)在我們的菜單就已經(jīng)做好了，只需要將菜單應用到我們的項目中就可以了。打開/src/App.vue，修改如下位置：

調整列表頁面

打開/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>

注意：上面我們初始化查詢第一頁的數(shù)據(jù)，并規(guī)定每頁顯示10條，我們沒有做分頁功能的開發(fā)。是由于cnodejs.org的api并沒有給我們返回分頁的信息，將來如果是實際開發(fā)，那么接口正常情況是會返回分頁信息的，我們到時候再具體的渲染就好了。

調整內(nèi)容頁面

打開/src/pages/Content.vue，代碼如下：

<template>
<div class="admin-content">
  <h2 v-text="article.title"></h2>
  <p>作者：{{article.author.loginname}}　　發(fā)表于：{{article.create_at}}</p>
  <hr>
  <article v-html="article.content"></article>
  <h3>網(wǎng)友回復：</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>

到此為止我們就完成了列表頁面和內(nèi)容頁面的整合了，說明一下在調整后的script中，多了個mounted 方法，這個是vuejs的勾子函數(shù)，我理解的意思表示元素已經(jīng)創(chuàng)建，數(shù)據(jù)也渲染完成。我們來設置admin-content的高度就沒有問題了，不過這個我不確定是我的寫法有問題，還是Amaze ui和vuejs整合后的影響，目前只能這樣解決了。

最終效果

列表頁面：

內(nèi)容頁面：

總結

以上所述是小編給大家介紹的VueJs使用Amaze ui調整列表和內(nèi)容頁面，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

vuejs+element-ui+laravel5.4上傳文件的示例代碼

vue中如何讓子組件修改父組件數(shù)據(jù)
這篇文章主要介紹了vue中子組件修改父組件數(shù)據(jù)的相關資料，文中介紹了vue中watch的認識，關于子組件修改父組件屬性認識，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-06-06
Vue中的components組件與props的使用解讀
這篇文章主要介紹了Vue中的components組件與props的使用解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
vue?parseHTML?函數(shù)源碼解析AST基本形成
這篇文章主要為大家介紹了vue?parseHTML?函數(shù)源碼解析AST基本形成，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07
vue頁面批量引入組件的操作代碼
這篇文章主要介紹了vue頁面批量引入組件,本文結合示例代碼給大家講解的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-12-12
Vue實現(xiàn)Tab選項卡切換
這篇文章主要為大家詳細介紹了Vue實現(xiàn)Tab選項卡切換，點擊不同標題顯示對應圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
vue3如何實現(xiàn)?6位支付密碼輸入框
微信、支付寶支付密碼時的密碼輸入框大家都很熟悉，本文主要介紹了vue3如何實現(xiàn)?6位支付密碼輸入框，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-04-04
關于vue中如何監(jiān)聽數(shù)組變化
這篇文章主要介紹了關于vue中如何監(jiān)聽數(shù)組變化，對vue感興趣的同學，必須得參考下
2021-04-04
詳解vue3中watch監(jiān)聽的幾種情況
watch是CompositionAPI的一部分,用于監(jiān)聽響應式數(shù)據(jù)的變化并執(zhí)行相應的操作,本文主要介紹了詳解vue3中watch監(jiān)聽的幾種情況,具有一定的參考價值,感興趣的可以了解一下
2025-03-03
Vue3中Provide和Inject的用法及工作原理詳解
在Vue 3中,Provide和Inject是一對用于組件間數(shù)據(jù)傳遞的API,通常用于父組件向其子組件傳遞數(shù)據(jù),但并不通過props的方式,本文將深入探討Provide和Inject的工作原理,并通過示例代碼幫助你理解如何在你的Vue應用中使用它們,需要的朋友可以參考下
2025-02-02
Vue結合原生js實現(xiàn)自定義組件自動生成示例
這篇文章主要介紹了Vue結合原生js實現(xiàn)自定義組件自動生成示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-01-01