You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
841 B
42 lines
841 B
7 years ago
|
<template>
|
||
|
|
<li
|
||
|
|
:class="classes"
|
||
|
|
@click="handleClick"
|
||
|
|
@keyPress="handleKeyPress"
|
||
|
|
:title="showTitle ? 'page' : null">
|
||
|
|
<a>{{page}}</a>
|
||
|
|
</li>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'Page',
|
||
|
|
props: {
|
||
|
|
rootPrefixCls: String,
|
||
|
|
page: Number,
|
||
|
|
active: Boolean,
|
||
|
|
showTitle: Boolean,
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
classes () {
|
||
|
|
const prefixCls = `${this.rootPrefixCls}-item`
|
||
|
|
let cls = `${prefixCls} ${prefixCls}-${this.page}`
|
||
|
|
if (this.active) {
|
||
|
|
cls = `${cls} ${prefixCls}-active`
|
||
|
|
}
|
||
|
|
if (this.className) {
|
||
|
|
cls = `${cls} ${this.className}`
|
||
|
|
}
|
||
|
|
return cls
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleClick () {
|
||
|
|
this.$emit('click', this.page)
|
||
|
|
},
|
||
|
|
handleKeyPress (event) {
|
||
|
|
this.$emit('keyPress', event, this.handleClick, this.page)
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|