首先在最外层div添加v-if="isReloadAlive"，并创建变量isReloadAlive = true 随后添加provide()以及reload方法，如下： export default {provide() {return {reload: this.reload}},data(){isReloadAlive : true},methods: {reload() {this.isReloadAlive = false;this.$nextTick(function(){this.isReloadAlive = true;})}}最后调用this.reload()即可 补充：下面看下vue解决刷新时闪烁问题 1.在vue容器的div里面加上 v-cloak <div...
vue动态绑定class练习。 ：class=“{ ‘类名1'：条件表达式，‘类名2'：条件表达式… }” <template><div class="app-*"><ul><liv-for="(item,i) of list":key="i"class="item"@click="clickIndex=i":class="{click:i==clickIndex}"></li></ul></div> </template><script> export default {data() {return {list: [1, 2, 3, 4],clickIndex: -1};},methods: {} }; </script> <style scoped> .item {display: inline-block;width: 10...
本文讲述，在使用VUE的移动端实现类似于iPhone的悬浮窗的效果。 相关知识点touchstart 当在屏幕上按下手指时触发 touchmove 当在屏幕上移动手指时触发 touchend 当在屏幕上抬起手指时触发 mousedown mousemove mouseup对应的是PC端的事件 touchcancel 当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发touchcancel。一般会在touchcancel时暂停游戏、存档等操作。 效果图实现步骤1.html 总结...
前言及展示 在项目中需要根据传过来的数据画出流程图，采用了GOJS插件，功能很全面，可以根据自己的需要调整，不过建议简单的流程图还是自己手写一个组件，更加便于维护和变换。有一点需要注意的是，GOJS是需要收费的，有水印，虽然可以手动去掉，但是公司用的话还是需要买。GOJS的官网上有关于在VUE中应用GOJS的小例子：Minimal GoJS Sample in Vue.js。推荐看一下，可以解决大部分简单需求，这个例子可以满足你并行步骤数比较固定...
项目要实现一些控件的拖拽排序。从而找到了这款vuedraggable控件，供大家参考，具体内容如下如上图要实现这些控件的拖拽排序 这是拖拽后由于公司网络的原因，项目没有使用npm，都是使用的引入的js <script type="text/javascript" src="lib/sortable/Sortable.min.js"></script> <script type="text/javascript" src="lib/vuedraggable/vuedraggable.min.js"></script>布局代码 <el-form :inline="true"><draggable v-model="filte...
本文实例为大家分享了vue.draggable实现表格拖拽排序效果展示的具体代码，供大家参考，具体内容如下 主要使用vuedraggable和sortablejs两个组件。 1、安装组件 npm install vuedraggable npm install sortablejs2、引入组件 import draggable from vuedraggable; import Sortable from sortablejs;export default {components: {draggable,Sortable},....3、HTML 我的例子是给表格排序，项目整体使用的是ivew，所以用了ivew的栅格...
最近公司有一个项目的需要做出旋钮的效果，旋钮有十个档，根据手指旋转切换，旋转时接近最近的档会有吸附效果，具体效果如下：html部分代码： <div class="_touch"><div class="round_box" ref="box" @touchstart="touchStart" @touchmove="touchMove"><div v-if="able" style="position:absolute;width:100%;height:100%;top:0;left:0;"><div class="round_right" ref="right" :style="{ transform: rotate( + angle +deg) }"><di...
1. 最近得到一个新需求，需要在Vue项目的移动端页面上加上左右滑动效果，在网上查阅资料，最终锁定了vue-touch 2. 下载vue-touch （https://github.com/vuejs/vue-touch/tree/next） 注意：如果Vue是2.x 的版本的话，一定要下next分支上的。 3. 使用： 3.1 npm install vue-touch@next --save 3.2 在main.js 中 引入：import VueTouch from vue-touchVue.use(VueTouch, {name: v-touch})VueTouch.config.swipe = {threshol...
一、首先需要在项目中引入better-scroll 1. 在package.json 直接写入 "better-scroll":"^1.11.1" 版本以github上为准（目前最新） 2.cpnm install 在node_modules 可以查看版本是否安装 3.直接在你的组件里面写入import BScroll from 'better-scroll'; 二、better-scroll优点 1.体验像原生：滚动非常流畅，而且没有滚动条。 2.滚动位置固定：在vue中通过路由切换页面时组件会自动滚动到顶部，需要监听滚动行为才能让滚动位置固定...
在子页面把整个页面做绝对定位，覆盖整个屏幕，子父页面将 router-view 用 transition 套起来，并加上过渡动画就可以啦。 代码： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><title>Document</title><style>* { padding: 0; margin: 0; }html, body, #app { width: 100%; h...
源码如下： <html> <head> <meta charset="UTF-8"><title>slidePage</title><script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script><style type="text/css">*{margin: 0;padding: 0;}.container {width: 100%;margin: 0 auto;text-align: center;}.content{font-size: 400px}.leftBtn{width: 45px;height: 45px;margin-right: 15px;}.rightBtn{width: 45px;height: 45px;margin-left: 15px;}</style> </he...
说到h5的翻页，很定第一时间想到的是swiper。但是我当时想到的却是，vue里边怎么用swiper？！ vue-awesome-swiper就是其中一个前辈们产出的结晶。就看首尾两个单词，就知道他是vue和swiper的爱情之子了。 vue-awesome-swiper官网是中文文档，妈妈再也不用担心我读api啦。“基于 Swiper4、适用于 Vue 的轮播组件”。在产品催着进度的紧张环境下，在四处搜寻解决方案的情况下，这句话简直发着光啊。 具体怎么用，官方文档写的很清楚，...
最近写公司项目有涉及到轮播banner，一般的ui框架无法满足产品需求；所以自己写了一个层叠式轮播组件；现在分享给大家； 主要技术栈是vue.js ;javascript;jquery；确定实现思路因工作繁忙，暂时不做梳理了；直接贴代码参考； 此组件是基于jquer封装，在vue项目中使用首先需要先安装jquery插件：指令：npm install jquery,安装完成之后再webpack.base.conf.js配置插件：plugins: [new webpack.ProvidePlugin({$: jquery,jQuery: jqu...
前言：此事例是在vue组件中，使用canvas实现倒计时动画的效果。其实，实现效果的逻辑跟vue没有关系，只要读懂canvas如何实现效果的这部分逻辑就可以了canvas动画的原理：利用定时器，给定合理的帧数，不断的清除画布，再重绘图形，即呈现出动画效果。 让我们先看下效果说明：此gif清晰度很低，因为转成gif图的时候，质量受损，帧数减少，所以倒计时转到红色时候看起来变的很模糊。但是实际在浏览器上效果全程都是很清晰和连贯的使...
我们知道省市区县都有名称和对应的数字唯一编号，使用编号可以更方便查询以及程序处理，我们今天来了解一下使用vue2来实现常见的省市区下拉联动选择效果。 准备数据源 我们的省市区县的数据源来自本站文章 《基于Vue2的简易的省市区县三级联动组件》 中的districts.js，感谢 v-distpicker 作者。districts.js中的数据格式大概是这样的： export default {100000: {110000: 北京市,120000: 天津市,130000: 河北省,140000: 山西省,.....