经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Vue可左右滑动按钮组组件使用详解
来源:jb51  时间:2022/2/28 8:51:18  对本文有异议

本文实例为大家分享了基于Vue可左右滑动按钮组组件,供大家参考,具体内容如下

左右两箭头控制按钮组左右移动,双击到最左或最右边,功能比较简单。如下所示

  1. <template>
  2. ?? ?<div class="demoButtons">
  3. ?? ??? ?<div class="buttonF">
  4. ?? ??? ??? ?<el-row style="height:30px ">
  5. ?? ??? ??? ??? ?<el-col class="lableI"><i class="el-icon-arrow-left " @click="moveButtons('left')" @dblclick="moveSide('left')" /></el-col>
  6. ?? ??? ??? ??? ?<el-col ref="buttonBody" class="buttonBody">
  7. ?? ??? ??? ??? ??? ?<el-row id="buttonRow" ref="buttonRow">
  8. ?? ??? ??? ??? ??? ??? ?<el-tag :style="{'width':buttonWidth+'px'}" v-for="(item, index) in buttonData" :key="index" :type="index == clickIndex ? '' : 'info'" @click="resetData(index, item)">
  9. ?? ??? ??? ??? ??? ??? ??? ?<el-tooltip v-if="item.name && item.name.length > ?parseInt(buttonWidth/12) - 1" placement="top" :content="item.name" effect="light">
  10. ?? ??? ??? ??? ??? ??? ??? ??? ?<span>{{ ?resetName(item.name) }}</span>
  11. ?? ??? ??? ??? ??? ??? ??? ?</el-tooltip>
  12. ?? ??? ??? ??? ??? ??? ??? ?<span v-else>{{ item.name }}</span>
  13. ?? ??? ??? ??? ??? ??? ?</el-tag>
  14. ?? ??? ??? ??? ??? ?</el-row>
  15. ?? ??? ??? ??? ?</el-col>
  16. ?? ??? ??? ??? ?<el-col class="lableI"><i class="el-icon-arrow-right " @click="moveButtons('right')" @dblclick="moveSide('right')" /></el-col>
  17. ?? ??? ??? ?</el-row>
  18. ?? ??? ?</div>
  19. ?? ?</div>
  20. </template>
  21. <script>
  22. import $ from 'jquery'
  23. export default {
  24. ?? ?props: {
  25. ?? ??? ?buttonData: {
  26. ?? ??? ??? ?type: Array,
  27. ?? ??? ??? ?default: () => {
  28. ?? ??? ??? ??? ?return []
  29. ?? ??? ??? ?}
  30. ?? ??? ?},
  31. ?? ??? ?buttonWidth: {
  32. ?? ??? ??? ?type: Number,
  33. ?? ??? ??? ?default: 62
  34. ?? ??? ?}
  35. ?? ?},
  36. ?? ?data () {
  37. ?? ??? ?return {
  38. ?? ??? ??? ?clickIndex: 0,
  39. ?? ??? ??? ?currentSite: 0,
  40. ?? ??? ??? ?showCount: 0,
  41. ?? ??? ??? ?clickTimer: null,
  42. ?? ??? ?}
  43. ?? ?},
  44. ?? ?watch: {},
  45. ?? ?created () {
  46. ?? ??? ?// this.setButtons()
  47. ?? ?},
  48. ?? ?mounted () {
  49. ?? ??? ?this.$nextTick(() => {
  50. ?? ??? ??? ?this.showCount = parseInt(this.$refs.buttonBody.$el.clientWidth / this.buttonWidth) // 一行能展示几个按钮
  51. ?? ??? ?})
  52. ?? ?},
  53.  
  54. ?? ?methods: {
  55. ?? ??? ?//设置名字
  56. ?? ??? ?resetName (val) {
  57. ?? ??? ??? ?let i = parseInt(this.buttonWidth / 12) - 1;
  58. ?? ??? ??? ?if (val && val.length > i) {
  59. ?? ??? ??? ??? ?return val.slice(0, i)
  60. ?? ??? ??? ?} else {
  61. ?? ??? ??? ??? ?return val
  62. ?? ??? ??? ?}
  63. ?? ??? ?},
  64. ?? ??? ?// 单击移一格
  65. ?? ??? ?moveButtons (val) {
  66. ?? ??? ??? ?if (this.clickTimer) {
  67. ?? ??? ??? ??? ?window.clearTimeout(this.clickTimer)
  68. ?? ??? ??? ??? ?this.clickTimer = null
  69. ?? ??? ??? ?}
  70. ?? ??? ??? ?this.clickTimer = window.setTimeout(() => {
  71. ?? ??? ??? ??? ?this.$nextTick(() => {
  72. ?? ??? ??? ??? ??? ?if (val == 'left') {
  73. ?? ??? ??? ??? ??? ??? ?if (this.currentSite < 0) {
  74. ?? ??? ??? ??? ??? ??? ??? ?this.currentSite = this.currentSite + this.buttonWidth
  75. ?? ??? ??? ??? ??? ??? ?}
  76. ?? ??? ??? ??? ??? ?} else {
  77. ?? ??? ??? ??? ??? ??? ?const totalCount = this.buttonData.length // 总共几个按钮
  78. ?? ??? ??? ??? ??? ??? ?const showIndex = -parseInt(this.currentSite / this.buttonWidth) // 向左移了几个按钮
  79. ?? ??? ??? ??? ??? ??? ?console.log(totalCount, 'totalLength', this.showCount, showIndex)
  80. ?? ??? ??? ??? ??? ??? ?if (showIndex + this.showCount < totalCount) {
  81. ?? ??? ??? ??? ??? ??? ??? ?this.currentSite = this.currentSite - this.buttonWidth
  82. ?? ??? ??? ??? ??? ??? ?}
  83. ?? ??? ??? ??? ??? ?}
  84. ?? ??? ??? ??? ??? ?$('#buttonRow').animate({ marginLeft: this.currentSite + 'px' })
  85. ?? ??? ??? ??? ?})
  86. ?? ??? ??? ?}, 300)
  87. ?? ??? ?},
  88. ?? ??? ?// 双击到边
  89. ?? ??? ?moveSide (val) {
  90. ?? ??? ??? ?if (this.clickTimer) {
  91. ?? ??? ??? ??? ?window.clearTimeout(this.clickTimer)
  92. ?? ??? ??? ??? ?this.clickTimer = null
  93. ?? ??? ??? ?}
  94. ?? ??? ??? ?this.$nextTick(() => {
  95. ?? ??? ??? ??? ?if (val == 'left') {
  96. ?? ??? ??? ??? ??? ?this.currentSite = 0
  97. ?? ??? ??? ??? ?} else {
  98. ?? ??? ??? ??? ??? ?const totalCount = this.buttonData.length // 总共几个按钮
  99. ?? ??? ??? ??? ??? ?if (totalCount > this.showCount) {
  100. ?? ??? ??? ??? ??? ??? ?this.currentSite = -((totalCount - this.showCount) * this.buttonWidth)
  101. ?? ??? ??? ??? ??? ?}
  102. ?? ??? ??? ??? ?}
  103. ?? ??? ??? ??? ?$('#buttonRow').animate({ marginLeft: this.currentSite + 'px' })
  104. ?? ??? ??? ?})
  105. ?? ??? ?},
  106.  
  107. ?? ??? ?setButtons (data) {
  108. ?? ??? ??? ?this.buttonData = data
  109. ?? ??? ?},
  110. ?? ??? ?resetData (index, data) {
  111. ?? ??? ??? ?this.clickIndex = index
  112. ?? ??? ??? ?this.$emit('resetData', data)
  113. ?? ??? ?}
  114. ?? ?}
  115. }
  116. </script>
  117. <style lang="scss" scoped>
  118. .demoButtons {
  119. ?? ?width: 100%;
  120. ?? ?height: 100%;
  121. }
  122. .buttonF {
  123. ?? ?width: 100%;
  124. ?? ?margin: 0 auto;
  125. ?? ?height: 30px;
  126. ?? ?line-height: 30px;
  127. }
  128. .lableI {
  129. ?? ?height: 30px;
  130. ?? ?line-height: 30px;
  131. ?? ?width: 20px;
  132. ?? ?cursor: pointer;
  133. }
  134. .buttonBody {
  135. ?? ?overflow: hidden;
  136. ?? ?height: 30px;
  137. ?? ?line-height: 30px;
  138. ?? ?width: calc(100% - 40px);
  139. ?? ?white-space: nowrap;
  140. }
  141.  
  142. .el-tag {
  143. ?? ?text-align: center;
  144. ?? ?padding: 0px 8px !important;
  145. ?? ?height: 28px;
  146. ?? ?line-height: 28px;
  147. ?? ?cursor: pointer;
  148. ?? ?border-radius: 0px !important;
  149. ?? ?overflow: hidden;
  150. ?? ?font-size: 12px;
  151. }
  152. </style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号