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>