- 博客(89)
- 收藏
- 关注
RSS订阅
原创 vue——element-ui项目中用如何点击导航菜单进行当前页面的router切换？图解只需三步！
先给大家模拟一下场景：想要的效果：下面来看需要配置项 使用element-ui的 NavMenu导航，里面的菜单属性里有详细的介绍。第一步配置属性，并把每一项的index改为想要跳转的path：第二步在Home页加上< router-view />插槽：第三步查看路由配置：...
2019-06-25 16:11:33
19287
28
原创 论自律对成长的重要性
今天和大家分享一下生活上的经验，其实也不算是经验，偶然间看到了一个毕业两年的学长，发的一片关于自律的文章，我觉得深有感悟，回想起自己，并不是一个合格的自律者，大学时期，宿舍一共4个人，室友们一起说好每天跳的一个减肥操，每次都会只坚持到周五的晚上， 周六日的时候就会想尽办法说服自己放假了可以歇歇了，然后这一歇就又过了数月，当哪天低头看见自己肚子上的肉的时候，又继续拿出那套减肥操的视频，坚持几天又...
2019-01-23 16:45:18
4898
4
原创 Git：误将master分支污染了时，你该怎么做？从某个commit开始检出一个新分支
【代码】误将master分支污染了时，你该怎么做？提交记录回退？
2023-03-23 09:43:11
604
原创 vue数组分组递归（按数组加合分组，如小于等于100时分一组）
使用场景：(由数组a 得到 数组b)数组 a:[30,20,30,50,50,40,30]数组 b:[[30,20,30],[50,50],[40,30]] mounted(){ let a = [30,20,30,50,50,40,30] //原数组 let b = [] //新书组容器 let max = 100 //期望最大加合100为一组 let newArr = this.getArr(a,max,b) //新数组 } methods:{ // 分组方法：三个参数
2022-03-29 10:00:49
2154
原创 vue 移动端中使用WebSocket对话
效果：代码：import { Toast } from "mint-ui";export default { data(){ return{ websocket: null, keyWord:'', searchKey:'search_qa' } }, mounted(){ // 初始化WebSocket this.initWebSocket() }, methods:{ // 初始化 in
2022-03-17 15:08:04
3299
4
原创 css 录音声波动效
想要的效果：类似微信的按住说话功能：HTML<div class="time-box"> <span class="start-taste-line"> <hr class="hr1" /> <hr class="hr2" /> <hr class="hr3" /> <hr class="hr4" /> <hr class="hr5" />
2022-03-17 14:27:32
4041
原创 vue中使用jquery 滑动到页面底部
期望点击按钮或其他操作时可以滚动到底部方法： // 滑动到底部 scrollToBottom(){ this.$nextTick(() => { //要滑动的高度= 当前dom的滑动高度 - 当前窗口可视区域高度 var height = $("#scrollBox")[0].scrollHeight - $(window).height(); $("#scrollBox").scrollTop(height)
2022-03-16 14:41:06
1659
原创 vue 数组分组递归（按个数分组，如3个一组）
使用场景：(由数组a 得到 数组b)数组 a:[1,2,3,4,5,6,7]数组 b:[[1,2,3],[4,5,6],7] mounted(){ let a = [1,2,3,4,5,6,7] //原数组 let b = [] //新书组容器 let num = 3 //期望3个为一组 let newArr = this.group(b,a,num) //新数组 } methods:{ // 分组方法三个参数分别是 新数组，原数组，几个分为一组 group(newA
2022-03-16 13:48:29
4083
原创 EventBus组件通信 vue 两个无关的组件间通讯
EventBus相当于系在两个组件的桥梁，两个页面通过EventBus进行传递参数，调用方法。示例： A页面调用B页面的方法第一步：建立EventBus文件在src下建立utils文件夹，utils文件夹下创立EventBus.js import Vue from 'vue'; /** * 事件总线 * @usage: * EventBus.$emit('event',payload); * EventBus.$on('on',(payload)=>{}); */ co
2022-03-10 14:12:35
1097
原创 rem用法-两步实现响应式布局
rem 根据根目录字体大小来适应1:设置html字体大小<style> html { font-size: 625%; }</style>2:使用：1rem == 100px<style> div { width:1rem; // 100px height:0.5rem; // 50px }</style>...
2022-03-07 19:12:58
623
原创 vue移动端 滑动到底部加载文章，实现下拉文章分页加载效果
html：<template> <div class="rink"> <div class="top-list scroll-wrap" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" :infinite-scroll-immediate-check="true" infinite-scroll-distance="70"> <
2022-02-22 17:53:39
1250
2
原创 解决报错: `defaultValue` is invalid for `getFieldDecorator` will set `value`, please use `option...
报错原因：当我的input 绑定了v-decorator的时候，又设置了default-value默认值，如下： <a-input v-decorator="[ `name`]" default-value="默认文字" />就会报错：Warning: defaultValue is invalid for getFieldDecorator will set value, please use option.initialValue instead.解决办法：在v-deco
2022-02-21 16:15:17
5689
3
原创 css 全局滚动条样式美化
css代码 *::-webkit-scrollbar { /*滚动条整体样式*/ width: 6px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } *::-webkit-scrollbar-thumb { /*滚动条里面深色条*/ border-radius: 10px; box-shadow: inset 0 0 5px rgba(236, 236, 236, 0.1); background: #ccc; } *::-webki
2022-02-09 11:14:02
921
原创 antd vue Tree组件，通过key递归获取该节点信息
<template> <div class="tzgl_wrap"> <a-tree :tree-data="treeData" @select="treeSelect" default-expand-all > <template slot="title" slot-scope="{ title }"> <span
2022-01-13 20:45:46
4131
2
原创 vue 移动端调试工具Vconsole用法
npm 安装 npm install vconsole使用import VConsole from 'vconsole'new VConsole()
2021-12-30 21:54:40
618
原创 js replace替换字符串中某个指定字符
首个替换 ‘/’let str = '苹果/香蕉/橘子'str.replace(/(\/)/, '-'). // 苹果-香蕉/橘子'全局替换’/’ +glet str = '苹果/香蕉/橘子'str.replace(/(\/)/g, '-'). // 苹果-香蕉-橘子'首个替换 ‘0’let str = '020202'str.replace(/'0'/g, '-'). // -20202'全局替换’0’ +glet str = '020202'str.replace
2021-12-28 20:30:08
2859
原创 vue 页面加载完成后引用js文件
如果希望在页面加载完成之后引入某个js，需要把代码写在mounted里引用本地的js直接写 require(’./xxx.js’)即可 mounted(){ let nav = document.createElement('script')。//创建script标签 nav.type = 'text/javascript'; nav.src = require('./xxx.js') //静态资源 }引用外部链接，需要在src赋值后，通过appendChil
2021-12-24 17:23:18
3422
原创 vue this.$router.push 跳转新页面 传参
项目场景：点击首页搜索按钮，跳转到搜索落地页（新页面形式）跳转方法： let routeInfo = this.$router.resolve({ path: '/page/search',query:{keywords:value} }); window.open(routeInfo.href, '_blank');接收参数：this.$route.query.keywords 注意： 因为是跳转新页面，所以传递参数只能用query，用params传参在目标页面获取不到。...
2021-12-23 20:30:55
2670
原创 video标签自定义宽高
只需给video标签加上object-fit:cover； 即可实现自定义宽高video{ object-fit:cover； }
2021-12-23 10:20:34
2757
原创 解决css设置背景图尺寸后，图片模糊
今天在做项目的时候，发现有一张背景图片里面是文字，然后用了background-size:100%; 后，图片模糊了。解决办法：给当前元素css添加以下代码 image-rendering: -webkit-optimize-contrast;
2021-12-09 17:23:54
2907
原创 解决swiper loop=true点击事件失效问题
今天遇到一个问题，一个循环轮播的swiper，当设置loop为true的时候，部分swiper-slide的点击事件失效了原因： loop为true时，会自动复制首尾dom，复制时并不会复制dom上的点击事件解决办法： 去掉swiper-slide上的点击事件，在new Swiper 里定义事件，代码如下 let Swiper = new Swiper("#mySwiper", { direction: "vertical", //纵向轮播
2021-12-02 20:14:17
4472
原创 vue打印插件，使用教程
第一步：文件里新增一个print.js// 打印类属性、方法定义/* eslint-disable */const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint': '.no-print' }, options); if ((typeof dom) ===
2021-11-25 15:23:28
4152
原创 window.print 打印文章时设置字体及解决每页跨页截断问题
最近在用到了打印的功能，然后就出现了一个这样的问题，分页的时候最后一行不会自动换行会直接截断：解决办法： //@media print只有调用打印的时候会生效 @media print { // 设置文章标题字体 .article_content { font-size: 20px !important;} .title { font-size: 28px !important; } //解决断行问题 .article_content { -we
2021-11-24 15:45:21
3567
原创 vue 调后台接口实现导出excel表格功能
今天遇到了一个导出excel表格的功能（如图）实现导出分三步：第一步：定义API接口的时候添加 responseType: “blob” // 导出策略结果 downloadStrategyResult(params) { return request({ url: `/inspect/excel`, method: "post", data: params, baseURL: "/store", responseType:
2021-08-10 16:42:05
4380
8
原创 Ant Design Vue Pagination分页组件的封装与使用
今天封装一个常用的组件 Pagination 分页因为是 Ant Design Vue 的组件，所以必须安装Ant Design Vue才能使用哦～使用组件（可参考Ant Design Vue 快速上手）：$ npm i --save ant-design-vue第一步：首先创建一个组件文件Pagination.vue ，完整代码：<template> <div class="mz-antd-pagination"> <a-pagination
2021-05-21 16:30:25
4633
原创 vue 动态渲染表格序号列
当前demo用的是 Vue + Ant Design Vue 框架的，如果用的是Element-UI 应该也是差不多的原理。总结三种方法：第一种：动态在表格数据添加一个index 序号字段template： <template> <div class="table-list"> <a-table :columns="columns" :data-source="tableData" :locale='{e
2021-05-20 14:55:45
1776
原创 vue swiper 动态加载/插入数据时，默认跳到第0项，问题解决
需求场景：swiper默认展示第二项，然后在change的时候，判断如果当前项等于0 就给数组最前面插入一项最关键的两点：在swiper的最外层 加 v-if=“swipershow”<u-swiper v-if="swipershow" :list="list" :current="current" @change="change" :autoplay="false"></u-swiper>在改变swiper数据后重新渲染swiper组件在这里插入代码片
2021-05-14 01:53:51
1076
原创 vue input 限制字节长度为50个字节（25个汉字，50个英文字符）
在input的change事件中调用此方法：html:直接使用 <vs-input class="w-full" v-model="formData.goodsAlias" placeholder="请输入名称" @input="changeValue('goodsAlias')" //调用方法 @keyup.enter="changeValue('goodsAlias')" //回车键 />配合maxlength属性进行使用 &
2021-04-09 14:56:17
8878
原创 为什么有的编程规范要求用void 0 代替 undefined?
undefined和void 0 的区别：undefined 类型表示未定义，它的类型只有一个值就是undefined。void 运算符能对给定的表达式进行求值，并返回undefined。void后面跟任意表达式返回的都是undefined，例如void(1)、void(‘test’)，写void 0 是因为 void 0 是表达式中最短的一个。为什么要用void 0 来代替undefined： 任何变量在赋值之前都是undefined类型，但是
2021-01-06 17:10:42
422
2
原创 new Date() 时间格式转换YYYY-MM-DD hh:mm:ss
把 Wed Oct 07 2020 00:00:00 GMT 0800(中国标准时间)转换为 YYYY-MM-DD hh:mm:ss// 时间格式转换 YYYY-MM-DDexport function getDayTimer (data) { var date = new Date(data) var y = date.getFullYear() var m = date.getMonth() + 1 m = m < 10 ? ('0' + m) : m var d = d
2020-10-24 10:41:31
7317
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人