VUE
关注
分享
扫一扫
文章平均质量分 70
梅子丨朱
孤独是一个人的狂欢
展开
-
js前端无滚动条滑动组件实现
应用背景 一般在日常web页面开发中，经常会遇到滑动区域的操作，pc端开发滚动区域时大都会采用滚动条的形式，而移动端则大多时候滚动条时多余的。当然，可以想方设法把滚动条隐藏，但是有更多关于滚动限制或者封装组件逻辑时，不是很方便处理。 故本文通过css的transform来滑动区域，使用transition来实现滑动过渡。其中包含弹性滑动，快速滑动和慢速滑动，横向滑动，纵向滑动等方案实现。技术实现 css布局采用外层一个壳子,内层一个绝对定位的待滑动区域即可。滑动时计算好滑动距离，利用c原创 2021-08-28 13:56:38 · 1731 阅读 · 0 评论 -
vue this.$nextTick的作用（echarts不能实际获取dom的宽度bug）
事情是这样的，规定的dom元素width：100%；echart里面设置了偏移，所以dom设置的时候echart获取宽度不一样。这样能再文档确定下来之再渲染ecahrt。this.$nextTick是指文档元素变更结束之后开始调用。...原创 2020-10-12 16:48:44 · 1531 阅读 · 0 评论 -
vue初始化了form表单数据但是页面首次加载不渲染
在vue里出现明明从后端初始化了表单数据，但是页面首次加载不渲染，原因可能是初始化form的时候这样：data() { return { this.form={} }}或许你需要这样：data() { return { this.form={id:"",type:"" ......} }}那么，这是为什么呢？知其然，还要知其所以然。我们要从vue的深入响应式原理分析，官网解释：想必看到这就明.原创 2020-08-24 17:20:08 · 4604 阅读 · 3 评论 -
两个例子教你弄懂VUE中的$nextTick
我们知道VUE是异步更新队列，详情见官网http://doc.vue-js.com/v2/guide/reactivity.html通过官网，我们也可以知道$nextTick是在DOM渲染之后执行的方法，初次接触可能有点蒙，哥呢，就是懒，利用菜鸟编译器就动手了。这上面的东西也是非常好，来个连接：https://www.runoob.com/vue2/vue-watch.html下面来两个实...原创 2019-08-26 17:57:01 · 840 阅读 · 0 评论 -
关于vue中v-for里不能直接使用method方法的一点点思考
今天遇到一个问题，是这样的，我在v-for里调用method的里的方法作为返回值传递给子组件，但是报错说getDataByPage方法是undifined，示例如下： <div v-for="(i,index) in count" :key="index"> <div class="time" v-if="len > 2"> <TimeLeftTop/> <TimeLine :list="getDataB原创 2020-08-18 17:06:00 · 3966 阅读 · 1 评论 -
关于vue组件（element ui）方法事件不能传递自定义参数的一点点思考
我们在封装组件的时候，都会封装一些方法返回值到组件中，这些方法往往参数或者返回参数固定，比如我们在运用element ui 或者iview是组件会自带很多返回值函数，往往我们在组件循环或者自定义参数需要跟随组件返回值函数参数一起传递，但是组件参数固定，这里采用一个替换的方法，比如element 自定义输入框Autocomplete：<el-autocomplete size="mini" v-model="item.name" placeholder="请输入运动员姓名"原创 2020-08-12 13:55:23 · 1151 阅读 · 0 评论 -
关于element ui 的Checkbox 多选框el-checkbox-group的一点点思考
我们经常会使用element ui的el-checkbox-group来作为复选框组件。实例如下：<template> <el-checkbox-group v-model="checkedCities" :min="1" :max="2"> <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox> &原创 2020-08-11 13:42:20 · 6173 阅读 · 0 评论 -
Fullcalendar 在vue中鼠标hover显示悬浮框（tippy.js插件）
从开始到放弃，从放弃到开始，哥们我以及折腾两个早上了，都有点怀疑人生了。首先，安装Fullcalendar插件，这个东西只能看官网，官网：https://fullcalendar.io/docs#toc。因为它更新快，向下也不兼容哦，一般中文文档啥的更不上官网的速度。有一个小妙招，下个有道词典，不认识的指一下就可以翻译了。具体的安装过程就不详细记录了，今天说一下鼠标hover日历事件显示悬浮框这个东东怎么实现。因为Fullcalendar文档基本是基于jquery的，所以jquery的同学很好弄，但原创 2020-08-04 12:51:21 · 8078 阅读 · 43 评论 -
vue父组件直接给子组件写click事件失效
vue封装子组件，直接在父组件中写@click=function点击没反应，写@click.native=function就可以了。@click.native是给组件绑定原生事件原创 2020-07-23 15:29:28 · 1175 阅读 · 0 评论 -
前端怎么实现搜索内容关键字标红
思路：我们可以利用js的正则表达式来匹配搜索的关键字，匹配的文字变红之后的文字在写入网页。js正则表达式：var re1 = /ABC\-001/;var re2 = new RegExp('ABC\\-001');re1; // /ABC\-001/re2; // /ABC\-001/注意，如果使用第二种写法，因为字符串的转义问题，字符串的两个\\实际上是一个\。js实现： brightenKeyword(val, keyword) { const Reg原创 2020-07-15 14:23:24 · 6634 阅读 · 0 评论 -
搭建vue2.0开发环境-新手教程
https://www.jianshu.com/p/0c6678671635原创 2019-09-11 10:39:03 · 235 阅读 · 0 评论 -
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of me
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory经过搜索，最后的解决方案是删除npmrc文件（不是nodejs安装目录npm模块下的那个npmrc文件，而是C:\Users\{账户}\下的.npmrc文件）。...原创 2019-09-11 10:36:38 · 6990 阅读 · 1 评论 -
Vue中axios踩坑之路-POST传参
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 ...转载 2019-09-10 11:25:42 · 845 阅读 · 0 评论 -
Vue移动端左右滑动效果实现方法
1. 最近得到一个新需求，需要在Vue项目的移动端页面上加上左右滑动效果，在网上查阅资料，最终锁定了vue-touch2. 下载vue-touch （https://github.com/vuejs/vue-touch/tree/next） 注意：如果Vue是2.x 的版本的话，一定要下next分支上的。3. 使用： 3.1 npm install vue-to...转载 2019-09-06 13:42:04 · 5178 阅读 · 0 评论 -
vue导入store不能用的为题
如果用cnpm install vuex --save后无法使用$store,可尝试用npm install vuex --save再试一次原创 2019-09-05 10:50:37 · 1302 阅读 · 1 评论 -
vue中的混合（minix）实例理解
minix 是个什么东西， 就是混合，把你混合给我浅显表述就是 你说 ： ‘我叫李四’， 我说 ： ‘我叫张三’，然后把你 混合给我， 就成了 我说 ： ‘我叫张三我叫李四’，所有解说都在例子里，如下：// minix.jsexport default { data () { return { ...转载 2019-09-02 09:45:01 · 4782 阅读 · 0 评论 -
VUE实现点击头像出现遮罩层的功能的两种方式
本文是为了解决点击头像，出现一个遮罩层，显示上传头像。先说一下思路，第一种是用动画的方式来移动位置，但是ie9不支持动画，ie8一下直接不支持位置移动。所以某就研究了第二种方式，就是利用相对位置的固定和display的是否显示来控制遮罩层，实现效果都差不多，个人推荐第二种，但是第一种有动画，对，就是那个高逼格的东西。直接上代码：第一种：<!DOCTYPE html><h...原创 2019-08-30 08:48:51 · 4396 阅读 · 0 评论 -
iview-render函数中Poptip气泡提示popper-class采坑记
1.我使用了iview的table组件。2.table组件里我使用了poptip组件。当然，这里我是用的render函数。3 iview组件中的table含有fixed属性，所以出现了边缘气泡超过table边界就被覆盖了。4 幸运的是在官网我找到了这个：5 但是，设置了这个属性之后，我的原来的气泡样式给弄没了。6 幸运的是，后来终于明白了其终极奥义，就是，既然该poptip是放到bod...原创 2019-08-29 15:01:47 · 2566 阅读 · 0 评论