Vue-smart-pagination add demo-version

Author: grinmaxsite@yandex.ru

src/App.vue

@@ -22,6 +22,7 @@
  <div class="buttons">
  <button @click="maxButtons3()">Количество кнопок 3</button>
  <button @click="maxButtons5()">Количество кнопок 5</button>
+ <button @click="buttonsStyle1()">Вид кнопок 1</button>
  </div>
  <div class="spinner">
  <button @click="spinnerShow()">Показать спиннер</button>
@@ -84,7 +85,21 @@ export default {
  ],
  PaginationControlSettings: {
  buttonsSettings: {
- maxButtons: 5
+ maxButtons: 5,
+ allPageButtonsStyle: {
+ 'background': '',
+ 'borderColor': '',
+ 'color': '',
+ 'backgroundHover': '',
+ 'borderColorHover': '',
+ 'colorHover': '',
+ 'fontFamily': ''
+ },
+ currentPageButtonStyle: {
+ 'backgroundActive': '',
+ 'borderColorActive': '',
+ 'colorActive': ''
+ }
  },
  arrowsSettings: {
  hideArrows: false,
@@ -119,6 +134,11 @@ export default {
  maxButtons5: function (e) {
  this.settings.PaginationControlSettings.buttonsSettings.maxButtons = 5
  },
+ buttonsStyle1: function (e) {
+ console.log(this.settings.PaginationControlSettings.buttonsSettings.allPageButtonsStyle.background)
+ this.settings.PaginationControlSettings.buttonsSettings.allPageButtonsStyle.background = '#000'
+ this.settings.PaginationControlSettings.buttonsSettings.allPageButtonsStyle.borderColor = '#000'
+ },
  arrowShow: function (e) {
  this.settings.PaginationControlSettings.arrowsSettings.hideArrows = false
  },

src/components/PaginationControl.vue

@@ -286,33 +286,40 @@ export default {
  }
  }
  }
+ },
+ rootColor: function () {
+ let root = document.querySelector(':root')
+ if (this.def.buttonsSettings.controlStyle === 'square') {
+ root.style.setProperty('--controlStyle', '0')
+ } else if (this.def.buttonsSettings.controlStyle === 'circle') {
+ root.style.setProperty('--controlStyle', '50%')
+ } else {
+ root.style.setProperty('--controlStyle', '4px')
+ }
+ root.style.setProperty('--pageButtonsBackground', this.def.buttonsSettings.allPageButtonsStyle.background)
+ root.style.setProperty('--pageButtonsBorderColor', this.def.buttonsSettings.allPageButtonsStyle.borderColor)
+ root.style.setProperty('--pageButtonsColor', this.def.buttonsSettings.allPageButtonsStyle.color)
+ root.style.setProperty('--pageButtonsFontFamily', this.def.buttonsSettings.allPageButtonsStyle.fontFamily)
+ root.style.setProperty('--pageButtonsBackgroundHover', this.def.buttonsSettings.allPageButtonsStyle.backgroundHover)
+ root.style.setProperty('--pageButtonsBorderColorHover', this.def.buttonsSettings.allPageButtonsStyle.borderColorHover)
+ root.style.setProperty('--pageButtonsColorHover', this.def.buttonsSettings.allPageButtonsStyle.colorHover)
+ root.style.setProperty('--pageButtonBackgroundActive', this.def.buttonsSettings.currentPageButtonStyle.backgroundActive)
+ root.style.setProperty('--pageButtonBorderColorActive', this.def.buttonsSettings.currentPageButtonStyle.borderColorActive)
+ root.style.setProperty('--pageButtonColorActive', this.def.buttonsSettings.currentPageButtonStyle.colorActive)
+ root.style.setProperty('--controlDotsColor', this.def.dotsSettings.controlDotsColor)
+ root.style.setProperty('--arrowStyleColorHover', this.def.arrowsSettings.arrowStyleColorHover)
  }
  },
  beforeMount () {
  document.addEventListener('keydown', this.keydown)
- console.log(this.def.pageStarted)
  this.curIndex = this.def.pageStarted - 1
  this.$set(this.settings.array_data[this.curIndex], 'active', true)
- let root = document.querySelector(':root')
- if (this.def.buttonsSettings.controlStyle === 'square') {
- root.style.setProperty('--controlStyle', '0')
- } else if (this.def.buttonsSettings.controlStyle === 'circle') {
- root.style.setProperty('--controlStyle', '50%')
- } else {
- root.style.setProperty('--controlStyle', '4px')
+ this.rootColor()
+ },
+ watch: {
+ 'def': function (oldVal, newVal) {
+ this.rootColor()
  }
- root.style.setProperty('--pageButtonsBackground', this.def.buttonsSettings.allPageButtonsStyle.background)
- root.style.setProperty('--pageButtonsBorderColor', this.def.buttonsSettings.allPageButtonsStyle.borderColor)
- root.style.setProperty('--pageButtonsColor', this.def.buttonsSettings.allPageButtonsStyle.color)
- root.style.setProperty('--pageButtonsFontFamily', this.def.buttonsSettings.allPageButtonsStyle.fontFamily)
- root.style.setProperty('--pageButtonsBackgroundHover', this.def.buttonsSettings.allPageButtonsStyle.backgroundHover)
- root.style.setProperty('--pageButtonsBorderColorHover', this.def.buttonsSettings.allPageButtonsStyle.borderColorHover)
- root.style.setProperty('--pageButtonsColorHover', this.def.buttonsSettings.allPageButtonsStyle.colorHover)
- root.style.setProperty('--pageButtonBackgroundActive', this.def.buttonsSettings.currentPageButtonStyle.backgroundActive)
- root.style.setProperty('--pageButtonBorderColorActive', this.def.buttonsSettings.currentPageButtonStyle.borderColorActive)
- root.style.setProperty('--pageButtonColorActive', this.def.buttonsSettings.currentPageButtonStyle.colorActive)
- root.style.setProperty('--controlDotsColor', this.def.dotsSettings.controlDotsColor)
- root.style.setProperty('--arrowStyleColorHover', this.def.arrowsSettings.arrowStyleColorHover)
  }
 }
 </script>