- 博客(34)
- 收藏
- 关注
RSS订阅原创 elementUI 表格滚动分页加载请求数据
需求：elementui Table表格滚动分页（不使用分页组件），请求数据。1、自定义加载更多数据的指令，在utils文件夹中创建 loadMore.js。2、在main.js中添加以下代码。
2023-07-24 17:31:46
1400
原创 axios 中配置withCredentials
withCredentials 有什么用?跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等)，也可以简单的理解为，当前请求为跨域类型时是否在请求中协带cookie。配置withCredentials:const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 环境变量base接口地址 url = base url + request url withCredentials: true,
2022-03-15 16:38:27
2486
原创 javascript 数字日期格式转换为中文
把数字日期如2022-03-10转换为 二零二二年三月十日function convert(dateStr) { var dict = { "0": "零", "1": "一", "2": "二", "3": "三", "4": "四", "5": "五", "6": "六", "7": "七", "8": "八", "9": "九",
2022-03-10 14:51:52
2143
原创 js 动态添加css3 @keyframes
js创建@keyframesconst keyframes = '@keyframes mypoint {to {transform: scale(1.5);background: rgba(0, 0, 0, 0);}}'// 创建style标签const style = document.createElement('style');// 设置style属性style.type = 'text/css';// 将 keyframes样式写入style内style.innerHTML = ke
2022-01-05 11:35:57
2310
原创 vue 页面回退mounted函数不执行的问题及解决方法
前言最近做项目碰到一个很头大的问题–从a页面跳到b页面进行编辑，编辑完再返回a页面，却没走a页面的钩子函数mounted，数据没有更新经过一番面向百度研究，终于找到了问题所在。接下来就记录一下这个问题及其解决的方法。原理其实这个问题主要涉及到vue生命周期，对vue生命周期理解不够深刻的同学可以去官网学习一下：https://vuejs.org/v2/api/#Options-Lifecycle-Hooks解决这个问题的关键就在于对keep-alive的理解和activated钩子函数的使用。当
2021-07-07 10:46:20
7153
1
原创 css 绝对定位元素挡住下方元素点击解决办法
pointer-events:none; 表示它将捕获不到任何点击，而只是让事件穿透到它的下面。pointer-events:auto; 表示鼠标不会穿透当前层, 鼠标事件仍会监听这个父元素下面的子元素。外层div如果已经绝对或相对定位了（并且本层有点击事件或其他执行事件继续有效，这两步执行后，外层的父元素上的事件会正常执行，同时下层元素也可点击）： position: absolute; z-index:9999 pointer-events: none;内层div设置绝对定位：
2021-06-03 15:39:45
4242
1
原创 H5移动端分页（vue）
export default { data() { return { dataList: [], TotalPage: 1, loadMore: false, }; }, mounted() { this.getList(this.TotalPage); window.addEventListener("scroll", this.handleScroll); }, destroyed() { window.re
2021-04-22 15:26:21
1549
原创 解决 Vue 重复点击相同路由，出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题
解决方案：方案一：只需在 router 文件夹下，添加如下代码：// src/router/index.jsVue.use(Router)const router = new Router({ routes}) const VueRouterPush = Router.prototype.pushRouter.prototype.push = function push (to) { return VueRouterPush.call(this, to).catch(err =>
2021-04-08 10:53:23
202
原创 js获取当天日期后7天或者前7天的方法
initData() { //当前日期的前七天 var myDate = new Date(); myDate.setDate(myDate.getDate() - 7); //后7天就把该行代码注释 var dateArray = []; var dateTemp; var flag = 1; for (var i = 0; i < 7; i++) { var month = myDate.getM
2021-03-26 11:55:48
1933
原创 js实现获取当前日期后几天的某天日期
function GetDateStr(AddDayCount) { var dd = new Date(); dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期 var y = dd.getFullYear(); var m = (dd.getMonth()+1)<10?"0"+(dd.getMonth()+1):(dd.getMonth()+1);//获取当前月份的日期，不足10补0
2020-12-16 10:07:00
770
原创 2020-11-05T09:00:00+08:00 类型的时间格式化处理（时间转换）
通过自定义下面的方法和调用即可转换格式dateFormat(fmt, date) { let ret=""; date=new Date(date); const opt = { 'Y+': date.getFullYear().toString(), // 年 'm+': (date.getMonth() + 1).toString(), // 月 'd+': date.getDate().toString(), //
2020-11-05 16:23:54
13141
原创 配置webpack中externals来减少打包后vendor.js的体积
在日常的项目开发中，我们会用到各种第三方库来提高效率，但随之带来的问题就是打包后的vendor.js体积过大，导致加载时空白页时间过长，给用户的体验太差。为此我们需要减少vendor.js的体积，从本质上来解决这种问题。webpack的外部扩展(externals)可以有效的解决。webpack之externals官方参考文档，请戳这里→ externals下面就以Vue项目为例，介绍一下externals的使用。项目中引用了vue、vue-router、axios、iview、qs等第三方库，那么我
2020-09-18 16:34:15
533
原创 vue 判断设备是手机端还是pc端
如果项目中有支持PC和手机端的需求，并且二者页面不用，这时就要判断设置，根据不同的设置跳转不同的路由。在router/index.js文件中export default new Router({ mode: 'history', routes: [ { path: '', redirect: '/pc_index' }, { path: "/pc_index", // pc端首页 name: PcIndex, c
2020-08-12 15:59:42
3321
原创 vue中＜router-link＞＜/router-link＞添加点击事件
点击事件失败原因：router-link会阻止click事件，你可以试试只用click不用native,事件是不会触发的。而a标签不会阻止。在vue学习中遇到给router-link 标签添加事件@click 、@mouseover等无效的情况解决方案：根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。所以如果在想要在router-link上添加事件的话需要@clic
2020-08-07 09:39:49
2567
原创 vue移动端UI组件库
1. vonicvonic 一个基于 vue.js 和 ionic 样式的 UI 框架，用于快速构建移动端单页应用，很简约。中文文档 | github地址 | 在线预览2. vuxvux 基于WeUI和Vue(2.x)开发的移动端UI组件库。基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式。小编在开发微...
2020-04-27 10:27:32
2421
原创 JavaScript 错误 - throw、try 和 catch
try 语句测试代码块的错误。catch 语句处理错误。throw 语句创建自定义错误。finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。JavaScript try 和 catchtry 语句允许我们定义在执行时进行错误测试的代码块。catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。JavaScript 语句 tr...
2020-04-21 14:30:18
131
原创 vue修改UI库组件样式
vue修改第三方UI库组件样式在工作中经常会碰见设计稿和UI库的组件样式不一样，在style标签加了scoped，就无法修改UI组件的样式了，因为当前组件样式只应用到这个组件上。深度作用选择器如果你想修改组件的样式就可以使用 >>> 操作符：<style scoped> .a >>> .b { /* ... */ }</style&...
2020-04-21 14:18:54
921
原创 ztree在vue中使用
ztree在vue中使用步骤1.npm install @ztree/ztree_v32.由于ztree依赖jquery，所以也要下载jquery npm install jquery3.项目build的时候自动加载jquery，并且输出到jQuery中，需要做配置在webpack.dev.conf.js和webpack.prod.conf.js中配置new webpack.Provid...
2020-04-20 15:14:27
1709
转载 vue中正确使用jQuery的方法
题主Vue小白，入门demo时想在其中使用jQuery（当然可能是不推荐的做法哈，毕竟俩儿的风格不一样，但万一你就需要呢 ^ ^），结果遇到问题，最终倒腾解决。编译报错：$ is undefined or no-undef ‘$’ is not defined假设你已经使用vue-cli搭建好了开发的脚手架，接下来，看下面。1.NPM 安装 jQuery，项目根目录下运行以下代码npm i...
2020-04-20 14:52:03
812
原创 js怎么计算两个时间相差的小时数(时分秒)
方法一：function getHour(s1, s2) { var reDate = /\d{4}-\d{1,2}-\d{1,2} /; s1 = new Date((reDate.test(s1) ? s1 : '2018-1-1 ' + s1).replace(/-/g, '/')); s2 = new Date((reDate.test(s2) ? s2 : '2...
2020-04-20 14:43:20
17336
3
原创 如何搭建一个vue项目(完整步骤)
一、安装node环境1、下载地址为：https://nodejs.org/en/2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功 3、为了提高我们的效率，可以使用淘宝的镜像：http://npm.taobao.org/输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以...
2020-04-15 14:15:34
4357
原创 css修改滚动条样式
//滚动条::-webkit-scrollbar-track-piece { background-color: #fff;}::-webkit-scrollbar { width: 0px; //隐藏}
2020-04-10 11:05:57
186
原创 js 获取当前月份 第一天和最后一天
js 获取当前月份 第一天和最后一天 var now = new Date(); //当前日期 var nowMonth = now.getMonth(); //当前月 var nowYear = now.getFullYear(); //当前年 //本月的开始时间 var monthStartDate = new Date(nowYear, nowMont...
2020-04-08 14:02:30
324
原创 js下载文件
//点击下载公告 downloadResult(item) { const t = this; const data = { realPath: item.filePath, fileName: item.fileName }; t.$axios .get("/api/common/down"...
2020-04-02 09:28:31
167
原创 解决后台返回的数据和你需要的不一样（UI组件的级联菜单（antd,element等））
例如后台返回的数据是这样的：但是组件内部数据需要这样才能显示：解决方法： function tree(array) { array.map((item, index) => { if (item.children && item.children.length) { item["expanded"] = true; ...
2020-04-01 14:59:36
667
原创 CSS3实现8种Loading效果
第1种效果：html<div class="loading"> <span></span> <span></span> <span></span> <span></span> <span><...
2020-04-01 11:51:16
1015
原创 iview中动态实现menu三级菜单，多级菜单
template部分<template><div class="deskTop_page"> <Menu ref="side_menu" :active-name="activeName" theme="light" width="auto" :class="menuitemClasses" accordion :open-names...
2020-04-01 11:18:13
1714
原创 iview 的table 加矢量图icon
iview+table+icon实现table中某一列添加图标。自己项目里遇到的问题，记录一下。注意：table里的render函数的使用。第一步：render函数{ title: '站名', key: 'name', // align:"center", render: (h, params) => { return h('div', [ ...
2020-01-13 10:00:00
435
原创 iview table的render函数中如何设置元素的样式
在html5页面中，我们知道设置元素样式的方法有2种：一种是直接在元素标签中添加style属性并设置样式，另一种是给元素添加class属性然后给class属性设置样式。既然原生的html页面有这两种设置属性的方式，那么iview的render函数当然也可以这么给元素添加样式啦。render函数添加样式的两种方法：第一种方法：直接设置style属性“操作”列的render函数如下代码： {...
2019-12-19 16:26:04
6671
原创 vue中使用iview-UI表格样式修改和使用自定义模板数据渲染相关
columns中填写的数据必须是一个数组,代表的是表头相关,常用的值有:title——表头一列的名称key——表头一列与表格内数据渲染对应的键值align——文字对齐方式slot——使用自定义模板渲染表格内容时绑定的键值注：在使用slot渲染时，不需要填写key更多关于slot的使用，请查看官网教程,ctrl+F快捷搜索"solt"相关数据实例：<Table :columns...
2019-12-19 15:59:23
617
原创 iview中表格根据条件渲染
iview中render的再次使用{ title: '状态', key: 'shopAtive', align: 'center', render: (h, params) => { let resultStr = '' if(params.row.shopAtive === 1){ resultStr...
2019-12-19 15:49:59
625
原创 Vue刷新token，判断token是否过期、失效的方法
/*** 全局变量 和 设置 、配置等。。。*/ import axios from 'axios' // 引入axios import Storage from '@/assets/js/util/storage.js' // storage工具类，简单的封装 axios.defaults.headers.post['Content-Type'] = 'applica...
2019-12-19 09:56:16
2106
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人