- 博客(37)
- 收藏
- 关注
RSS订阅原创 关于下载功能
需求：下载日志，大小不固定，需要导出tar.gz文件格式的包项目框架：Vue问题描述：// 开发日志-下载export function downloadDevelopLog (data) { return axios({ url: '/log/hosts:download', method: 'post', data })}const FileSaver = require('file-saver') // 使用的插件downloadDevelopLo.
2022-02-24 10:40:22
440
原创 Vue的eventBus-事件总线
在Vue中，组件之间的数据传递一般都是父子组件传递数据，但是在项目的实际应用当中，也存在没有关系的组件也需要传递数据，此时就不能用父子传递数据那样用props/emit的方法来实现。这个时候可以使用eventBus来实现。eventBus相当于一个全局的事件的仓库，任何一个组件都可以去获取这个事件。使用方式如下：我们一个demo，有两个毫无关系的A组件和B组件，现在B组件想要使用A组件中的数据，我们可以这样使用--------Step1 初始化我们可以在utils目录中创建一个eventBu.
2021-10-08 16:47:32
272
原创 cookie的使用和封装
当前文章主要总结cookie的使用方法，后续陆续补充设置cookie// 1、设置的cookie不带有效期，则关闭浏览器时cookie被清除document.cookie = 'name=Licy'// 2、设置的cookie带有效期,即：在有效期内，即使关闭了浏览器当前的cookie还是存在的let data = new Date().getTime() //时间转化为毫秒let newData = new Date(data + 7*24*60*60*1000) //将过期时间设
2021-09-27 14:03:23
237
原创 css-1-媒体查询
引入方式：写法一<style> #div0 { width: 200px; height: 100px; } @media screen and (max-width: 199px) { #div0 { background: black; } } @media screen and (min-width: 200px) and (max-width: 300px) { .
2021-09-02 19:44:07
78
原创 antdv中Table组件点击当前行的任意位置选中
使用antdv的带有复选框或者单选框的table组件，只有在点击复选框或者单选框时才能选中当前行，不太方便操作，现在需要在点击当前行的任意位置就能选中当前行：官网文档vue代码<a-table :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" rowKey="id" size="small" :columns="columns" :dataSource="data"
2021-08-24 10:14:14
3906
5
原创 判断一个js对象是否是Array最准确的做法是什么
判断一个js对象是否是Array？Object.prototype.toString.call([]) === '[object Array]'另尝试输出了以下类型的判断Object.prototype.toString.call(null)输出："[object Null]"Object.prototype.toString.call({})输出："[object Object]"Object.prototype.toString.call(undefined)输出："[ob.
2021-07-16 14:22:58
274
原创 JS使用小技巧-2:可选操作符 （?.）的使用
?.操作符 用于使用隐式空检查访问嵌套对象属性var person = { name:'Licy', other:{ pro:{ val:'--' } }, love:['dance','sing','run'], say:function(sth) { console.log(`Hello ${sth}`) },}//访问属性console.log(person?.name) //Licyconsole.log(person?.o.
2021-06-25 13:42:34
165
原创 ant design vue modal实现拖拽
直接上代码:文件目录:1、globalModal.vue<template> <a-modal v-if="footer" :class="[modalClass, simpleClass]" :visible="showModal" :title="title" @ok="handleOk" @cancel="handleCancel" :width="width == '100%' ? '70%' : wid
2020-11-02 10:03:12
5060
8
原创 图片403问题
今天在开发项目的时候遇到一个很奇葩的问题，就是从后台读取一个图片列表，这个图片路径是完整的，但是页面渲染的时候就报403，起初我以为是vue的渲染机制的问题，后来怎么改也没有弄好。网上百度了一下，才知道问题的解决方法：直接上图：解决方法就是在index.html中添加一行代码就正常了。<meta name="referrer" content="no-referrer">...
2020-02-21 15:34:20
230
原创 vue如何判断v-if中的DOM元素渲染完毕？
vue如何监听符合v-if条件的dom元素渲染完毕,然后才能进行后续的操作，但是如何才能知道当前DOM元素已经渲染完毕了呢？今天在开发一个评论列表的时候一直有这个问题，使用了各种监听，还是不行，最后使用了$nextTick的回调，才解决了问题。需求如下：以上评论列表中，点击一条评论内容弹出评论框进行评论，需要使得输入框自动聚焦并且在手机浏览器中弹出键盘， 实现代码如下：...
2020-02-18 22:47:49
7744
1
原创 【未完待续】h5页面在移动端所遇到的问题总结
描述：近期在做一个移动端的教育项目，需要全部用h5开发，然后借助android和ios打包成app。目前是页面开发并联调完毕，但是被移动端装到壳子里的时候遇到了各种各样的问题，现在做一个总结，以防后期遇到。问题一：装到壳子里之后，有的手机有刘海，页面会被手机刘海遮挡住问题二：在PC浏览器模拟器中存在滚动条的时候，页面滚动流畅，但是在手机上的时候，会不流畅【解决办法】在有滚动...
2019-11-01 17:06:31
264
1
原创 【未完待续】h5 和 Android & IOS交互
在开发h5项目的时候，使用到了个人中心上传头像的功能，由于使用原生的调用手机相册相机的功能<input type="file" id='image' accept="image/*" capture='camera' name="file"><input type="file" name="file" style="margin-top:20px;">andro...
2019-10-29 17:24:08
224
原创 锚点定位的问题
在开发h5页面的时候，遇到一个锚点定位的问题，需要实现的功能如下：上面这个页面需要在手机上实现1）点击“简介”、“详情”、“推荐”时，页面滚动到相对应的位置2）当手滑动屏幕，到相应位置时，头部导航相对应的tab高亮显示首先，实现第一个功能，给每个对应的div增加相应的id="anchor_"，代码如下：以上，是实现点击导航，滚动到锚点的代码。实现滑动屏幕到相应...
2019-10-29 17:03:59
470
原创 h5结合vant框架，实现列表上拉加载下拉刷新
最近在做h5移动页面开发，并且需要用移动端android和ios将h5嵌进去。在开发过程中，使用了vant这个框架；vant文档：https://youzan.github.io/vant/#/zh-CN/intro该项目中根据后台API拿到的数据包含分页信息，首先需要用到vant框架中的van-pull-refresh和van-list <!-- 列表组件&...
2019-10-29 15:18:18
1775
9
原创 vue调用组件遇到的坑
今天再用element-ui的el-tab调用不同的组件时遇到一个奇怪的问题，上述图片中，一个组件被重复渲染了多次，代码如下：<el-tabs ref="tabRef" v-model="activeName" @tab-click="handleClick"> <el-tab-pane v-for="item in options.ta...
2019-05-13 16:50:34
662
原创 element-ui使用问题总结
1、el-input@keyup事件不生效【解决】<el-input placeholder="请输入内容" v-model="content" clearable @keyup.enter.native="search"> </el-input><el-input placeholder="请输入内容" v-model="content" clear...
2019-05-07 09:34:49
801
原创 G6根据数据绘流程图
最近有一个这样的需求，就是根据一个流程绘制一个流程图，记录自己当前所处的状态。之前有看过同事用g6，今天自己也尝试着用了一下，然后整理下，写了这个博客记录下。效果图：参考文档的链接是g6官网：https://antv.alipay.com/zh-cn/g6/3.x/demo/flow/dagre.html我是把这个代码拷贝然后做了部分修改的npm 需要安装的是npm in...
2019-05-06 15:50:26
8866
1
原创 vue-amap根据地址回显地图并mark
实现了地图选址功能后，现在来实现一个根据地址回显地图并标记的功能，效果图如下：直接上代码：main.js中引入import Vue from 'vue'import VueAMap from 'vue-amap'import App from './App'import router from './router'Vue.config.productionTip = fa...
2019-04-30 11:03:27
2035
原创 地图选址功能完善1
昨天实现的地址选址功能发现一个bug，有时候会报以上错误，有时候又是正常的，感觉好像是加载顺序的问题，然后查了好半天文档，发现在main.js中，Vue.use(VueAMap)在以上一行代码之前加入一个localStorage.clear();就好了，目前没有出现什么错误，如果后续发现bug再来完善。来来来，上代码：main.js文件import Vue...
2019-04-30 10:53:23
654
原创 地图选点功能
在详设阶段，需要实现地图选点，这个自己之前从来没有实现过，现在来实现一下，这个过程中参考了高德地图的官方开发文档和vue-amap文档，地址链接分别如下：高德地图官方文档：https://lbs.amap.com/api/javascript-api/example/map-lifecycle/map-showvue-amap文档：https://elemefe.github.io...
2019-04-29 10:56:55
3501
原创 软键盘的实现
在详设中，遇到了需要实现软键盘的地方，要实现的效果图如下实现的代码如下：<template> <div class="myIndexWrap"> <div class="keyboardWrap"> <h3>软键盘</h3> <input class="myInput" type...
2019-04-29 10:41:36
341
原创 vuex状态管理
今天看了vuex的API，自己写了一个case，然后发现，其实这个vuex也不难，反而很好用，现在整理成博文以便以后查阅。一个项目，如果需要用到这个vuex状态管理工具的话，需要先安装：npm install vuex --save通常，我们需要在项目中的src文件夹下创建一个store文件夹，然后再index.js中引入vuex，如下图store/index.js代码如下...
2019-04-19 17:44:50
123
原创 vue 列表实现选中，全选功能
话不多说，直接上代码，挺简单的，但是还是记录下来吧<template> <div class="container"> <div class="cartList"> <div class="cartItem" v-for="item in list"> <div class="selctBtn" ...
2019-04-19 14:16:44
4108
原创 vue组件间的交互(父子通信)方法总结（边用边整理）
今天突然想总结下vue组件之间的交互方法，于是边写case边整理交互方式一：使用props 和 $emit【解析】父组件通过v-on绑定一个属性向子组件传递数据，子组件通过props接收父组件的数据； 子组件通过$emit向父组件发送一个事件，父组件通过子组件发送的自定义事件进行接收子组件传递过来的数据。 vm.$emit( “...
2019-04-17 14:20:05
965
原创 BEM命名规则
解释：BEM（Block-块 Element-元素 Modifier-修饰符）规则：1、block-name--element-name2、blockName-elementName
2019-04-16 10:26:36
404
原创 随笔--前端“详设”的重要性
2019.4.13周六下午，在公司进行了前端小组代码评审，这是参加工作以来自己参与的第一次真正意义上的代码评审，会上，广哥主要是想通过这次的代码评审让我们知道“详设”也就是【详细设计】的重要性。会后，我反思总结了下这次会议的主题，自己理解的所谓的“详设”，就是在拿到需求之后，自己要先思考下每个步骤应该怎么做，用什么做，即使不写成文档也要在纸上或者在脑子里想清楚，每一个需求都要想想是复杂还是自己...
2019-04-15 14:56:11
680
原创 vue Treeselect 下拉树 只能选择第N级元素
今天在项目中遇到一个需求，就是vue下拉树只能选择第三级选项，为了解决这个问题，查阅了官方文档https://vue-treeselect.js.org/#disable-item-selection然后看到isDisabled属性可以禁止选择，具体实现代码如下：<treeselect :disable-branch-nodes="true" :norm...
2019-04-02 16:41:06
8300
4
原创 厉害了，flex布局
今天在修改项目bug的时候，遇到一个问题，说是热搜商品如果文字溢出的话就自动隐藏，之前用的方法比较老旧，今天尝试用了flex布局来实现，发现真的挺简单的。之前的bug如下图之前的代码如下：<p> <i v-for="item in keywords" @click="$router.push({name:'searchGoods',query:{...
2019-04-02 10:47:44
234
原创 CSS 网格布局
<div class="container"> <header>Header</header> <nav>Nav</nav> <main>Main</main> <aside>Aside</aside> <footer>Footer<...
2019-04-01 13:45:30
111
原创 css3画步骤条 矩形向右箭头
要实现的效果如图：代码如下：<template> <div class="page"> <div class="title">我要开店</div> <p style="padding-top:25px;">一个身份只能开一家店；开店后店铺无法注销；申请到正式开通预计需1-3
2019-02-21 09:06:30
4169
4
原创 解决图片上传 显示图片慢的问题
问题描述：点击上传图片到服务器，接口回调成功，预览图片时加载慢原因：从服务器上下图片跟网络有关解决问题：上传图片成功预览本地图片//上传文件接口 uploadPic(event, num) { var that = this; var imgSrc =null; var setImgSrcHandle =null; var f...
2019-01-31 17:08:34
8359
原创 vue Treeselect 下拉树选择框出现unknown问题
如何安装自行百度引用 之前遇到的情况是一直显示unknown，查阅资料之后，才知道，当下拉树是单选的时候，绑定的值设为null,必须是null，不能是‘null’，初始化的时候才不会出现unknown还有就是在normalizer中要处理下空节点 options的值是个树形结构的数组，normalizer属性，是用于转换options的值的，把options的值...
2019-01-30 14:37:33
6614
原创 vue&element-ui搭配使用rules表单校验规则
验证手机号&邮箱的写法data() { var checkPhone = (rule, value, callback) => { const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/ if (!value) { return callback(new Error('手机号不...
2019-01-15 10:43:02
6064
原创 vue 在使用element-ui时import 'element-ui/lib/theme-chalk/index.css‘时一直报错
1.在package.json中确认style-loader是否下载，如果下载，是否在config文件中进行配置配置文件如下： { test: /\.css$/, loader: 'style-loader!css-loader', exclude: /node_modules/}如果仍然无法正常运行，则是因为在elmen...
2018-08-27 17:01:48
20639
原创 用CSS将select/option文本居中
<select> <option value="0">0</option> <option value="1">1</option> </select>select { width: 70px; height: 37px; text-align: cent
2018-06-15 09:59:49
1589
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人