很多时候我们需要使用地址三级联动，即省市区三级联动。网上有很多插件，在此介绍Vue的一款地区联动插件：vue-area-linkage，下面介绍如何使用这个插件实现地址联动效果： 1.安装vue-area-linkage插件：npm install --save vue-area-linkage --registry=https://registry.npm.taobao.org --verbose 2.在main.js上进行依赖注入，如下图所示： 3.在对应vue文件的template模板上写html标签，如下图所示：4.在对应vue文件的script上...
实现点击按钮使当前按钮高亮，其他按钮复原的效果实现思路 ?在data中定义即将渲染的数据，及active data() {return {wpList: [{name: 食品饮料},{name: 鲜花},{name: 蛋糕},{name: 水果生鲜},{name: 服装鞋帽},{name: 其它}],active:}}...?定义高亮的标签类名 .active {background: #fd7522;border: 1px solid #fd7522;color: #fff;}?动态渲染按钮的数据，并动态的增加active类名（当active为当前name值时添加），添加点击事件（点...
这里的坑还是蛮多的，花了一个多小时，才理清楚。 做一下笔记，以便于复习。首先呢，需要让左右的布局都可以滚动，这里使用了betterScroll npm i better-scroll import BScroll from better-scroll methods: {_initScroll () {this.menuScroll = new BScroll((this.$refs.menu), {click: true因为betterscroll默认会阻止点击事件。这里要设置一下})this.foodScroll = new BScroll((this.$refs.good), {probeType: 3用来获取滚动的...
vue-infinite-scroll插件可以无限滚动实现加载更多，其作用是是当滚动条滚动到距离底部的指定高度时触发某个方法。 https://github.com/ElemeFE/vue-infinite-scroll/ https://www.npmjs.com/package/vue-infinite-scroll npm i vue-infinite-scroll --savemain.js使用 import vueiInfinite from vue-infinite-scroll Vue.use(vueiInfinite) <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-d...
第二个实例是关于标签页切换的，先看一下效果：这也是一个很常见的交互效果，以往正常的javascript写法是给各个按钮绑定事件来切换不同的层，当然也可以用纯css写，给上面的三个切换的层分别添加一个单选按钮的兄弟节点，再用绝对定位把单选按钮定位在三个button上面，这样就可以用:checked伪类来单选按钮的兄弟元素，即对应的不同的层，我简单的写了一下DOM结构，大概就是这样：那么用vue.js实现上述的效果，其实也有两种途径，一...
本文实例为大家分享了vue实现进度条效果的具体代码，供大家参考，具体内容如下 一、效果图 二、代码 progress-bar.vue <template><div class="vue-progress-bar default-theme"><div class="vue-progress-bar__tip"><span class="vue-progress-bar__tiplabel">{{label}}</span><span class="vue-progress-bar__tiptext">{{text}}</span></div><div class="vue-progress-bar__outer"><div class="vue-progress-bar__inner" :style="...
效果图如下所示：<template> <div class="asideBox"> <aside> <ul class="asideMenu"> <li v-for="(item,index) in menuList"> <div class="oneMenu" @click="showToggle(item,index)"> <img v-bind:src="item.imgUrl" /> <span>{{item.name}}</span> </div> <ul v-show="item.isSubShow"> <li v-for="subItem in item.subItems"> <div class="oneMenuChild">{{subItem.name}}</div> </li> </ul> </li> </ul> </aside> </div> </t...
如何实现Vue路由切换时的左滑和右滑效果，因为原作者ustbhuangyi老师的两个慕课项目中都没有这样的效果，于是突发奇想要做这个功能，看了看QQ、微信都没这样的效果，最后发现SegmentFault(思否) 和掘金两个app都有这样的效果，就以此为参考开始做了。 transition 首先看看官网 淡入淡出动画的例子： <div id="demo"><button v-on:click="show = !show">Toggle</button><transition name="fade"><p v-if="show">hello</p></transiti...
vue-i18n 仓库地址：https://github.com/kazupon/vue-i18n 兼容性： 支持 Vue.js 2.x 以上版本 安装方法：（此处只演示 npm） npm install vue-i18n使用方法： 1、在 main.js 中引入 vue-i18n （前提是要先引入 vue） import VueI18n from vue-i18n Vue.use(VueI18n)2、准备本地的翻译信息 const messages = {zh: {message: {hello: 好好学习，天天向上！}},en: {message: {hello: good good study, day day up!}} }3、创建带有选项...
本文实例为大家分享了vue实现滑动时顶部悬浮固定效果的具体代码，供大家参考，具体内容如下 这个效果是一个项目中抽出来的一个demo效果。前期准备： 1. 引入jQ <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>引入lodash.js npm install lodash -DfixTop.vue组件的 <template><div class="fixtop2"><header class="header" ref="header"></header><div class="nav" ref="nav" :class="{isFixed:isFixed}"...
效果图 demo1.gif 分清clientY pageY screenY layerY offsetY的区别 在我们想要做出拖拽这个效果的时候，我们需要分清这几个属性的区别，这几个属性都是计算鼠标点击的偏移值，我们需要对其进行了解才可以继续实现我们的拖拽效果 clientY 指的是距离可视页面左上角的距离 pageY 指的是距离可视页面左上角的距离(不受页面滚动影响) screenY 指的是距离屏幕左上角的距离 layerY 指的是找到它或它父级元素中最近具有定位的左上角距离...
Mint UI 是饿了么开源的，基于 Vue.js 的移动端组件库。 关于Mint UI，有文档不够准确详尽，组件略显粗糙，功能不够完善等问题；也有高度组件化，体积小等优点。 安装Mint UI： # Vue 1.x npm install mint-ui@1 -S # Vue 2.0 npm install mint-ui -S 引入组件： // 引入全部组件 import Mint from mint-ui; import mint-ui/lib/style.css Vue.use(Mint); // 按需引入部分组件 import { CellSwipe } from mint-ui; Vue.co...
安装vue的步骤在这里就不进行赘述了，下面直接进入正题 首先定义一下data里面的数据： data () {return {toLearnList:[html,css,javascript,java,php //进行显示的数据],showAll:false, //标记数据是否需要完全显示的属性}} 使用computed对data进行处理： computed:{showList:function(){if(this.showAll == false){ //当数据不需要完全显示的时候var showList = []; ...
最近在使用element-ui框架，用到了Dialog对话框组件，大致实现的效果，跟我之前自己在移动端项目里面弄的一个弹窗组件差不太多。然后就想着把这种弹窗组件的实现方式与大家分享一下，下面本文会带着大家手摸手实现一个弹窗组件。 本文主要内容会涉及到弹窗遮罩的实现， slot 插槽的使用方式， props 、 $emit 传参，具体组件代码也传上去了。如果喜欢的话可以点波赞/关注，支持一下，希望大家看完本文可以有所收获。 组件最后实现的...
本文实例为大家分享了vue实现弹出框点击显示隐藏的具体代码，供大家参考，具体内容如下效果如下图 由于我的更改密码弹出框是一个组件引用的，所以在一开始是隐藏的，这就需要在当前的页面上对弹出框组件设置v-show,但是在弹出框显示出来的时候，操作执行完后当前页面的更改按钮已经被弹出框覆盖了。所以只能在弹出页面点击取消实现关闭隐藏弹出框。这样就需要写两个点击事件，但是两个点击事件就会有冲突，需要点击两下才能使弹出...