- 博客(36)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 Vue3 el-switch @change事件在初始化时会自动调用问题
接收一个vue3项目，突然有一天，table里有个switch开关，请求数据之后就开始执行switch的change事件，我还啥都没操作，就报一推重复请求。修改成一致都没问题，找到问题了又去试了下好了，原来是后端偷偷又把数据改回来了。去网上找了一大推，都说用before-change代替change。const rec = ref(0)修改成这样就不会初始化就执行。后来又去看了其他页面的写法，没有调用。
2024-09-12 15:40:19
1543
3
原创 defineModel在vite中报错
去.vite/deps/vue.js中查找了下，确实没导出defineModel。从 Vue 3.4 开始，推荐的实现方式是使用 defineModel() 宏。在vue3中导入defineModel报错。查了vue版本低于3.4，真是个愚蠢的问题。后面去查了官网，才发现版本有问题。还是要多看官方文档，不能盲目的写。去网上找了下没有此问题。
2024-09-06 08:53:06
354
原创 小程序瀑布流布局
小程序瀑布流布局实现方案左右两边是两列，两个数组，用boundingClientRect获取左右的高度，判断下一个应该添加到哪个数组，接口用的豆瓣公共的接口，用scroll-view实现下拉刷新上拉加载更多wxml文件<import src="/commponent/cardList2.wxml"></import><scroll-view class="list-div" scroll-y="{{true}}" bindscrolltolower="handle
2022-02-10 16:14:33
996
1
原创 微信小程序Timeline 时间线
微信小程序Timeline 时间线仿ElementUI的Timeline 时间线，自适应页面与文本效果图：wxml代码：<view class="status-alarm"> <view class="line-row" wx:for="{{lineArr}}" wx:key="index"> <view class="onedot {{index===0?'dotS':''}}"></view> <vi
2022-01-20 15:39:31
1953
原创 vue + element-ui 季度选择器自定义组件
vue 年季度选择示例elementUI 提供了el-date-picker 日期选择器项目需求，要求选择季度，就需要自定义我用cdn引用的，element-icons.woff报跨域了，所有没有出来<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
2022-01-14 15:04:32
1759
原创 微信小程序在IOS真机时间显示NaN
微信小程序在苹果真机时间显示NaNIOS系统不支持2018-08-30这样的格式的时间进行格式化如果后端返回的数据格式是直接显示在界面没有问题如果要格式话 就得用new Date()，模拟器没问题，iOS真机报错界面就会显示出问题，要在方法里转换，把-替换成其他的const formateTime = dateStr => { const date = new Date(dateStr.replace(/-/g,"/")) const year = date.getFullY
2021-12-21 14:03:12
2180
2
原创 vue 高德地图按需引用
有的项目需要引入地图，不想开始加载的时候再引用created () { // console.log('created1111') if (!window.AMap) { // 引用三高地图script标签 const oScript = document.createElement('script') oScript.type = 'text/javascript' oScript.src = 'https://webapi.amap.
2021-11-11 09:58:29
564
原创 vue echarts 5版本按需引入
vue中如何引入echarts1.先安装依赖npm install echarts --save2.1全局引入main.js中配置（不推荐使用，会导致包过大，冗余多）import echarts from 'echarts' //引入echartsVue.prototype.$echarts = echarts //挂载在原型，组件内使用直接this.$echarts调用2.2组件内按需引入 ( 推荐使用 )这种方式很简单，在需要引入图表的组件引入,例如如下引入柱状图。//在组件引入基本
2021-10-19 14:41:40
1719
原创 vue keepalive include一次踩坑记录
有三个界面 onePage数据中心 twoPage用户列表 userDetails用户详情twoPage-》userDetails 缓存twoPageonePage-》twoPage-》userDetails 有问题twoPage没有被缓存include - 字符串或正则表达，只有匹配的组件会被缓存exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存store页面AppMain页面在twoPage 路由将要离开的时候配置beforeRouteLeave(to,for.
2021-09-29 17:38:20
1233
2
原创 vue-devtools安装教程（简单易上手）还不用下载
vue项目必备的调试工具各种下载，GitHub下载，各种npm进行intsall，接下来输入npm install bulid，还老是失败，报这种那种的错误，最后历尽千辛万苦弄好了，但是老崩溃，崩溃的想哭，后来尝试了手动创建文件夹，手动安装，成功了先看图自食其力的教程开启一、创建一个文件夹vue-devtools进入该文件夹，shift+右键，选择进入powershell ，进入终端。二：修改mainfest.json文件persistent修改成true安装完成找到vue-dev.
2021-09-29 10:29:38
1208
原创 页面有两个Echart怎么根据窗口变化刷新
页面有两个Echart怎么根据窗口变化刷新在vue中使用echarts图表组件，需要根据窗口大小进行渲染刚开始使用了onresize的方式监听浏览器窗口大小的变化，然后通过 mychart.resize() 方法重新渲染，mounted() { this.drawChart() window.onresize = () => { this.mychart && this.mychart.resize() } },发现只有最后一个
2021-09-14 15:05:44
1024
原创 vue自定义指令
vue自定义指令原文链接一、什么是指令学习 vue 的时候肯定会接触指令，那么什么是指令呢？在 vue 中提供了一些对于页面和数据更为方便的输出，这些操作就叫做指令，以 v-xxx 表示，比如 html 页面中的属性<div v-xxx ></div>比如在 angular 中 以 ng-xxx 开头的就叫做指令指令中封装了一些 DOM 行为，结合属性作为一个暗号，暗号有对应的值，根据不同的值，会进行相关 DOM 操作的绑定，即可以进行一些模板的操作vue 中常
2021-09-13 17:56:10
221
原创 vue中div@click不起作用
vue中div@click不起作用前提，一个外层div，样式：position: relative;，设置了点击事件@click里面用了position: absolute;绝对定位，之后点击就不起作用目前已知两种解决方法1、最外层div的z-index层级设置比里面绝对定位的大2、用@click.prevent也是可以的v-on的指令修饰符.stop - 调用 event.stopPropagation()。.prevent - 调用 event.preventDefault()。.
2021-09-08 15:50:08
11893
5
原创 vue中axios改变header为application/x-www-form-urlencoded不起作用
vue中axios改变header为application/x-www-form-urlencoded不起作用axios默认的头是这个，一般get请求是这个头config.headers[‘Content-Type’] = ‘application/json’如果post接口，后端给的头是application/x-www-form-urlencoded需要引入qs,然后转码，qs是axios自带可直接使用，不用安装import Qs from 'qs'//然后把参数转码export fu
2021-09-08 15:25:39
2156
1
原创 css 使用linear-gradient画虚线
css 使用linear-gradient画虚线原文链接https://www.haorooms.com/post/css_dashed_method前言css生成虚线，前端小儿科。一般都会用border来实现，不做深入考究，但是生成如下虚线？如何操作？实现方式实现方式，有的人用多个span生成，一个小圆点就是一个span，这样是可以，但是整个状态改变比较麻烦，有什么方式生成可以控制的虚线呢？生成dashed生成横向线生成dashed虚线，一般是通过linear-gradient +
2021-09-07 09:50:31
2435
原创 日常开发git常见命令
日常开发使用的git提交代码的方法一、初始化本地仓库，提交代码，提交到远程git仓库1、初始化代码仓库git init2、将当前目录下的所有文件放到暂存区git add .3、查看文件状态git status4、添加提交的描述信息git commit -m “提交的描述信息”5、远程仓库地址git remote add origin “远程仓库地址”6、推送到远程仓库git push -u origin master二、创建分支，提交代码到分支1、创建切换分支git chec
2021-09-01 14:39:40
66
原创 微信小程序 用户登录界面，用户名无法切换输入法问题解决方法
【问题描述】iOS下，用户登录界面，两个相邻的input，第一个输入用户名，第二个输入密码（password），若用户手机中只有英文输入法和搜狗输入法的话，点击第一个用户名输入框，会发现出来的键盘是英文键盘，且无法切换输入法（输入法切换的小地球按钮不出现）。但并不是所有机型都出现，iPhone 7+iOS13.3就OK的，iPhone X+13.3.1下就会出现此bug。【解决方法】在两个input之间加一个input<input placeholder="" disabled="false
2021-08-26 09:58:11
2238
2
原创 vue 路由二级跳转三级路由,路径变化页面没变
记录下路由跳转，二级路由跳转到三级路由（hidden为true）路径变化页面没变比如账号列表（二级路由）跳转到账号详情（三级路由）routes的index页面，已设置details页面为hidden为true在账号列表页面有个按钮，this.$router.push到user-details如果在这个页面不添加就是上面的情况可是如果只添加了这句，那还是路径变化页面没变，其实已经变了，只是两个共用一个div模板，都是在这个模板上，所以需要把账号详情这个页面absolute到前面
2021-08-11 14:42:01
4936
原创 vue route meta使用img标签显示图片
vue route meta使用图片meta icon下载的模板默认使用的是svg图片，可以去iconfont下载svg图片如果想使用设计的图片，sidebar中item.vue文件中有三种方式引用图片，一种element样式的el-icon，一种是使用img标签，一种是svg使用img标签的时候 path: '/data', component: Layout, redirect: '/data/data-center', meta: { title: '接种信息
2021-08-09 11:19:03
1511
2
原创 vue 公告通知text左右滑动
效果图<template> <div class="maq-div"> <img class="icon-alarm" src="../assets/image/horn.png" /> <div class="marquee-wrap" ref="marquee-wrap"> <div class="scroll" ref="scroll"> <
2021-07-26 11:01:25
645
原创 小程序 scroll-view X轴滑动
小程序 scroll-view X轴滑动符合三个条件就行（1）scroll-x=“true”（2）父容器：white-space: nowrap;（3）子元素：display:inline-block
2021-07-13 10:27:54
600
原创 vue require 报 node_modules/babel-loader/lib错误
vue require 报 node_modules/babel-loader/lib错误vue项目中报这样的错误：…/…/assets/images/11.png in ./node_modules/cache-loader/dist/cjs.js??ref–12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref–0-0!./node_modules/vue-loader/lib??vue-lo
2021-06-08 19:29:41
3852
原创 css文字超出一行显示省略号
css文字超出一行显示省略号代码如下 <div class="text_div" > <p>坚持党要管党、从严治党,推进党的建设一切跟党走</p> </div> <style> .text_div{ width: 100px; height: 100px; background-color: gray;
2021-06-03 09:47:45
1219
原创 微信小程序使用异步神器async-await
前言大家都知道为什么要使用，直接上干货找到公共的util.js文件const toAsync = function (names) { return (names || []) .map(name => ({ name, member: wx[name] })) .filter(t => typeof t.member === "function") .reduce((r, t) => { r[t.name].
2021-06-01 11:47:23
807
原创 微信小程序使用less编写css样式
微信小程序使用less样式编写小程序，如果一直用微信开发者工具，也是可以的，只是我们是前端，写惯了 less/sass，但是现在开发小程序缺还是 css，很不习惯vscode 的 Easy-less 的插在应用商店搜索Easy-less该插件然后找到设置点击设置json"less.compile": { "outExt": ".wxss" }注意：".wxss"前面要有个空格，我就是自己写的没注意空格，结果保存less文件没有自动生成wxss文件，所有一定要
2021-06-01 11:25:49
672
原创 微信小程序隐藏滑动条
微信小程序隐藏滑动条在全局配置app.wxss样式添加::-webkit-scrollbar { display: none;}就可以了
2021-06-01 11:07:40
380
原创 Promise的使用
Promise的使用一、Promise是什么？Promise是最早由社区提出和实现的一种解决异步编程的方案，比其他传统的解决方案（回调函数和事件）更合理和更强大。ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。二、Promise是为解决什么问题而产生的？promise是为解决异步处理回调金字塔问题而产生的就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数三、Promise的两个特
2021-06-01 11:00:59
172
原创 前端知识
前端知识标题阿里使用过的Koa2中间件Koa-body原理介绍自己写过的中间件有没有涉及到Cluster介绍Pm2Master挂了的话Pm2怎么处理如何和MySQL进行通信React声明周期及自己的理解如何配置React-Router路由的动态加载模块服务端渲染SSR介绍路由的History介绍Redux数据流的流程Redux如何实现多个组件之间的通信，多个组件使用相同状态如何进行管理多个组件之间如何拆分各自的State，每块小的组件有自己的状态，它们之间还有一些公共的状态需
2021-02-22 10:03:12
354
2
原创 vscode 安装PHP Intelephense 插件报错
vs code 打开PHP项目，Intelephense 报错可能的原因：你的vs code的版本和PHP Intelephense 插件的版本不一致，降低PHP Intelephense 插件的版本解决方法：进入插件管理面板，选择PHP Intelephense插件，此时可能看到的是1.3.2版本的，选择安装其他版本->1.2.3，安装完毕重启IDE->问题解决。...
2019-12-16 13:13:21
3724
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人