vue-8 組件

import Vue from 'vue'
//全局部引入
import ElementUI from 'element-ui'
// //按需引入
import {Row,Button} from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import Global from './components/Global.vue'

Vue.config.productionTip = false


//注冊Element UI
Vue.use(ElementUI)
// //按需注冊
Vue.use(Row)
Vue.use(Button)

//全局組件注冊，前面是組件名
Vue.component("Global",Global)

new Vue({
  render: h => h(App),
}).$mount('#app')

<template>
  <div id="app">
    <!--組件-->
    <span>-------------------------------------------------------------------------------------------------------</span><br />
    <span>【父組件】獲取的當前頁面組件共{{parentItemCount}}條，每頁{{parentPageSize}}條，當前頁號{{parentPageIndex}}</span><br />
    <span>-------------------------------------------------------------------------------------------------------</span>
    <pageDemo3 :pageSize="5" :itemCount="82" @demo3-event="myMethod" />
    <Global />  //使用全局組件

    <!--Element UI-->
    <element-uI-demo /> 
  </div>
</template>

<script>
import pageDemo3 from "./components/pageDemo3.vue";

import ElementUIDemo from './components/ElementUIDemo.vue'

export default {
  name: 'App',
  data() {
    return {
      parentItemCount: 0,
      parentPageSize: 0,
      parentPageIndex: 0,
      test: 1
    }
  },
  components: {
 
    pageDemo3,
    ElementUIDemo
  },

  methods: {
    myMethod(data) {
      this.parentItemCount = data.itemCount
      this.parentPageSize = data.pageSize
      this.parentPageIndex = data.currentPageIndex
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<template>
  <div>
    <span>
      共 {{itemCount}} 條
      <select v-model="currentPageSize"
              @change="changePageSize">
        <option v-for="item in pageSizes"
                :key="item"
                :value="item">{{ item }}條/頁</option>
      </select>&nbsp;&nbsp;
      <!--【上一頁】上一頁標簽及v-if邏輯-->
      <a href="javascript:void(0)"
         class="pageItem"
         v-if="currentPageIndex > 1"
         @click="goPage(currentPageIndex-1)">&lt;</a>
      <span class="pageItem"
            v-if="currentPageIndex <= 1">&lt;</span>
      <!--【分頁數量】中間頁號標簽及v-for、v-if邏輯-->
      <span v-for="page in calPageCount"
            :key="page">
        <span class="pageItem spanItem "
              v-if="page === currentPageIndex">{{page}}</span>
        <a href="javascript:void(0)"
           class="pageItem"
           v-if="page !== currentPageIndex"
           @click="goPage(page)"
           :ref="'lnk_' + page">{{ page }}</a>
      </span>
      <!--【下一頁】下一頁標簽及v-if邏輯-->
      <a href="javascript:void(0)"
         class="pageItem"
         v-if="currentPageIndex < calPageCount"
         @click="toPage(currentPageIndex+1)">&gt;</a>
      <span class="pageItem"
            v-if="currentPageIndex >= calPageCount">&gt;</span>前往第
      <input type="text"
             v-model.number="goToIndex"
             style="width: 30px"
             @change="goToPage"
             onfocus="this.select()"/>頁
    </span>
  </div>
</template>


<script>
export default {
  name: "pageDemo3",
  props: {
    pageSize: Number,
    itemCount: Number
  },
  data() {
    return {
      pageSizes: [5, 10, 15, 20],
      currentPageSize: 5,
      currentPageIndex: 1,
      goToIndex:null
    };
  },
  created() {
    this.currentPageSize = this.pageSize;
  },
  computed: {
    //計算總頁數據,計算屬性
    calPageCount() {
      return Math.ceil(this.itemCount / this.currentPageSize);
    }
  },
  methods: {
    changePageSize() {
      this.currentPageIndex = 1;
    },
    callback() {
      let callbackData = {
        itemCount: this.itemCount,
        pageSize: this.currentPageSize,
        currentPageIndex: this.currentPageIndex
      };
      this.$emit("demo3-event", callbackData);
    },
    goPage(num) {
      this.currentPageIndex = num;
      //回調父組件事件
      this.callback();
      this.goToIndex = null
    },
    toPage(num) {
      this.currentPageIndex = num;
      //回調父組件事件
      this.callback();
      this.goToIndex = null
    },
    goToPage(){
      if (this.goToIndex < 1) {
        this.currentPageIndex = 1;
        this.goToIndex = 1
      }else if (this.goToIndex > this.calPageCount) {
        this.currentPageIndex = this.calPageCount;
        this.goToIndex = this.calPageCount;
      }else{
        this.currentPageIndex = this.goToIndex
      }
      //回調父組件事件
      this.callback();
    }
  }
};
</script>


<style>
.pageItem {
  margin-right: 1px;
  padding: 5px 5px 5px 5px;
}

.spanItem {
  color: blue;
}
</style>

<template>
    <div id="global">
        <span style="color:red; font-size:30px;">我是一個全局組件。</span>
    </div>
</template>
<script>
export default {
    name:'Global'
}
</script>

<template>
  <div id="element-ui-demo">
    <el-row>
      <el-button>默認按鈕</el-button>
      <el-button type="primary">主要按鈕</el-button>
      <el-button type="success">成功按鈕</el-button>
      <el-button type="info">信息按鈕</el-button>
      <el-button type="warning">警告按鈕</el-button>
      <el-button type="danger">危險按鈕</el-button>
    </el-row>

    <el-row>
      <el-button plain>樸素按鈕</el-button>
      <el-button type="primary" plain>主要按鈕</el-button>
      <el-button type="success" plain>成功按鈕</el-button>
      <el-button type="info" plain>信息按鈕</el-button>
      <el-button type="warning" plain>警告按鈕</el-button>
      <el-button type="danger" plain>危險按鈕</el-button>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "ElementUIDemo",
  data() {
    return {};
  },
};
</script>