vue split (網頁) with quasar

網頁分割畫面test

by cactus77kiki

HTML

<!--
  Forked from:
  https://quasar.dev/vue-components/splitter#Example--Horizontal
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.min.css" rel="stylesheet">
<style>
  .disabled{display:none;}
  .black{}
</style>
<div id="q-app">
  <button type="button" v-on:click="CleanData">Cleanit</button>
  <button type="button" v-on:click="GetData">Getit</button>
  {{splitterModel}}
  <div>
      <q-splitter
        :separator-class="[splitmode? splited: disabled,color]"
        :after-class="splitmode? splited: disabled"
        v-model="splitterModel"
        :limits="[1,99]"
        horizontal
        style="height: 400px"
      >
  
        <template v-slot:before>
          <ul class="q-pa-md">
            
            選取頁碼：
            <select v-model = "page">
              <option v-for = "n in totalpage">{{n}}</option>
            </select>
            <div >
            <ul >
              
              <li v-for="(c,index) in pagedata">
                <button type="button" v-on:click="query(index)">Query</button>
                ({{c.id}}){{c.name}} - {{c.body}}
              </li>
            </ul>
            </div>
            </ul> 
        </template>
          
        <template v-slot:after >
          <div class="q-pa-md">
           
            <div >
              <button v-on:click="closesplit">Close</button>
              <ul>
                <li>【id】：{{comment.id}}</li>
                <li>【name】：{{comment.name}}</li>
                <li>【email】：{{comment.email}}</li>
                <li>【body】：{{comment.body}}</li>
              </ul>
            </div>
         ...

JavaScript

/*
ref:QSplitter
https://quasar.dev/vue-components/splitter
實作:
https://ithelp.ithome.com.tw/users/20111805/ironman/1731?page=1
ajax fake data
https://jsonplaceholder.typicode.com/
*/

var app = new Vue({
  el: '#q-app',
  data: {
    disabled:'disabled',	//css(分割線狀態:隱藏)
    splited:'',	//css(分割線狀態:分割)
    splitmode:false,	//分割模式(true:是/false:否)
    splitterModel: 99,	//分割比例(數值越高表示分割線位置越低
    color:'black',	//css2(測試用)
    totalpage:20,	//分頁數數
    page:1,	//目前頁數
    comments:[],	//全數資料
    comment:{}	//目前頁數資料
  },
  watch:{
  	//以分割模式取得分割線所在位置
  	splitmode: function(value){
      if(value)
      	this.splitterModel = 50;
      else
        this.splitterModel = 99.9;
    }
  },
  computed:{
  //取得目前所在頁數之資料集
    pagedata: function(){
      if(this.comments.length>0){
        //計算每頁筆數
        var rows = this.comments.length/this.totalpage;
        //取資料之start rows(1頁--1筆)
        var eindex = this.page*rows;
        //取資料之end rows(1頁--25筆)
        var sindex = eindex-rows;
        //取得所選頁碼資料
        var array=[];
        for(var i = sindex;i< eindex;i++){
          array.push(this.comments[i]);
        }
        return array;
      }else
        return [];
    }
  },
  methods:{
  //關閉分割模式
    closesplit:function(){
      this.splitmode=false;
    },
    //取得單一筆資料詳細data
    query: function(index){
      //this.comment = this.comments[index];
      this.comment = this.pagedata[index];
      this.splitmode = true;
    },
    //清除畫面
    CleanData: function(){
      this.comments = [];
      this.splitmode = false;
  },
  //取得所有資料
    GetData: function(){
      
    var self = this;  axios.get('https://jsonplaceholder.typicode.com/comments')
        .then(function (response) {
      
      self.comments = response.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    }
    
  }
})