Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use the Vue left and right sliding button group components. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

The details are as follows

Left and right two arrow control button group to move left and right, double-click to the left or right, the function is relatively simple. As shown below

{{resetName (item.name)}} {{item.name}} import $from 'jquery'export default {props: {buttonData: {type: Array Default: () = > {return []}}, buttonWidth: {type: Number, default: 62}}, data () {return {clickIndex: 0, currentSite: 0, showCount: 0, clickTimer: null }}, watch: {}, created () {/ / this.setButtons ()}, mounted () {this.$nextTick (() = > {this.showCount = parseInt (this.$refs.buttonBody.$el.clientWidth / this.buttonWidth) / / a line can display several buttons})})} Methods: {/ / set the name resetName (val) {let I = parseInt (this.buttonWidth / 12)-1 If (val & & val.length > I) {return val.slice (0, I)} else {return val}} / / Click to move moveButtons (val) {if (this.clickTimer) {window.clearTimeout (this.clickTimer) this.clickTimer = null} this.clickTimer = window.setTimeout () = > {this.$nextTick (() = > {if (val = =) 'left') {if (this.currentSite

< 0) { this.currentSite = this.currentSite + this.buttonWidth } } else { const totalCount = this.buttonData.length // 总共几个按钮 const showIndex = -parseInt(this.currentSite / this.buttonWidth) // 向左移了几个按钮 console.log(totalCount, 'totalLength', this.showCount, showIndex) if (showIndex + this.showCount < totalCount) { this.currentSite = this.currentSite - this.buttonWidth } } $('#buttonRow').animate({ marginLeft: this.currentSite + 'px' }) }) }, 300) }, // 双击到边 moveSide (val) { if (this.clickTimer) { window.clearTimeout(this.clickTimer) this.clickTimer = null } this.$nextTick(() =>

{if (val = = 'left') {this.currentSite = 0} else {const totalCount = this.buttonData.length / / A total of several buttons if (totalCount > this.showCount) {this.currentSite =-((totalCount-this.showCount) * this .uploonWidth)} $('# buttonRow') .animate ({marginLeft: this.currentSite + 'px'})}) SetButtons (data) {this.buttonData = data}, resetData (index, data) {this.clickIndex = index this.$emit ('resetData', data)}}. DemoButtons {width: 100% Height: 100%;}. ButtonF {width: 100%; margin: 0 auto; height: 30px; line-height: 30px;} .lableI {height: 30px; line-height: 30px; width: 20px; cursor: pointer;}. ButtonBody {overflow: hidden; height: 30px; line-height: 30px; width: calc (100%-40px); white-space: nowrap;}. El-tag {text-align: center Padding: 0px 8px! important; height: 28px; line-height: 28px; cursor: pointer; border-radius: 0px! important; overflow: hidden; font-size: 12px } this is the end of the article on "how to use Vue left and right sliding button group components". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.