前端踩坑指南

已于 2023-01-06 16:09:40 修改
阅读量868 收藏 1
点赞数 1
分类专栏： 随笔 文章标签： 前端 javascript html5 vue vue.js
于 2021-12-07 18:50:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LGEC_/article/details/121776043
版权
一、使用原生js开发分页功能
// 分页逻辑
const pagination = function (option, fun) {
    this.parentId = option.id;                             //容器
    this.pageSize = option.pageSize || 1;                  //每页显示多少条
    this.totals = option.totals || 0;                      //总条目数
    this.currentPage = option.currentPage || 1;            //当前页
    this.showFirstBtn = option.showFirstBtn || false;      //显示首页按钮
    this.showLastBtn = option.showLastBtn || false;        //显示尾页按钮
    this.totalPage = Math.ceil(this.totals / this.pageSize);//总页数
    this.firstText = '首页';
    this.lastText = '尾页';
    // this.preText = '上一页';
    this.preText = '<';
    // this.nextText = '下一页';
    this.nextText = '>';
    this.goText = '跳转至';
    if(this.totalPage==0){      //最少一页
        this.totalPage = 1;
    }
    /**
     * 创建dom元素
     */
    this.createDom = function (nodeName, attr, text) {
        let el = document.createElement(nodeName);
        if (attr) {
            for (let key in attr) {
                el.setAttribute(key, attr[key]);
            }
        }
        if (text) {
            el.innerText = text;
        }
        return el;
    }
    /**
     * 添加className
     */
    this.addClass = function (ele, className) {
        let oldClass = ele.className.split(' ');
        if (oldClass.indexOf(className) < 0) {
            oldClass.push(className);
            ele.className = oldClass.join(' ');
        }
    }
    /**
     * 删除class
     */
    this.delClass = function (ele, className) {
        let classArr = ele.className.split(' ');
        classArr.forEach(function (name, i) {
            if (name == className) {
                classArr.replace(i, 1);
            }
        });
        ele.className = classArr;
    }
    /**
     * 是否包含class
     */
    this.hasClass = function (ele, className) {
        let classArr = ele.className.split(' ');
        return classArr.indexOf(className) < 0 ? false : true;
    }
    let self = this;
    this.refshPage = function (index) {
        self.currentPage = index;
        fun(index);
        self.renderPage();
        let pageParent = document.getElementById(self.parentId);
        if (index == 1) {
            self.addClass(pageParent.querySelector('.preBtn'), 'btnDisabled');

        } else if (index == self.totalPage) {
            self.addClass(pageParent.querySelector('.nextBtn'), 'btnDisabled');
        } else {
            self.delClass(pageParent.querySelector('.preBtn'), 'btnDisabled');
            self.delClass(pageParent.querySelector('.nextBtn'), 'btnDisabled');
        }
    }
    /**
     * 生成分頁dom
     */
    this.getPageDom = function (index, totalPage) {
        let pageBox = self.createDom('div', {class: 'pageBox'});
        let totalShow = self.createDom('span', {class: 'totalShow'},'共'+ self.totals+'条');
        let totalPages = self.createDom('span', {class: 'totalPage'},'共'+ totalPage+'页');
        let firstBtn = self.createDom('span', {class: 'firstBtn'}, self.firstText);
        let lastBtn = self.createDom('span', {class: 'lastBtn'}, self.lastText);
        let preBtn = self.createDom('span', {class: 'preBtn'}, self.preText);
        let nextBtn = self.createDom('span', {class: 'nextBtn'}, self.nextText);
        let firstPro = self.createDom('span', {class: 'firstPro'}, '到');
        let jumpInput = document.createElement("input");
        jumpInput.type = 'number';
        jumpInput.className = 'jumpInput';
        jumpInput.name = "totalPage";
        jumpInput.value = index;
        let lastPro = self.createDom('span', {class: 'lastPro'}, '页');
        pageBox.appendChild(totalShow);
        if (self.showFirstBtn) {
            pageBox.appendChild(firstBtn);
        }
        if (self.showLastBtn) {
            pageBox.appendChild(lastBtn);
        }
        firstBtn.onclick = function () {
            self.refshPage(1);
        }
        lastBtn.onclick = function () {
            self.refshPage(totalPage);
        }
        jumpInput.onblur = function () {
            // if (txtInput.value.length === 0 判断字符串的值是否为空时常用
            let val = jumpInput.value;
            if (jumpInput.value.length === 0||jumpInput.value<0 ) {
                self.refshPage(1);
            }else if(val>totalPage){
                self.refshPage(totalPage);
            }else{
                self.refshPage(val);
            }
        }
        preBtn.onclick = function () {
            let index = --self.currentPage;
            if (index < 1) index = 1;
            self.refshPage(index);
        }
        nextBtn.onclick = function () {
            let index = ++self.currentPage;
            if (index > totalPage) index = totalPage;
            self.refshPage(index);
        }
        pageBox.appendChild(preBtn);
        if (totalPage <= 10) {
            for (let i = 1; i <= totalPage; i++) {
                let page = self.createDom('span', {class: 'pageNum'}, i);
                if (i == index) {
                    self.addClass(page, 'pageActive');

                }
                pageBox.appendChild(page);
                (function (i) {
                    page.onclick = function () {
                        self.refshPage(i);
                    }
                })(i);
            }
            pageBox.appendChild(nextBtn);
        } else {
            if (index <= 5) {
                for (let i = 1; i < 9; i++) {
                    let page = self.createDom('span', {class: 'pageNum'}, i);
                    if (i == index) self.addClass(page, 'pageActive');
                    pageBox.appendChild(page);
                    (function (i) {
                        page.onclick = function () {
                            self.refshPage(i);
                        }
                    })(i);
                }
                pageBox.appendChild(self.createDom('span', {class: 'dots'}, '...'));
                let lastPage = self.createDom('span', {class: 'pageNum'}, totalPage);
                pageBox.appendChild(lastPage);
                lastPage.onclick = function () {
                    self.refshPage(totalPage);
                }
                pageBox.appendChild(nextBtn);
            }
            if (index >= (totalPage - 4)) {
                let firstPage = self.createDom('span', {class: 'pageNum'}, 1);
                firstPage.onclick = function () {
                    self.refshPage(1);
                }
                pageBox.appendChild(firstPage);
                pageBox.appendChild(self.createDom('span', {class: 'dots'}, '...'));
                for (let i = totalPage - 9; i <= totalPage; i++) {
                    let page = self.createDom('span', {class: 'pageNum'}, i);
                    if (i == index) self.addClass(page, 'pageActive');
                    pageBox.appendChild(page);
                    (function (i) {
                        page.onclick = function () {
                            self.refshPage(i);
                        }
                    })(i);
                }
                pageBox.appendChild(nextBtn);
            }
            if (index > 5 && index < (totalPage - 4)) {
                let firstPage = self.createDom('span', {class: 'pageNum'}, 1);
                firstPage.onclick = function () {
                    self.refshPage(1);
                }
                pageBox.appendChild(self.createDom('span', {class: 'dots'}, '...'));
                for (let i = index - 3; i <= index*1 + 3; i++) {
                    let page = self.createDom('span', {class: 'pageNum'}, i);
                    if (i == index) self.addClass(page, 'pageActive');
                    pageBox.appendChild(page);
                    (function (i) {
                        page.onclick = function () {
                            self.refshPage(i);
                        }
                    })(i);
                }
                pageBox.appendChild(self.createDom('span', {class: 'dots'}, '...'));
                let lastPage = self.createDom('span', {class: 'pageNum'}, totalPage);
                pageBox.appendChild(lastPage);
                lastPage.onclick = function () {
                    self.refshPage(totalPage);
                }
                pageBox.appendChild(nextBtn);
            }
        }
        if (index == 1) {
            self.addClass(preBtn, 'btnDisabled');
        }
        if (index == totalPage||totalPage==0) {
            self.addClass(nextBtn, 'btnDisabled');
        }
        if (self.showLastBtn) {
            pageBox.appendChild(lastBtn);
        }
        pageBox.appendChild(totalPages);
        pageBox.appendChild(firstPro);
        pageBox.appendChild(jumpInput);
        pageBox.appendChild(lastPro);
        return pageBox;
    };
    /**
     * 渲染page
     */
    this.renderPage = function () {
        let pageParent = document.getElementById(self.parentId);
        let pagesDom = self.getPageDom(self.currentPage, self.totalPage);
        pageParent.innerHTML = '';
        pageParent.appendChild(pagesDom);
    }
    this.renderPage();
};
//  分页调用示例
new pagination({
    id:dataStore.pageId,
    pageSize:dataStore.pageSize,
    totals:data.length,
    currentPage:1
},function(index){
    let startNum = (index - 1 ) * dataStore.pageSize;
    let endNun = index * dataStore.pageSize;
    let listData = data.slice(startNum,endNun);
    renderMain(listData);
});

	
	<!-- 分页代码 -->
    <div id="pagination"></div>


    /*分页 开始*/
	#pagination{
	    padding: 17px 0;
	    color: #595959;
	    display: flex;
	    justify-content: center;
	}
	#pagination .totalShow{
	    margin-right:10px;
	}
	#pagination .totalPage{
	    margin: 0 10px;
	}
	#pagination .pageNum,#pagination .preBtn,#pagination .nextBtn{
	    width: 30px;
	    height: 30px;
	    background: #FFFFFF;
	    border: 1px solid #DFDFDF;
	    border-radius: 4px;
	    display: inline-block;
	    text-align: center;
	    line-height: 30px;
	    cursor:pointer;
	    margin: 0 4px;
	}
	#pagination .pageActive{
	    border-color: #0177D5;
	    background: #0177D5;
	    color: #fff;
	}
	#pagination .pageNum:hover,#pagination .preBtn:hover,#pagination .nextBtn:hover{
	    border-color: #0177D5;
	    background: #0177D5;
	    color: #fff;
	}
	#pagination .btnDisabled{
	    cursor: Auto;
	    color: #999;
	}
	#pagination .btnDisabled:hover{
	    border-color: #DFDFDF;
	    background: #FFFFFF;
	    color: #999;
	}
	#pagination .jumpInput{
	    width: 36px;
	    height: 30px;
	    background: #FFFFFF;
	    border: 1px solid #DFDFDF;
	    border-radius: 4px;
	    -webkit-text-fill-color: #595959;
	    text-align: center;
	    line-height: 30px;
	    margin: 0 10px;
	    caret-color:#595959;
	}
	#pagination .jumpInput::-webkit-outer-spin-button,
	#pagination .jumpInput::-webkit-inner-spin-button {
	    -webkit-appearance: none;
	}
	#pagination .jumpInput {
	    -moz-appearance: textfield;
	}
	#pagination .jumpInput:focus {
	    border-color: #41A9F2;
	    -webkit-text-fill-color: #41A9F2;
	}
	/*分页 结束*/

每次查询请求都要重新调用下分页

二、单页面引入Vue

在onclick等原生js事件中使用vue methods 中定义的函数时要在前面加上’vueApp.‘，vueApp是定义的Vue构造器

	<div class="iframe-ct" id="vue-app">
        <div onclick="go();vueApp.show()">点击按钮</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        function go(){
            console.log(123)
        }

        let vueApp = new Vue({
            el: '#vue-app',
            data() {
                return {
                    val:'888'
                }
            },
            mounted() {
                
            },
            methods: {
                show(){
                    console.log(this.val)
                },
            }
        })
    </script>

需要注意的是假如vue-app div里渲染有问题，整个vue-app div都会被隐藏掉

三、每次打开新窗口打开同一个页面

当需要每次打开新窗口都是同一个时， target=“framename” 可以轻松实现这个功能（framename 在指定的框架中打开被链接文档）

	<body>
	   <a href="./canvas动效.html" target="firstView">打开新窗口</a>
	</body>
四、如何解决上层div元素将下层div元素盖住，但是下层div里的点击事件仍可以进行的问题?

对上层元素使用：pointer-events: none;这样点击事件就能穿透上层元素，找到下层的点击事件。
如果想让上层元素也能得到点击事件，只需要在你需要获得点击的上层元素子元素中加入：pointer-events: auto;

五、Echarts geo地图 全屏后地图区域点击事件不生效

解决方案：不再监听click事件，监听mousedown事件

	this.myChart.on('mousedown', params => {
        if(params.name == "大兴区") {
            this.$emit("changeMap", 3);
        }
    });
六、火狐浏览器时间直接处理变成0-0-0

案例：

// 日期格式化
function parseTime(time, pattern) {
    if (arguments.length === 0 || !time) {
        return null
    }
    const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
    let date
    if (typeof time === 'object') {
        date = time
    } else {
        if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
            time = parseInt(time)
        } else if (typeof time === 'string') {
            time = time.replace(/-/gm, '/').replace('T', ' ').replace(/\.[\d]{3}/gm, '')
        }
        if ((typeof time === 'number') && (time.toString().length === 10)) {
            time = time * 1000
        }
        date = new Date(time)
    }
    const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
    }
    const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        let value = formatObj[key]
        // Note: getDay() returns 0 on Sunday
        if (key === 'a') {
            return ['日', '一', '二', '三', '四', '五', '六'][value]
        }
        if (result.length > 0 && value < 10) {
            value = '0' + value
        }
        return value || 0
    })
    return time_str
}
// 使用parseTime格式化时间组件中选取的时间 timeVal
console.log(parseTime(timeVal, '{y}-{m}-{d}'))  // 返回‘0-0-0’

非火狐浏览器时，比如谷歌、360等都是正常的。解决方法是在进行时间格式化前对时间参数进行处理，解决方案如下：

// 日期格式化
function parseTime(time, pattern) {
    if (arguments.length === 0 || !time) {
        return null
    }
    time = new Date(time) //在进行时间格式化前对时间参数进行处理
    const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
    let date
    if (typeof time === 'object') {
        date = time
    } else {
        if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
            time = parseInt(time)
        } else if (typeof time === 'string') {
            time = time.replace(/-/gm, '/').replace('T', ' ').replace(/\.[\d]{3}/gm, '')
        }
        if ((typeof time === 'number') && (time.toString().length === 10)) {
            time = time * 1000
        }
        date = new Date(time)
    }
    const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
    }
    const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        let value = formatObj[key]
        // Note: getDay() returns 0 on Sunday
        if (key === 'a') {
            return ['日', '一', '二', '三', '四', '五', '六'][value]
        }
        if (result.length > 0 && value < 10) {
            value = '0' + value
        }
        return value || 0
    })
    return time_str
}
// 使用parseTime格式化时间组件中选取的时间 timeVal
console.log(parseTime(timeVal, '{y}-{m}-{d}'))  // 任意浏览器都返回正常
LGEC
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
(若依)RuoYi后台管理框架前端
摸鱼大王的博客
08-13 8537
若依后台管理 官方网址 后台管理二开推荐 官网的源码地址可供下载前后端代码 (本人小白一枚 如有错误请尽情批评指出 俺马上改 贼拉虚心！！！) 很幸运 最近进到公司后跟着团队接了两家公司的App一套的开发 作为小白的我一开始确实心里很打怵 害怕自己跟不上进度 拖了团...
若依框架parseTime
2201_75390645的博客
12-08 967
if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }2.在需要使用的页面中引入 import {parseTime} from '路径'1.在/utils/ruoyi文件中封装代码。
若依[RuoYi-Vue]使用（五）- 认识ruoyi前端文件
最新发布
q02132的博客
05-22 2242
以“系统管理 - 部门管理”认识若依前端 index.vue认识若依前端 dept.js。
若依日期格式化
weixin_56335924的博客
11-29 1283
【代码】若依日期格式化。
【RuoYi-Vue-Plus 实现日期范围查询 Mybatis-Plus & Element UI & JavaScript 】
qq_45973421的博客
04-17 4494
若依代码生成自带的日期查询通常只可以查询精确的日期，但往往实际应用开发中我们会用到一个日期的范围查询，所以我们来看看如何实现基于 Element UI + Mybatis-Plus + JavaScript 的日期范围查询，实现多个日期范围查询。提示：以下是本篇文章正文内容，下面案例可供参考若依框架实现查询日期范围业精于勤，荒于嬉；行成于思，毁于随。
若依ruoyi 系统日志导出
u013780740的专栏
07-27 1056
若依ruoyi 系统日志导出
微信小程序踩坑指南
03-29
前端调用wx.login()，获取临时登录凭证 code 通过wx.request()将code发给服务器（需要后端创建接口接收code） 后端进行登录凭证校验，入参为(appid,secret,js_code,grant_type) appid 小程序唯一标识 secret 小程序...
Vue 3.x+axios跨域方案的踩坑指南
01-19
其实，在前端工程化大行其道的现在，前后端已经分离开来，前端为了提高工作流效率往往自己开一个小型的服务器，就比如webpack.devServer。这样在前端调用后端接口的时候必然会面临跨域的问题， 如题，Vue3.x + ...
前端学习、面试总结踩坑文档
11-22
个人校招总结的前端笔面试文档，县分享给大家，后期会不定时更新。内容包含基础面试题、笔试、vue以及自己的踩坑指南。
【JavaScript源代码】vue使用节流函数的踩坑实例指南.docx
12-29
### Vue使用节流函数的踩坑实例指南 #### 背景与问题描述 在Web开发尤其是使用Vue.js进行前端开发的过程中，经常会遇到这样一个场景：我们需要在用户输入文本后（例如在搜索框中输入），根据用户的输入内容发送HTTP...
Vue-cli3.x + axios 跨域方案踩坑指北
10-16
在开发过程中，由于浏览器的同源策略限制，前端应用（通常运行在本地开发服务器，如 `webpack.devServer`）在访问不同源的后端API时会遇到跨域问题。Vue-cli 3.x 提供了一个解决方案，即使用 `axios` 进行数据请求，...
IE 兼容日期显示0-0 bug （Vue）
weixin_42066070的博客
04-24 1538
1. 安装一个moment插件 npm install moment --save 2.公共方法调用 2.1 在utils文件夹的index.js 加入以下方法 // 兼容ie /** * * @param {时间} a * @param {YYYY-MM-DD HH:mm:ss} b * @returns */ export function parseTimeIe(a, b = 'YYYY-MM-DD HH:mm:ss') { return moment(a).f
ruoyi框架改变日期的显示
热门推荐
吴小迪的博客
09-16 3万+
ruoyi框架想要把时间显示为时间日期加时分秒其实很简单，接下来看问题以及解决方法： 如下图【显示的是年月日】： 我看了看官方文档，上面写的就是默认显示为年月日，如果想要显示时间的话需要额外的进行下小处理： 总共分为俩步，就可以改变为显示年月日加时间的格式： 记住你要改变格式的id 在script标签里面找到 $(function(){ }) 并加入下方写注释的关键代码： $(funct...
ruoyi前端使用指南
橙子
08-23 4387
前端 查询条件传向后端格式化 // 查询条件提交的日期格式化 changeDate: function (date, dateString) { const date1 = this.$moment(date).format('YYYY-MM-DD') this.queryParam.updateTime = date1 }, 列表展示的时候格式化展示数据 <span slot="updateTime" slot-scope="text, record"
手机app（iOS系统），ie浏览器、火狐浏览器出现时间不兼容问题 时间转换的时候去掉“-” 和“.0”
youyantan的博客
04-13 643
正则去掉"-" 和“.0" 移动端Date.parse()获取时间戳IOS显示为NaN（ie和火狐浏览器可能也有问题）
parseTime（js时间格式化）
weixin_46448762的博客
08-19 5306
js处理时间格式
ruoyi后台管理系统分析（一）-----common包
bangche3676的博客
11-21 3641
ruoyi后台管理系统框架： 接下来我们，边看代码边分析代码： 一、common包 ----constant包 constant.java---------通用常量信息 package com.ruoyi.common.constant; /** * 通用常量信息 * * @author ruoyi */ public class C...
RuoYi-flowable工作流管理
wbsu2004的博客
12-13 1万+
RuoYi-flowable 是基 RuoYi-vue + flowable 6.5 的工作流管理。
ruoyi 前端表格 日期格式化 yyyy-MM-dd
test
07-03 7110
方式一： //js初始化表格数据的时候直接截取日期 $(function() { var options = { url: prefix + "/list", createUrl: prefix + "/add", updateUrl: prefix + "/edit/{id}", removeUrl: prefix + "/remove", exportUrl: p...
SpringSecurity+JWT配置与踩坑指南
前端接收到过期状态码后，更新本地存储的token。 最后，Spring MVC默认仅支持GET和POST请求，但Spring Boot集成了`HiddenHttpMethodFilter`，理论上支持PUT、DELETE等其他HTTP方法。然而，有些服务器可能会忽略或...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值