搜索条件过多时，点击左右箭头滑动内容

前提：

因为平时做项目的时候，一个简单的界面，搜索条件很多，然后屏幕缩小的时候，那些搜索条件就会滑下来，会显得界面很不美观。于是就自己加了左右的箭头，内容过多的时候可以点击箭头，显示内容。

代码：

也不是很难的东西，就不解释那么多啦！直接放代码

HTML：

<i class="el-icon-arrow-left" @mousedown="scrollLeft" @mouseup="clearLeft" v-show="left"></i>
<el-form :inline="true" :model="oneForm" id="form" class="form" size="mini"></el-form>
<i class="el-icon-arrow-right" @mousedown="scrollRight" @mouseup="clearRight" v-show="right"></i>

js：

 data() {
    return {
	    left: false,
            right: false,
	}
 },
 <!--可以一开始就显示，我设置false是判断屏幕宽度变小，然后内容显示不全的时候，才先显示左右箭头的-->
 
    methods: {
	    scrollLeft(e) {
                let form;
                if (form) {
                    this.timeLeft = setInterval(() => {
                        form.scrollLeft -= 10
                        if (form.scrollLeft == 0) {
                            this.clearLeft();
                        }
                    }, 50);
                }
			},
	    scrollRight(e) {
                let form;
                if (form) {
                    this.timeRight = setInterval(() => {
                        form.scrollLeft += 10;
                        if (form.scrollWidth == form.clientWidth + form.scrollLeft) {
                            this.clearRight();
                        }
                    }, 50);
                }
            },
	    clearRight() {
                clearInterval(this.timeRight)
            },
            clearLeft() {
                clearInterval(this.timeLeft)
			}
        },
        
     mounted() {
            let form;
            if (form) {
                if (form.scrollWidth > form.clientWidth) {
                    this.right = true;
                    this.left = true
                }
            }
        },

效果图：