大家好今天的內容是`基於vue3實現自己的元件庫`系列第二章,本文預設你會安裝和建立vue3專案，如果不會請參考[vue官網](https://link.juejin.cn/?target=https%3A%2F%2Fv3.cn.vuejs.org%2Fguide%2Finstallation.html "https://v3.cn.vuejs.org/guide/installation.html")；

### Pagination.vue Template

- `v-select 元件可以先註釋掉`
- `v-input 元件可以先註釋掉`

```
<div class="v-pagination">
    <div v-for="(item, index) in layout" :key="index">
        <div class="v-pagination-select-box" v-if="item === "switch"">
            <v-select v-model="activePageSize" :options="pageSizes" :disabled="disabled">
            </v-select>
        </div>
        <v-pages v-if="item === "pages"" ref="cpages" :total="total" :pagercount="pagerCount" :pagesize="pageSize" v-model="cCurrentPage" :prependtext="prependText" :suffixtext="suffixText" :hideonsinglepage="hideOnSinglePage" :disabled="disabled" :background="background"></v-pages>
        <div :class="["v-pagination-input-box", { disabled }]" v-if="item === "jump"">
            <span>前往</span>
            <v-input placeholder="" :disabled="disabled" v-model="jumpValue"></v-input>
            <span>頁</span>
        </div>
    </div>
</div>
```

### Pagination.vue Script

```
import VairPagination from '../../types/pagination';
import vPages from './components/Pages';
import vSelect from '../Select/Select';
import vInput from '../Input/Input';
import { ref, computed, watchEffect, watch } from 'vue';
export default {
    name: 'pagination',
    components: {
        vPages,
        vSelect,
        vInput
    },
    props: VairPagination,
    setup (props, ctx) {
        const reg = /^\+?[1-9][0-9]*$/;
        const activePageSize = ref('');
        const oldJumpValue = ref(props.currentPage);
        const jumpValue = ref(props.currentPage);
        const cCurrentPage = ref(props.currentPage);
        const cpages = ref(null);

const handleSizeChange = (option) => {
            ctx.emit('size-change', option.number);
        };

const handlePrevClick = (index) => {
            ctx.emit('prev-click', index);
            setJumpValue();
        };

const handleNextClick = (index) => {
            ctx.emit('next-click', index);
            setJumpValue();
        };

watchEffect(() => {
            activePageSize.value = pageSizes.value[0].label;
        });

watchEffect(() => {
            if (!reg.test(props.pagerCount) || props.pagerCount < 7 || props.pagerCount > 21) {
                throw new TypeError(`pager-count value of can only be an integer greater than or equal to 7 and less than or equal to 21, but received a ${props.pagerCount}`);
            }
        });

watchEffect(() => {
            if (!reg.test(props.pageSize)) {
                throw new Error('pager-size It has to be an integer greater than or equal to 1');
            }
        });

watch(() => props.pageSize, () => {
            setJumpValue();
        });

watchEffect(() => {
            if (!reg.test(props.currentPage)) {
                throw new Error('current-page It has to be an integer greater than or equal to 1');
            } else {
                cCurrentPage.value = props.currentPage;
            }
        });

watchEffect(() => {
            if (typeof props.total !== 'number' || props.total < 0) {
                throw new Error('total must be a number greater than or equal to 0');
            }
        });

watchEffect(() => {
            ctx.emit('current-change', cCurrentPage.value);
            setJumpValue();
        });

return {
            handleSizeChange,
            handlePrevClick,
            handleNextClick,
            handleInput,
            handleChange,
            pageSizes,
            activePageSize,
            jumpValue,
            cCurrentPage,
            cpages
        }
    }
}
```

### Pagination.vue Props

```
const VairPagination = {
    background: { // 是否開啟背景色
        type: Boolean,
        default: () => {
            return false;
        }
    },
    pageSize: { // 每頁顯示幾條資料
        type: Number,
        default: () => {
            return 10;
        }
    },
    total: { // 資料總數量
        type: Number,
        default: () => {
            return 0;
        }
    },
    pagerCount: { // 當總頁數超過該值時會開啟摺疊 最低為 7
        type: Number,
        default: () => {
            return 7;
        }
    },
    pageSizes: { // 每頁顯示個數選擇器的選項
        type: Array,
        default: () => {
            return [10, 20, 30, 40, 50, 100];
        }
    },
    prependText: { // 後退按鈕文字
        type: String,
        default: () => {
            return '';
        }
    },
    suffixText: { // 前進按鈕文字
        type: String,
        default: () => {
            return '';
        }
    },
    disabled: { // 是否禁用
        type: Boolean,
        default: () => {
            return false;
        }
    },
    hideOnSinglePage: { // 只有一頁時是否隱藏
        type: Boolean,
        default: () => {
            return false;
        }
    },
    currentPage: { // 當前頁數
        type: Number,
        default: () => {
            return 1;
        }
    },
    layout: { // 元件佈局顯示順序
        type: Array,
        default: () => {
            return ['switch', 'pages', 'jump'];
        }
    },
};

// Event
    // size-change (number)
    // current-change (index)
    // prev-click (index)
    // next-click (index)

export default VairPagination;
```

### Pagination.vue Style

```
<style lang="less" scoped="">
.v-pagination {
    display: flex;
    align-items: center;
    .v-pagination-select-box, .v-pagination-input-box {
        width: 120px;
        /deep/.v-select, /deep/.v-input {
            min-width: 0;
        }
        /deep/.v-input {
            height: 30px;
            .v-input-box, .input {
                height: 30px;
                .suffix {
                    height: 25px;
                }
            }
        }
    }
    .v-pagination-input-box {
        display: flex;
        align-items: center;
        width: 120px;
        /deep/.v-input {
            width: 50px;
            margin: 0 6px;
            .input {
                text-indent: 0px;
                text-align: center;
            }
        }
        span {
            font-size: 14px;
        }
    }
    .disabled {
        cursor: not-allowed;
        span {
            color: #c0c4cc;
        }
    }
}
</style>
```

### Pages.vue Template

```
<div class="v-pages" ref="cPages">
    <div :class="["prepend", { prependDisabled }, { disabled }]" ref="prepend">
        <p v-if="prependText">{{ prependText }}</p>
        <i v-if="!prependText" class="iconfont icon-zuojiantou"></i>
    </div>
    <ul class="v-pages-ul">
        <li :class="["v-pages-li", { activeLi: modelValue === item }, { disabled }]" :ref="el => {if (el) liList[index] = el}" v-for="(item, index) in calculatePagesButtonList" :key="index">
            <span :class="[{ color: !background }]" v-if="item !== "suffix" && item !== "prepend"">{{ item }}</span>
            <i v-else="" :class="["iconfont", "icon-ellipsis2",
                { "icon-chevronsrightshuangyoujiantou": doubleRight && item === "suffix" },
                { "icon-chevronsleftshuangzuojiantou": doubleLeft && item === "prepend" }]">
            </i>
        </li>
    </ul>
    <div ref="suffix" :class="["suffix", { suffixDisabled }, { disabled }]">
        <p v-if="suffixText">{{ suffixText }}</p>
        <i v-if="!suffixText" class="iconfont icon-youjiantou"></i>
    </div>
</div>
```

### Pages.vue Script

```
import { ref, computed, watchEffect, onMounted } from 'vue';
export default {
    name: 'pages',
    props: {
        total: Number,
        pagerCount: Number,
        pageSize: Number,
        prependText: String,
        suffixText: String,
        disabled: Boolean,
        hideOnSinglePage: Boolean,
        background: Boolean || String,
        modelValue: Number
    },
    setup (props, ctx) {
        const medianButtonList = ref([]);
        const prependDisabled = ref(true);
        const suffixDisabled = ref(true);
        const doubleLeft = ref(false);
        const doubleRight = ref(false);
        const liList = ref([]);
        const prepend = ref(null);
        const suffix = ref(null);
        const cPages = ref(null);

onMounted(() => {
            watchEffect(() => {
                liList.value.forEach(item => {
                    !props.background && (item.style.backgroundColor = 'transparent');
                });
                !props.background && (prepend.value.style.backgroundColor = 'transparent');
                !props.background && (suffix.value.style.backgroundColor = 'transparent');
            });
            watchEffect(() => {
                if (calculatePagesButtonList.value.length <= 1 && props.hideOnSinglePage) {
                    cPages.value.style.display = 'none';
                } else {
                    cPages.value.style.display = 'flex';
                }
            });
        });

const handlePagesLiClick = (index) => {
            if (props.disabled) return
            if (typeof index === 'number' && props.modelValue !== index) {
                ctx.emit('update:modelValue', index);
                ctx.emit('current-change', index);
            }
        };

const handlePrependClick = () => {
            if (props.disabled) return
            if (props.modelValue <= 1) return;
            ctx.emit('update:modelValue', props.modelValue - 1);
            ctx.emit('prev-click', props.modelValue);
        };

const handleSuffixClick = () => {
            if (props.disabled) return
            const value = calculatePagesButtonList.value;
            const item = value[value.length - 1];
            if (props.modelValue >= item) return;
            ctx.emit('update:modelValue', props.modelValue + 1);
            ctx.emit('next-click', props.modelValue);
        };

const calculateCurrentPage = () => {
            const value = calculatePagesButtonList.value;
            const item = value[value.length - 1];
            ctx.emit('update:modelValue', props.modelValue > item? item : props.modelValue);
        };

watchEffect(() => {
            calculateCurrentPage();
        });

watchEffect(() => {
            const value = calculatePagesButtonList.value;
            const item = value[value.length - 1];
            prependDisabled.value = props.modelValue === 1;
            suffixDisabled.value = props.modelValue >= item;
        });

return {
            calculatePagesButtonList,
            medianButtonList,
            prependDisabled,
            suffixDisabled,
            handlePagesLiClick,
            handlePrependClick,
            handleSuffixClick,
            handleMouseEnter,
            handleMouseLeave,
            handleIClick,
            doubleRight,
            doubleLeft,
            liList,
            prepend,
            cPages,
            suffix
        }
    }
}
```

### Pages.vue Style

```
<style lang="less" scoped="">
.v-pages {
    display: flex;
    align-items: center;
    margin: 0 14px;
    .prepend, .suffix {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 30px;
        min-height: 28px;
        box-sizing: border-box;
        padding: 0 6px;
        margin: 0 5px;
        background-color:#F4F4F5;
        cursor: pointer;
        p, i {
            font-size: 12px;
            color: #333;
            font-weight: 600;
        }
        &:hover {
            p, i {
                color: #409EFF;
            }
        }
    }
    .prependDisabled, .suffixDisabled {
        p, i {
            color: #CDC9CC !important;
        }
        cursor: not-allowed;
    }
    .v-pages-ul {
        display: flex;
        align-items: center;
        .v-pages-li {
            margin: 0 5px;
            background-color:#F4F4F5;
            cursor: pointer;
            span, i {
                display: block;
                min-width: 30px;
                box-sizing: border-box;
                padding: 0 6px;
                line-height: 28px;
                text-align: center;
                font-size: 12px;
                color: #333;
                font-weight: 600;
            }
            &:hover {
                span, i {
                    color: #409EFF;
                }
            }
        }
        .activeLi {
            background-color:#409EFF;
            span {
                color: #fff;
            }
            .color {
                color: #409EFF !important;
            }
            &:hover {
                span {
                    color: #fff;
                }
            }
        }
    }
    .disabled {
        p, i, span {
            color: #c0c4cc !important;
        }
        cursor: not-allowed !important;
    }
}
</style>
```

### index.js 出口檔案中引入元件

```
// Pagination 分頁
import Pagination from './components/Pagination/Pagination.vue';
import Pages from './components/Pagination/components/Pages.vue';

const Vair = function(Vue) {
    Vue.component(`v-${Pagination.name}`, Pagination);
    Vue.component(`v-${Pages.name}`, Pages);
}

export default Vair;
```

### 使用元件

-   `在main.js中引入`

```
import { createApp } from 'vue'; 
import App from './App.vue'; 
import Vair from './libs/vair/index.js'; 
const app = createApp(App); 
app.use(Vair).mount('#app');
```

### App.vue中呼叫

```
<template>
    <div>
        <v-pagination :page-sizes="pageSizes" :pager-count="pagerCount" :total="total" :page-size="pageSize" :current-page="currentPage" :background="background" :hideonsinglepage="false" :disabled="disabled"></v-pagination>
    </div>
</template>

### 效果展示
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/b4f312c384f14c739403fefc4afd9c9f.gif#pic_center)
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/8132776827864da2b26f1facd3129524.jpeg#pic_center)

web技術分享| 基於vue3實現自己的元件庫第二章：Pagination元件

相關文章