vue的竖状分页组件

借鉴于 vue实现简单分页效果_吃葡萄不吐葡萄皮嘻嘻的博客-CSDN博客_vue 分页样式

为啥要写这个详见element ui dialog 弹出框 加载严重卡顿 弹出 大概需要两三秒 表格卡顿严重_你好,我叫A某人的博客-CSDN博客

修改其样式,及bug

<!--  -->
<template>
    <div id="app">
        <div class="wrapper flex">
            <button
                type="text"
                class="pre"
                @click="prePage"
                :disabled="currentPage == 1"
                :class="currentPage == 1 ? 'notAllowed' : ''"
            >
                <i class="el-icon-arrow-up"></i>
            </button>
            <ul class="flex">
                <li
                    :class="{ active: size == currentPage }"
                    v-for="(size, index) in changePageStyle"
                    :key="index"
                    @click="changeSize(size)"
                >
                    {{ size }}
                </li>
            </ul>
            <button
                type="text"
                class="next"
                @click="nextPage"
                :disabled="currentPage >= totalPage"
                :class="currentPage >= totalPage ? 'notAllowed' : ''"
            >
                <i class="el-icon-arrow-down"></i>
            </button>
            <div class="smallInput mt10">
                <div class="mt5">前</div>
                <div class="mt5">往</div>
                <input
                    class="mt5"
                    type="text"
                    v-model="num"
                    onInput="value = value.replace(/[^\d]/g,'')"
                    @change="getnum(num)"
                />
                <div class="mt5">页</div>

                <div class="mt20">共</div>
                <div class="mt5">
                    {{ totalPage }}
                </div>
                <div class="mt5">条</div>
            </div>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        return {
            totalPage: 15, //总条数
            currentPage: 1, //当前页面
            num: "",
        };
    },
    created() {},
    methods: {
        changeSize(size) {
            console.log(size);
            if (typeof size == "number") {
                this.currentPage = size;
            }
        },

        //获取跳转页码,进行跳转操作
        getnum(num) {
            this.currentPage = Number(num);
        },
        prePage() {
            this.currentPage--;
        },
        nextPage() {
            this.currentPage++;
        },
    },
    computed: {
        changePageStyle() {
            var n = this.totalPage,
                s = this.currentPage;
            // console.log(n, s);
            if (n < 10) {
                return n;
            }

            if (s <= 3) {
                return [1, 2, 3, 4, 5, "...", n];
            } else if (s > 3 && s < n - 3) {
                return [1, "...", s - 2, s - 1, s, s + 1, s + 2, "...", n];
            } else {
                return [1, "...", n - 4, n - 3, n - 2, n - 1, n];
            }
        },
    },

    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    color: #666666;
}

.wrapper {
    width: 50px;
    margin: 10px auto;
}

.wrapper li,
.pre,
.next {
    width: 32px;
    height: 32px;
    border-radius: 2px;
    line-height: 32px;
    text-align: center;
    /* border: 1px solid #eee; */
    margin-bottom: 4px;
    /* cursor: pointer;
    background: #f4f4f5; */
    user-select: none;
}
.pre,
.next {
    font-size: 16px;
    /* font-weight: bold; */
}
.wrapper .active {
    /* background: #409eff; */
    color: #409eff;
}
button {
    border: 0;
    background: #00000000;
}

.notAllowed {
    /* cursor: no-drop; */
    cursor: not-allowed;
}

.smallInput {
    text-align: center;
}

.smallInput input {
    text-align: center;
    border-style: #eeeeee;
    border-radius: 10px;
    width: 20px;
    height: 20px;
}
</style>