index.js 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. import baseComponent from '../helpers/baseComponent'
  2. import classNames from '../helpers/classNames'
  3. baseComponent({
  4. properties: {
  5. prefixCls: {
  6. type: String,
  7. value: 'wux-pagination',
  8. },
  9. mode: {
  10. type: String,
  11. value: 'button',
  12. },
  13. defaultCurrent: {
  14. type: Number,
  15. value: 1,
  16. },
  17. current: {
  18. type: Number,
  19. value: 1,
  20. observer(newVal) {
  21. if (this.data.controlled) {
  22. this.updated(newVal)
  23. }
  24. },
  25. },
  26. controlled: {
  27. type: Boolean,
  28. value: false,
  29. },
  30. total: {
  31. type: Number,
  32. value: 0,
  33. },
  34. simple: {
  35. type: Boolean,
  36. value: false,
  37. },
  38. },
  39. data: {
  40. activeIndex: 1,
  41. },
  42. computed: {
  43. classes() {
  44. const { prefixCls } = this.data
  45. const wrap = classNames(prefixCls)
  46. const prev = `${prefixCls}__prev`
  47. const button = `${prefixCls}__button`
  48. const number = `${prefixCls}__number`
  49. const active = `${prefixCls}__active`
  50. const pointer = `${prefixCls}__pointer`
  51. const dot = `${prefixCls}__dot`
  52. const next = `${prefixCls}__next`
  53. return {
  54. wrap,
  55. prev,
  56. button,
  57. number,
  58. active,
  59. pointer,
  60. dot,
  61. next,
  62. }
  63. },
  64. },
  65. methods: {
  66. updated(activeIndex) {
  67. if (this.data.activeIndex !== activeIndex) {
  68. this.setData({
  69. activeIndex,
  70. })
  71. }
  72. },
  73. onChange(current, type) {
  74. if (!this.data.controlled) {
  75. this.updated(current)
  76. }
  77. this.triggerEvent('change', {
  78. current,
  79. type,
  80. })
  81. },
  82. onPrev() {
  83. this.onChange(this.data.activeIndex - 1, 'prev')
  84. },
  85. onNext() {
  86. this.onChange(this.data.activeIndex + 1, 'next')
  87. },
  88. },
  89. attached() {
  90. const { defaultCurrent, current, controlled } = this.data
  91. const activeIndex = controlled ? current : defaultCurrent
  92. this.updated(activeIndex)
  93. },
  94. })