102 lines
2.6 KiB
JavaScript
102 lines
2.6 KiB
JavaScript
import baseComponent from '../helpers/baseComponent'
|
|
import classNames from '../helpers/classNames'
|
|
|
|
baseComponent({
|
|
properties: {
|
|
prefixCls: {
|
|
type: String,
|
|
value: 'wux-pagination',
|
|
},
|
|
mode: {
|
|
type: String,
|
|
value: 'button',
|
|
},
|
|
defaultCurrent: {
|
|
type: Number,
|
|
value: 1,
|
|
},
|
|
current: {
|
|
type: Number,
|
|
value: 1,
|
|
observer(newVal) {
|
|
if (this.data.controlled) {
|
|
this.updated(newVal)
|
|
}
|
|
},
|
|
},
|
|
controlled: {
|
|
type: Boolean,
|
|
value: false,
|
|
},
|
|
total: {
|
|
type: Number,
|
|
value: 0,
|
|
},
|
|
simple: {
|
|
type: Boolean,
|
|
value: false,
|
|
},
|
|
},
|
|
data: {
|
|
activeIndex: 1,
|
|
},
|
|
computed: {
|
|
classes: ['prefixCls', function(prefixCls) {
|
|
const wrap = classNames(prefixCls)
|
|
const prev = `${prefixCls}__prev`
|
|
const button = `${prefixCls}__button`
|
|
const number = `${prefixCls}__number`
|
|
const active = `${prefixCls}__active`
|
|
const pointer = `${prefixCls}__pointer`
|
|
const dot = `${prefixCls}__dot`
|
|
const next = `${prefixCls}__next`
|
|
|
|
return {
|
|
wrap,
|
|
prev,
|
|
button,
|
|
number,
|
|
active,
|
|
pointer,
|
|
dot,
|
|
next,
|
|
}
|
|
}],
|
|
},
|
|
methods: {
|
|
updated(activeIndex) {
|
|
if (this.data.activeIndex !== activeIndex) {
|
|
this.setData({
|
|
activeIndex,
|
|
})
|
|
}
|
|
},
|
|
onChange(current, type) {
|
|
if (!this.data.controlled) {
|
|
this.updated(current)
|
|
}
|
|
|
|
this.triggerEvent('change', {
|
|
current,
|
|
type,
|
|
})
|
|
},
|
|
onPrev() {
|
|
const current = this.data.activeIndex - 1
|
|
this.onChange(current, 'prev')
|
|
this.triggerEvent('prev', { current })
|
|
},
|
|
onNext() {
|
|
const current = this.data.activeIndex + 1
|
|
this.onChange(current, 'next')
|
|
this.triggerEvent('next', { current })
|
|
},
|
|
},
|
|
attached() {
|
|
const { defaultCurrent, current, controlled } = this.data
|
|
const activeIndex = controlled ? current : defaultCurrent
|
|
|
|
this.updated(activeIndex)
|
|
},
|
|
})
|