在知识的海洋里奋力狗刨-CSDN博客

原创 vant 2 弹出框报错 Uncaught (in promise) cancel

vue-cli3 + vant使用了Dialog异步关闭的官方示例, 点击取消时, 控制台报错 Uncaught (in promise) cancel, 不影响一般用户使用, 但是看着不舒服原因分析：confirm使用了promise, 需要在confirm后加catch, 否则无法捕获错误...

2022-06-12 12:22:33 1299 1

原创 vue-cli3使用autoprefixer(在本地运行和打包时)自动添加浏览器前缀

vue-cli3中autoprefixer的可能配置

2022-06-10 23:48:39 698

原创使用readAsDataURL过程中遇到的问题

项目场景：用户头像编辑: 需要用户从本地选择图片后, 能在本地预览和简单编辑图片问题描述使用的readAsDataURL生成图片的本地预览地址。用户选择小图片时还好，一旦超过5M, 选择后会卡一下，后面的简单编辑（使用了图片的css属性clip）更是卡的不行getImgSize(imgFile) { return new Promise((resolve, reject) => { let reader = new FileReader(); reader.readAsD

2022-05-31 13:01:32 1906

原创 element-ui的Loading组件不渲染, 也不报错

项目场景：vue应用, 想着在路由变化的时候, 有一个加载的过程, 正好有用到element-UI, 直接使用其中的Loading组件问题描述思路是: 监听到路由变化时, 开启Loading, 当前路由组件获取到数据后, 关闭Loading.开启Loading时, 是通过在<router-view>上的id获取开启Loading的target选项.结果在路由变化时, 页面并没有效果. 检查页面, 没有渲染, 但也没报错<router-view :searchWords=

2022-03-17 11:45:57 1965

原创 vue中非 prop 的 Attribute处理

项目场景：vue-cli搭建的单页面应用问题描述父组件通过prop将数据传递给子组件, 偶然遇到父组件传递了多个数据, 但是子组件只能接受其中一些的情况, 示例代码如下:<template> <div class="father"> 父组件 <son :data01="data01" :data02="data02" /> </div></template><script>import son

2022-03-10 19:50:12 169

原创 vue项目,在img元素绑定load事件, 获取到的事件对象target为null

项目场景：vue单页面应用问题描述：在img元素上绑定load事件, 并传入事件对象, 打印时发现获取到的事件对象中, 包括target在内的部分值为nulltemplate部分代码<img :src="item.coverImgUrl + '?param=200y200'" @load="imgLoaded($event)" class="target-image" width="200" height="200"/>script部分代码imgLoa

2022-02-19 23:56:18 2741

原创 vue组件生命周期钩子执行顺序

页面效果如下:简易结构如下:执行顺序如下:从中可以看出:存在嵌套结构时, 先是父组件执行beforeCreate, created, beforeMount, 然后是子组件执行beforeCreate, created, beforeMount, mounted, 最后是父组件执行mounted.不存在嵌套结构, 即并列的子组件, 这里是按照从上到下的顺序依次执行beforeCreate, created, beforeMount, 然后也是按照从上到下的顺序执行mounted.

2022-02-19 00:56:00 482

原创 git提交代码时账号或密码错误

场景：在vscode中使用git提交代码到远程仓库, 弹出提示框, 提示输入用户名和密码问题描述：忘记用户名和密码, 随便输入一个后, 提交失败, 同时提示用户名或密码错误. 解决方案：1. 打开电脑的"控制面板 ", 找到"用户账户"找到"管理windows凭据"找到git相关凭证, 删除或编辑如果修改凭据后, 提交仍报错(用户名和密码无误), 建议删除该凭据, 退出vscode后重进, 这时提交代码的时候, 会重新弹出输入用户名和密码的提示框, 输入正确的用户

2022-02-18 21:42:42 3378

原创盒子拖动demo

：盒子拖动demo(兼容主流PC端浏览器, 行为基本一致)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } #

2021-03-22 15:16:30 64

原创提示输入框功能blur事件与click事件冲突解决

问题描述：demo大概模样: 搜索框中输入关键字, 下方弹出提示, 点击提示词条, 去往相应的词条页面(这里用alert代替); 而搜索框失去焦点时, 会隐藏下方的提示内容代码如下:<body> <div class="container"> <input type="text" id="input" placeholder="输入关键字" /> <ul class="test" id="test"> <li&gt

2021-03-08 22:54:01 389

原创 jQuery插件atwho.js实现@提示框过程中碰到的问题

场景：demo主要使用技术: **vue, elementUI, jQuery, atwho.js**最终效果：用户点击分享按钮, 弹出如下的分享对话框, 接着用户在多行文本输入框textarea中输入@时, 会在@下方出现提示框, 可以使用键盘上下方向键或鼠标选择提示框中的选项关键代码:renderAt() { let _this = this; $(function () { let atConfig = { at: "@", da

2021-03-01 22:08:15 799

原创 vue按需引入element-ui中的infinite-scroll(无限滚动)指令

步骤1.单组件引入指令代码如下（示例）：<template>...</template><script>import { InfiniteScroll } from "element-ui";</script><style lang="less"><style>2.指令注册代码如下（示例）：<template>...</template><script>impor.

2021-02-27 20:04:01 2757 1

原创踩坑日记(2)

项目场景： vue单页面项目, 点击a标签在新窗口打开页面问题描述：点击a标签在新窗口打开artistDetail页面或userIntroduction页面, 但是打开的页面, 却是项目根目录页面, 检查浏览器地址栏, url为'/artistDetail?arId=...#/'或'/userIntroduction?uid=...#/'原代码如下：<a target="_blank" :href="(item.type == 0) ? ('/artistDetail?arId='

2020-12-27 21:22:13 89

原创踩坑日记(1)

场景：vue单页面项目中, 引入element-ui, 使用其中的Backtop组件问题描述：按照官方文档示例引入到项目中, 代码如下: <template> <div class="app"> <app-top></app-top> <router-view></router-view> <el-backtop target=".app" :bottom="100" :visibil

2020-12-15 00:28:58 143

原创 vue单页面应用, 页面刷新, 后退, 前进及关闭时, vue执行的生命周期钩子

vue单页面应用,页面刷新, 后退, 前进及关闭时, vue执行的生命周期钩子页面刷新时, vue执行的生命周期钩子页面后退时, vue执行的生命周期钩子页面前进时, vue执行的生命周期钩子页面关闭时, vue执行的生命周期钩子页面刷新时, vue执行的生命周期钩子依次执行当前页面vue组件的beforeCreate, created, beforeMount, mounted, beforUpdate, updated页面后退时, vue执行的生命周期钩子假设从b页面后退到a页面依次执行

2020-12-12 12:34:49 6930 1

原创 vue中修改v-html渲染的内容样式

<template> <div class="mainContainer" v-if="selectedData"> <h3>{{ selectedData.planetName }}</h3> <div class="planetImg"> <img :src="`http://localhost:1337${selectedData.planetImg[0].url}`" alt=""&gt

2020-07-24 11:40:55 1757

原创 a随便写的nodejs学习笔记(4)

nodejs解析请求参数01-nodejs接收get请求参数前端发送get请求的参数是直接在url后面拼接，格式是： url?key1=value1&key2=value2…//1.导入模块const http = require('http');const url = require('url');//解析get请求参数//2.创建服务器let server = http.createServer((req, res) => { //(1)将url中的中文进行转码

2020-05-23 23:06:10 143

原创 a随便写的nodejs学习笔记(3)

nodejs搭建简易的静态资源服务器首先大致的文件及路径如下:其中的index.html文件内容如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-

2020-05-22 21:56:35 132

原创 a随便写的nodejs学习笔记(2)

nodejs的http服务器模块// 01-http模块搭建服务器//1.导入模块（安装phpstudy）const http = require('http');//2.创建服务器 (打开phpstudy)/* req :request 请求对象（负责存储浏览器的请求信息）res : response 响应对象（负责响应数据的对象）*/let server = http.createServer((req,res)=>{ //服务端每收到一个客户端请

2020-05-21 22:53:27 19555

原创随便写的nodejs学习笔记(1)

1. vscode中运行nodejs文件在vscode中直接右键要运行的文件 => 在终端中打开 => 在打开的终端窗口中输入'node 要运行的文件的文件名' 2. nodejs的fs模块//01-readFile读取文件(注意要事先在nodejs文件的同一级目录下新建一个data文件夹, 里边新建一个a.txt文件, txt文件里边随便写点内容)//1.导入模块//参数：模块名//返回值：对象。这个对象存储模块中所有的APIconst fs = require('fs')

2020-05-21 22:16:46 255 1

原创自用vscode常用代码片段

随便设置的标题如何插入一段漂亮的代码片下面展示同样高亮的代码片.#user nobody;worker_processes 1;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid logs/nginx.pid;events { worker_connections 1024;}http {

2020-05-18 22:01:54 1069

ahq2018的博客