当内容横向超出时，内容左右两边出现按钮提供滚动，并且滚动条不显示

基本使用

<template>
    <yb-scroll-tool>
        <el-button type="primary" size="medium">执行按钮</el-button>
        <el-button type="primary">批量删除按钮</el-button>
        <el-button type="primary">批量审核按钮</el-button>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
        <el-button type="primary">
            上传
            <i class="el-icon-upload el-icon--right"></i>
        </el-button>
        <el-button-group>
            <el-button type="primary" icon="el-icon-arrow-left">
                上一页
            </el-button>
            <el-button type="primary">
                下一页
                <i class="el-icon-arrow-right el-icon--right"></i>
            </el-button>
        </el-button-group>
        <el-button-group>
            <el-button type="primary" icon="el-icon-edit"></el-button>
            <el-button type="primary" icon="el-icon-share"></el-button>
            <el-button type="primary" icon="el-icon-delete"></el-button>
        </el-button-group>
        <el-button round>圆角按钮</el-button>
        <el-button type="primary" round>主要按钮</el-button>
        <el-button type="success" round>成功按钮</el-button>
        <el-button type="info" round>信息按钮</el-button>
        <el-button type="warning" round>警告按钮</el-button>
        <el-button type="danger" round size="medium">危险按钮</el-button>
    </yb-scroll-tool>
</template>

显示 复制 复制

设置步长

• step 设置为 '20px'或者 20，每次点击滚动 20px
• step 设置为 '20%'，每次点击滚动内容宽度的 20%

<template>
    <yb-scroll-tool :step="20">
        <el-button type="primary" size="medium">执行按钮</el-button>
        <el-button type="primary">批量删除按钮</el-button>
        <el-button type="primary">批量审核按钮</el-button>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
        <el-button type="primary">
            上传
            <i class="el-icon-upload el-icon--right"></i>
        </el-button>
        <el-button-group>
            <el-button type="primary" icon="el-icon-arrow-left">
                上一页
            </el-button>
            <el-button type="primary">
                下一页
                <i class="el-icon-arrow-right el-icon--right"></i>
            </el-button>
        </el-button-group>
        <el-button-group>
            <el-button type="primary" icon="el-icon-edit"></el-button>
            <el-button type="primary" icon="el-icon-share"></el-button>
            <el-button type="primary" icon="el-icon-delete"></el-button>
        </el-button-group>
        <el-button round>圆角按钮</el-button>
        <el-button type="primary" round>主要按钮</el-button>
        <el-button type="success" round>成功按钮</el-button>
        <el-button type="info" round>信息按钮</el-button>
        <el-button type="warning" round>警告按钮</el-button>
        <el-button type="danger" round size="medium">危险按钮</el-button>
    </yb-scroll-tool>
</template>

显示 复制 复制

resize方法

组件内部会监听内容盒子宽度变化自动重新计算是否显示左右按钮，如果需要手动触发，可以调用组件的resize方法

• scrollToLeft：是否滚动至最左边
• scrollToRight：是否滚动至最右边
• 若 scrollToLeft 设置为 true，则 scrollToRight 设置不生效

scrollToLeft

scrollToRight

标签1 标签2 标签3 标签4 标签5 标签6 标签7 标签8 标签9 标签10 标签11 标签12 标签13 标签14 标签15

<template>
    <div style="margin-bottom:20px">
        scrollToLeft
        <el-switch v-model="scrollToLeft"></el-switch>
        scrollToRight
        <el-switch v-model="scrollToRight"></el-switch>
    </div>
    <yb-scroll-tool ref="tool">
        <el-tag
            :key="tag"
            v-for="tag in dynamicTags"
            closable
            style="margin: 0 5px"
            @close="handleClose(tag)"
        >
            {{tag}}
        </el-tag>
        <template v-slot:left="{ disabled }">
            <i class="el-icon-back" :class="{disabled}"></i>
        </template>
        <template v-slot:right="{ disabled }">
            <i class="el-icon-right" :class="{disabled}"></i>
        </template>
    </yb-scroll-tool>
</template>
<script>
    export default {
        data() {
            return {
                scrollToLeft: false,
                scrollToRight: false,
                dynamicTags: Array(15)
                    .fill()
                    .map((item, index) => {
                        return `标签${index + 1}`;
                    }),
            };
        },
        methods: {
            handleClose(tag) {
                this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
                // 由于 el-tag 关闭存在动画，因此需要延迟调用 resize 方法
                setTimeout(() => {
                    this.$refs.tool.resize({
                        scrollToLeft: this.scrollToLeft,
                        scrollToRight: this.scrollToRight,
                    });
                }, 400);
            },
        },
    };
</script>

显示 复制 复制

YbScrollTool Attributes

参数	说明	类型	可选值	默认值
step	滚动步长	string | number	--	'50%'

YbScrollTool Slots

name	说明
default	显示内容插槽

YbScrollTool Scoped Slots

name	说明
left	左边指示器插槽，参数：{ disabled }
right	右边指示器插槽，参数：{ disabled }

YbScrollTool Events

name	说明	参数
resize	重新计算滚动宽度	{ scrollToLeft, scrollToRight }