html 插入vue页码，可输入跳转

已于 2024-01-03 15:45:15 修改
阅读量509 收藏 6
点赞数 10
文章标签： vue.js 前端 javascript
于 2024-01-03 15:43:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013486113/article/details/134735155
版权 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<style lang="less" scoped>
.m-pagination {
    margin: 16px 0;
}
.m-pagination .hidden {
    display: none;
}
.m-pagination .left {
    text-align: left;
}
.m-pagination .center {
    text-align: center;
}
.m-pagination .right {
    text-align: right;
}
.m-pagination .m-pagination-wrap {
    display: inline-block;
    height: 32px;
    line-height: 30px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
    text-align: center;
}
.m-pagination .m-pagination-wrap .mr8 {
    margin-right: 8px;
}
.m-pagination .m-pagination-wrap .u-item {
    min-width: 30px;
    height: 30px;
    display: inline-block;
    user-select: none;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    cursor: pointer;
    transition: all .3s;
}  
.m-pagination .m-pagination-wrap .u-item .u-arrow {
    fill: rgba(0, 0, 0, 0.65);
    width: 12px;
    height: 12px;
    transition: all .3s;
}
.m-pagination .m-pagination-wrap .u-item:not(:last-child) {
    margin-right: 8px;
}
.m-pagination .m-pagination-wrap .active {
    font-weight: 500;
    color: #1890ff;
    border-color: #1890ff;
}
.m-pagination .m-pagination-wrap .active .u-arrow {
    fill: #1890ff;
}
.m-pagination .m-pagination-wrap .disabled {
    color: rgba(0, 0, 0, 0.25);
    background: #fff;
    border-color: #d9d9d9;
    cursor: not-allowed;
}
.m-pagination .m-pagination-wrap .disabled .u-arrow {
    fill: rgba(0, 0, 0, 0.25);
}
.m-pagination .m-pagination-wrap .disabled:hover {
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
    border-color: #d9d9d9;
}
.m-pagination .m-pagination-wrap .disabled:hover {
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
    border-color: #d9d9d9;
}
.m-pagination .m-pagination-wrap .disabled:hover .u-arrow{
    fill: rgba(0, 0, 0, 0.25);
}
.m-pagination .m-pagination-wrap .m-arrow {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    min-width: 32px;
    height: 32px;
    letter-spacing: 2px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.25);
    transition: all .3s;
    cursor: pointer;
}
.m-pagination .m-pagination-wrap .m-arrow .u-ellipsis {
    transition: all .3s;
}
.m-pagination .m-pagination-wrap .m-arrow  .u-icon {
    fill: #1890ff;
    width: 12px;
    height: 12px;
}
.m-pagination .m-pagination-wrap .u-jump-page {
    margin-left: 8px;
    line-height: 32px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
}
.m-pagination .m-pagination-wrap .u-jump-page input {
    vertical-align: top;
    width: 26px;
    height: 20px;
    padding: 5px 11px;
    margin: 0 8px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: transparent;
    text-align: left;
    outline: none;
    transition: all 0.3s;
    
}
.m-pagination .m-pagination-wrap .u-jump-page input:hover {
    border-color: #1890ff
}
.m-pagination .m-pagination-wrap .u-jump-page input:focus {
    border-color: #1890ff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
</style>
<div id="demo">
    <template>
        <div
            :current="current"
            :pageSize="pageSize"
            :total="total"
            :hideOnSinglePage="hideOnSinglePage"
            :showQuickJumper="true"
            :showTotal="true"
            placement="right"
            :class="[`m-pagination ${placement}`]">
            <div class="m-pagination-wrap">
                <span class="mr8" v-if="showTotal">共 {{ totalPage }} 页 /
                    {{ total }} 条</span>
                <span class="u-item"
                    :class="{ disabled: currentPage === 1 }"
                    @click="changePage(currentPage - 1)">
                    <svg class="u-arrow" viewBox="64 64 896 896"
                        data-icon="left" aria-hidden="true"
                        focusable="false">
                        <path
                            d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path>
                    </svg>
                </span>
                <span :class="['u-item', { active: currentPage === 1 }]"
                    @click="changePage(1)">1</span>
                <span
                    class="m-arrow"
                    ref="forward"
                    v-show="forwardMore && pageList[0] - 1 > 1"
                    @click="onForward"
                    @mouseenter="forwardArrow = true"
                    @mouseleave="forwardArrow = false">
                    <span v-show="!forwardArrow" class="u-ellipsis">•••</span>
                    <svg v-show="forwardArrow" class="u-icon"
                        viewBox="64 64 896 896" data-icon="double-left"
                        aria-hidden="true" focusable="false"><path
                            d="M272.9 512l265.4-339.1c4.1-5.2.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L186.8 492.3a31.99 31.99 0 0 0 0 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H532c6.7 0 10.4-7.7 6.3-12.9L272.9 512zm304 0l265.4-339.1c4.1-5.2.4-12.9-6.3-12.9h-77.3c-4.9 0-9.6 2.3-12.6 6.1L490.8 492.3a31.99 31.99 0 0 0 0 39.5l255.3 326.1c3 3.9 7.7 6.1 12.6 6.1H836c6.7 0 10.4-7.7 6.3-12.9L576.9 512z"></path></svg>
                </span>
                <span
                    :class="['u-item', { active: currentPage === page }]"
                    v-for="(page, index) in pageList" :key="index"
                    @click="changePage(page)">{{ page }}</span>
                <span
                    class="m-arrow"
                    ref="backward"
                    v-show="backwardMore && pageList[pageList.length - 1]+1 < totalPage"
                    @click="onBackward"
                    @mouseenter="backwardArrow = true"
                    @mouseleave="backwardArrow = false">
                    <span v-show="!backwardArrow" class="u-ellipsis">•••</span>
                    <svg v-show="backwardArrow" class="u-icon"
                        viewBox="64 64 896 896" data-icon="double-right"
                        aria-hidden="true" focusable="false"><path
                            d="M533.2 492.3L277.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H188c-6.7 0-10.4 7.7-6.3 12.9L447.1 512 181.7 851.1A7.98 7.98 0 0 0 188 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5zm304 0L581.9 166.1c-3-3.9-7.7-6.1-12.6-6.1H492c-6.7 0-10.4 7.7-6.3 12.9L751.1 512 485.7 851.1A7.98 7.98 0 0 0 492 864h77.3c4.9 0 9.6-2.3 12.6-6.1l255.3-326.1c9.1-11.7 9.1-27.9 0-39.5z"></path></svg>
                </span>
                <span v-show="totalPage!==1"
                    :class="['u-item', { active: currentPage === totalPage }]"
                    @click="changePage(totalPage)">{{ totalPage }}</span>
                <span class="u-item"
                    :class="{ disabled: currentPage === totalPage }"
                    @click="changePage(currentPage + 1)">
                    <svg class="u-arrow" viewBox="64 64 896 896"
                        data-icon="right" aria-hidden="true"
                        focusable="false">
                        <path
                            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
                    </svg>
                </span>
                <span class="u-jump-page" v-if="showQuickJumper">跳至<input type="text" v-model="jumpNumber" />页</span>
            </div>
        </div>
    </template>
</div>
<script src="vue.js"></script>
<script>
new Vue({
    el: "#demo",
    data () {
        return {
            currentPage: 1, // 当前页数
            jumpNumber: '', // 跳转的页码
            forwardMore: false, // 左省略号展示
            backwardMore: false, // 右省略号展示
            forwardArrow: false, // 左箭头展示
            backwardArrow: false, // 右箭头展示
            current: 1, // 当前页数
            pageSize: 10,
            total: 14556,
            pageListNum: 5, // 显示的页码数组长度
            hideOnSinglePage: false,  // 只有一页时是否隐藏分页器
            showQuickJumper: true, // 是否可以快速跳转至某页
            showTotal: false, // 是否显示当前页数和数据总量
            placement: 'left' // 分页器展示位置，靠左left，居中center，靠右right
        }
    },
    computed: {
        totalPage () { // 总页数
            return Math.ceil(this.total / this.pageSize) // 向上取整
        },
        pageList () { // 获取显示的页码数组
            return this.dealPageList(this.currentPage).filter(n => n !== 1 && n !== this.totalPage)
        }
    },
    watch: {
        current (to) { // 当前选中页码
            this.currentPage = to
        },
        currentPage (to) { // 通过更改当前页码，修改分页数据
            this.loading = true
            this.$emit('change', {
                page: to,
                pageSize: this.pageSize
            })
        }
    },
    created () {
        // 监听键盘Enter按键
        document.onkeydown = (e) => {
        const ev = e || window.event
        if (ev && ev.keyCode === 13 && this.jumpNumber) {
            this.jumpPage(this.jumpNumber)
        }
        }
    },
    methods: {
        dealPageList (curPage) {
            var resList = []
            var offset = Math.floor(this.pageListNum / 2) // 向下取整
            var pager = {
                start: curPage - offset,
                end: curPage + offset
            }
            if (pager.start < 1) {
                pager.end = pager.end + (1 - pager.start)
                pager.start = 1
            }
            if (pager.end > this.totalPage) {
                pager.start = pager.start - (pager.end - this.totalPage)
                pager.end = this.totalPage
            }
            if (pager.start < 1) {
                pager.start = 1
            }
            if (pager.start > 1) {
                this.forwardMore = true
            } else {
                this.forwardMore = false
            }
            if (pager.end < this.totalPage) {
                this.backwardMore = true
            } else {
                this.backwardMore = false
            }
            // 生成要显示的页码数组
            for (let i = pager.start; i <= pager.end; i++) {
                resList.push(i)
            }
            return resList
        },
        onForward () {
            this.currentPage = this.currentPage - this.pageListNum > 0 ? this.currentPage - this.pageListNum : 1
        },
        onBackward () {
            this.currentPage = this.currentPage + this.pageListNum < this.totalPage ? this.currentPage + this.pageListNum : this.totalPage
        },
        jumpPage (jumpNum) {
            if (Number(jumpNum)) {
                if (Number(jumpNum) < 1) {
                jumpNum = 1
                }
                if (Number(jumpNum) > this.totalPage) {
                jumpNum = this.totalPage
                }
                this.changePage(Number(jumpNum))
            }
            this.jumpNumber = '' // 清空跳转输入框
        },
        changePage (pageNum) {
            if (pageNum === 0 || pageNum === this.totalPage + 1) {
                return false
            }
            if (this.currentPage !== pageNum) {
                // 点击的页码不是当前页码
                this.currentPage = pageNum
            }
        }
    }
})
</script>
</body>
</html>

lingling哟
关注
  • 10
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML简单页面页码的设计
Linzsong的博客
12-18 8690
HTML简单页面页码的设计 &amp;lt;!DOCTYPE HTML&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;HTML页码设置&amp;lt;/title&amp;gt; &amp;lt;meta http-equiv=&quot;Content-Type&quot; content=&a
vue和html页面之间的跳转
热门推荐
weixin_44173929的博客
02-23 2万+
网上有很多关于vue和html之间的跳转，我看了很多帖子，但是当我按照上面的代码去调试的时候却发现了一些问题，导致我在这个问题上耗费了一些时间，不过好在已经解决，下面把代码贴上（小弟初入IT，有不对的地方欢迎大家指出） 第一步是把html文件放在static文件夹目录下（至于为什么我也不知道，因为我当时放在了其他的文件夹下导致一直跳转不成功，具体原因有知道的大牛还请点拨） 第二步是打开vue页面...
Vue+Webpack项目如何内嵌HTML页面，实现点击跳转
三俩句的博客
06-14 788
VUE项目内嵌HTML页面，点击跳转。
HTML+JS、VUE页面跳转的几种方式总结
weixin_45276056的博客
03-25 3973
一、HTML+JS实现跳转: 1、javascript中实现跳转： // 直接跳转 window.location.href='index.html'; // 定时跳转 setTimeout("javascript:location.href='index.html'", 5000); 2、在html标签内实现跳转： eg:onclick='window.location.href='../index.html'; οnclick="window.location.reload('../index.ht
HTML——JS—选择页码（案例）
piduocheng0577的博客
03-18 1706
页码的选择 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #box{ /* background-color: palegoldenrod; */ } .pr...
【案例】js vue跳转html页面（新、独立的窗口）携带参数并请求后端接口
~牧马~
03-06 3653
第一步： 创建好html页面，写入想要的页面布局；回溯到public路径下，对于新的、独立的窗口配置。这里是绝对路径，笔者这里是用vue框架，第二步：跳转html页面，并携带参数；第三步：获取html地址携带的参数。第四步：后端接口请求，正常请求即可。
Vuepaging使用Vue组件实现的分页
08-10
最后，在模板中插入Vue-paging组件，将`currentPage`和`totalPages`作为属性传递： ```html <vue-paging :current-page.sync="currentPage" :total-pages="totalPages"></vue-paging> ``` 当用户点击分页按钮时，`...
美化的vue分页组件
05-23
Vue.js 是一个流行的前端JavaScript框架，它以轻量级、高效和可复用性而闻名。在开发Web应用时，分页是常见的功能，尤其是在处理大量数据时，它能帮助用户分步骤浏览内容，提高用户体验。"美化的vue分页组件"就是...
这是由Vue实现的分页插件
08-12
Vue分页插件是一种组件，通常包含一个可配置的分页按钮组，可以显示当前页码、总页数，并允许用户切换到不同的页面。它与后端API交互，获取或更新分页数据，从而提供流畅的用户体验。 二、分页插件的核心功能 1. **...
PDFObject.js
08-11
在这里，你可以设置默认打开的PDF文件，或者添加其他交互功能，如页码跳转、缩放等。值得注意的是，描述中提到"横向打印会有问题"，这可能意味着PDFObject.js在处理PDF文档的打印模式时存在一些限制，尤其是在横向...
函数型显示翻页连接_.docx
10-09
`page_request` 函数获取当前页码，然后调用翻页函数生成相应的HTML代码插入到页面中。 5. **安全性**： - 标签为“安全”，这提示我们在实现类似功能时，需要注意防止SQL注入等安全问题。在处理用户输入的页码时...
2.HTML跳转到页面指定位置的几种方法
最新发布
qq_44438941的博客
11-03 5395
日常总结
Vue2全局提示（Message）
Mr Dear的博客
08-09 4952
调用一次只展示一个提示，若调用多次则依次展示多个提示......
vue 跳转html页面,vue项目实现页面的跳转
weixin_39573136的博客
06-03 8718
第一步、最大的index.html页面 添加如下代码目的http://localhost:8080/(等同于http://localhost:8080/index.html)是父页面其他的页面都是http://localhost:8080/路径名；也是子页面主要是构建 SPA (单页应用) 时，方便渲染你指定路由对应的组件。你可以 router-view 当做是一个容器，它渲染的组件是你使用 vu...
html中使用vue组件
guoyp2126的博客
08-04 2万+
VUE有两种使用方式，一种实在html中直接使用vue做开发，一种是企业级的单页面应用。原认为前一种方式主要作用是为了降低VUE的学习门槛——通过在大家熟悉的HTML环境中使用vue，大家很容易去了解和熟悉VUE。现在看来在html使用vue组件还有两大作用，一个是封装比较复杂的组件，在其他应用中使用，另一个作用是调试样式.........
vue嵌套html跳转静态文件
weixin_59787755的博客
11-19 2056
自己遇到的问题记录
html+vue 实现 A页面带参的跳转到B页面，B页面对应的内容添加样式，点击的时候也添加样式
weixin_48372590的博客
04-14 1402
html+vue 实现 A页面带参的跳转到B页面，B页面对应的内容添加样式，点击的时候也添加样式
前端vue分页组件简单好用列表分页组件， 分页器组件，用于展示页码、请求数据等 ,包含翻页。
chenchuang0128的博客
05-23 1364
本文将介绍如何使用Vue和Uni-app快速实现一个简单的列表分页组件和分页器组件，用于展示页码、请求数据等，并包含翻页功能。我们将通过使用uni-app插件市场提供的组件来简化开发过程，并提供详细的代码示例下载地址：https://ext.dcloud.net.cn/plugin?-- totalNum: 条目总数量 pageCount:设置分页数量 curPageNum:设置当前页-->## 快速实现前端vue分页组件简单好用列表分页组件， 分页器组件，用于展示页码、请求数据等，并包含翻页功能。
html button跳转页面_HTML跳转到页面指定位置的几种方法
weixin_39526872的博客
11-29 2952
HTML跳转到页面指定位置的几种方法前言 有时候，我们想阅读页面中某段精彩的内容，但由于页面太长，用户需要自己滚动页面，查找起来非常麻烦 ，很容易让人失去继续往下阅读的兴趣。这样体验非常不好，所以我们可以想办法 实现点击某段文字或者图片跳转到页面指定位置，方便用户的阅读。 一、 纯 html 实现 1. 利用 id 为标记的锚点 这里作为锚点的标签可以是任意元素。2. 利用 a 标签的 na...
vue实现插入可输入空格
05-19
在 Vue 中实现可输入空格可以使用以下两种方式: 1. 使用 v-model 和 computed 属性 在模板中，给文本框绑定 v-model，同时设置输入事件： ```html <template> <div> <input v-model="text" @input="formatText" /> </div> </template> ``` 在 Vue 实例中，定义 text 和 formatText： ```javascript export default { data() { return { text: '', }; }, computed: { formattedText() { return this.text.replace(/\s/g, ' '); // 把所有空格替换为可输入的空格 }, }, methods: { formatText() { this.text = this.formattedText; }, }, }; ``` 这样做的原理是，通过 computed 属性将 text 中的空格替换为可输入的空格，然后在输入事件中将 text 的值更新为 formattedText。 2. 使用自定义指令 在模板中，给文本框绑定 v-spaces 指令： ```html <template> <div> <input v-model="text" v-spaces /> </div> </template> ``` 在 Vue 中定义 v-spaces 指令： ```javascript export default { directives: { spaces: { bind: (el) => { el.addEventListener('input', (event) => { event.target.value = event.target.value.replace(/\s/g, ' '); // 把所有空格替换为可输入的空格 }); }, }, }, }; ``` 这样做的原理是，在自定义指令中监听输入事件，将输入框中的空格替换为可输入的空格。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值