踩坑日记
关注
分享
扫一扫
在知识的海洋里奋力狗刨
这个作者很懒，什么都没留下…
展开
-
vant 2 弹出框报错 Uncaught (in promise) cancel
vue-cli3 + vant使用了Dialog异步关闭的官方示例, 点击取消时, 控制台报错 Uncaught (in promise) cancel, 不影响一般用户使用, 但是看着不舒服原因分析：confirm使用了promise, 需要在confirm后加catch, 否则无法捕获错误...原创 2022-06-12 12:22:33 · 1600 阅读 · 1 评论 -
使用readAsDataURL过程中遇到的问题
项目场景：用户头像编辑: 需要用户从本地选择图片后, 能在本地预览和简单编辑图片问题描述使用的readAsDataURL生成图片的本地预览地址。用户选择小图片时还好，一旦超过5M, 选择后会卡一下，后面的简单编辑（使用了图片的css属性clip）更是卡的不行getImgSize(imgFile) { return new Promise((resolve, reject) => { let reader = new FileReader(); reader.readAsD原创 2022-05-31 13:01:32 · 2163 阅读 · 0 评论 -
element-ui的Loading组件不渲染, 也不报错
项目场景：vue应用, 想着在路由变化的时候, 有一个加载的过程, 正好有用到element-UI, 直接使用其中的Loading组件问题描述思路是: 监听到路由变化时, 开启Loading, 当前路由组件获取到数据后, 关闭Loading.开启Loading时, 是通过在<router-view>上的id获取开启Loading的target选项.结果在路由变化时, 页面并没有效果. 检查页面, 没有渲染, 但也没报错<router-view :searchWords=原创 2022-03-17 11:45:57 · 2209 阅读 · 0 评论 -
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 · 221 阅读 · 0 评论 -
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 · 2988 阅读 · 0 评论 -
提示输入框功能blur事件与click事件冲突解决
问题描述：demo大概模样: 搜索框中输入关键字, 下方弹出提示, 点击提示词条, 去往相应的词条页面(这里用alert代替); 而搜索框失去焦点时, 会隐藏下方的提示内容代码如下:<body> <div class="container"> <input type="text" id="input" placeholder="输入关键字" /> <ul class="test" id="test"> <li>原创 2021-03-08 22:54:01 · 505 阅读 · 0 评论 -
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 · 938 阅读 · 0 评论 -
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 · 3052 阅读 · 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 · 113 阅读 · 0 评论 -
踩坑日记(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 · 186 阅读 · 0 评论