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>