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

已于 2024-01-03 15:45:15 修改
阅读量511 收藏 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
    评论
Vue.js实战之利用vue-router实现跳转页面
11-30
前言 使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。 官方文档： https://router.vuejs.org/zh-cn/essentials/getting-started.html 这次的实例主要实现下图的效果： 项目结构： 一、配置 Router 用 vue-cli 创建的初始模板里面，并没有 vue-router，需要通过 npm 安装 cnpm i vue-router -D 安装完成后，在 src 文件夹下，创建一个 routers.js 文件，和 main.js 平
vue和html页面之间的跳转
热门推荐
weixin_44173929的博客
02-23 2万+
网上有很多关于vue和html之间的跳转，我看了很多帖子，但是当我按照上面的代码去调试的时候却发现了一些问题，导致我在这个问题上耗费了一些时间，不过好在已经解决，下面把代码贴上（小弟初入IT，有不对的地方欢迎大家指出） 第一步是把html文件放在static文件夹目录下（至于为什么我也不知道，因为我当时放在了其他的文件夹下导致一直跳转不成功，具体原因有知道的大牛还请点拨） 第二步是打开vue页面...
vue项目中，把已经写好的html直接放进去，而不经过编译，直接跳转html页面
m0_67841039的博客
09-07 3772
2.如果项目根目录没有public,但是有static文件夹，则同样把/pages/test.html放进 static文件夹里，按照static的绝对路径访问。1.项目根目录里，如果有public文件夹，则直接放进public文件夹里，与index.html 同级开始，按照项目路径访问。
Vue+Webpack项目如何内嵌HTML页面，实现点击跳转
三俩句的博客
06-14 792
VUE项目内嵌HTML页面，点击跳转。
HTML+JS、VUE页面跳转的几种方式总结
weixin_45276056的博客
03-25 3990
一、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
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注入等安全问题。在处理用户输入的页码时...
在vue中实现嵌套页面(iframe)
11-19
vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径，也可使用服务器根路径http:localhost:8088/… <iframe src=”../../static/plusPro.html” width=”1200″ height=”300″ frameborder=”0″ scrolling=”auto”style=”position:absolute;top: -300px;left: 0px;”></iframe> 补充知识：关于VUE嵌套iframe的一系列问题 此文是建立在vue-cli之上 ，当然单写也可以，下文会涉及一些关于cli的知识，
vue嵌套html跳转静态文件
weixin_59787755的博客
11-19 2057
自己遇到的问题记录
html+vue 实现 A页面带参的跳转到B页面，B页面对应的内容添加样式，点击的时候也添加样式
weixin_48372590的博客
04-14 1403
html+vue 实现 A页面带参的跳转到B页面，B页面对应的内容添加样式，点击的时候也添加样式
【案例】js vue跳转html页面（新、独立的窗口）携带参数并请求后端接口
~牧马~
03-06 3676
第一步： 创建好html页面，写入想要的页面布局；回溯到public路径下，对于新的、独立的窗口配置。这里是绝对路径，笔者这里是用vue框架，第二步：跳转html页面，并携带参数；第三步：获取html地址携带的参数。第四步：后端接口请求，正常请求即可。
vue跳转外链页面以及跳转html页面超简单方法
qq_39123467的博客
11-17 4213
vue跳转外链页面以及跳转html页面超简单方法
html页面跳到vue怎,vue.js怎么进行页面跳转？
weixin_39517560的博客
06-03 2680
vue.js怎么进行页面跳转？下面本篇文章给大家介绍一下Vue路由实现页面跳转的方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。Vue路由实现页面跳转的方式Vue.js 路由可以通过不同的 URL 访问不同的内容，实现多视图的单页 Web 应用1、通过 实现 组件用于设置一个导航链接，切换不同 HTML 内容使用方法：简单写法demo2使用 v-bind 的写法demo2d...
Vue中嵌入原生HTML页面
最新发布
weixin_38982591的博客
01-30 2699
但是vue目前暂时没找到有类似功能相关文档，所以我采用iframe嵌套的方式。在mounted生命周期中去绑定具体Iframe的页面。在mounted中加监听事件，并配上处理监听对象的方法。在data中定义一个iframe绑定的页面的对象。在method中定义方法，用于处理监听的事件。在html中接收vue端传过来的值。发送信息到iframe页面。html页面中的代码。
vue 跳转html页面,vue项目实现页面的跳转
weixin_39573136的博客
06-03 8725
第一步、最大的index.html页面 添加如下代码目的http://localhost:8080/(等同于http://localhost:8080/index.html)是父页面其他的页面都是http://localhost:8080/路径名；也是子页面主要是构建 SPA (单页应用) 时，方便渲染你指定路由对应的组件。你可以 router-view 当做是一个容器，它渲染的组件是你使用 vu...
解决外部链接跳转到vue里面的某个路由页面
javascript和jq设置金额整数与小数点后面的字体大小
03-05 3584
外部链接跳转打包好的vue里面的某个页面时，我们只能跳转到vue路由里面默认配置的首页，当想跳转到指定的某个页面，不跳到首页怎么做呢？具体在router配置的文件里面配置，具体如下： routers：[ //这个就是点击外部链接的path跟下面的重定向链接相同时就会跳转到vue里面的重定向的这个页面 { paht:'/api/member/ce...
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、付费专栏及课程。

余额充值