vue中element-ui組件的使用

element-ui  Element，一套爲開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端組件庫

（1）通過npm安裝：

npm install element-ui --save-dev

（2）完整引入，全局配置：

在main.js中引入：

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Element, {size: 'small', zIndex: 3000})

下面說一下提示框與分頁組件的用法：

1.Message消息提示

this.$message({
  message: data.message, // 提示信息
  center: true, // 文字是否居中
  type: 'success', // 提示框樣式，有：消息、成功('success')、警告('warning')、錯誤('error')
  duration: 3000 // 顯示時間，默認爲3000ms  
})

2.Pagination分頁

在父組件，通過vue的.snyc修飾符，實現page的雙向綁定。例如：<v-pagination :page.sync="page"></v-pagination>

<template>
  <div class="pagination">
    <el-pagination
      background // 是否爲分頁按鈕添加背景色
      :pager-count="11" // 頁碼按鈕的數量，當總頁數超過該值時會摺疊
      layout="prev, pager, next"
      @current-change="currentChange" // 頁面發生變化時觸發
      :total="totalNum">
    </el-pagination>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: ['total'],
    computed: {
      totalNum() {
        return Number(this.total)
      }
    },
    methods: {
      currentChange(page) {
        // 獲取當前page,並傳給父組件
        this.$emit('update:page', page)
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .pagination
    text-align: center
    margin-top: 30px
</style>