vue实现带过渡效果的下拉菜单功能


Posted in Javascript onFebruary 19, 2020

本文实例为大家分享了vue仿写下拉菜单功能,带有过渡效果(移动端),供大家参考,具体内容如下

效果图

vue实现带过渡效果的下拉菜单功能

clickOutside.js 点击目标之外的地方,下拉框隐藏

代码如下:

export const clickOutside = {
 bind(el, binding, vnode) {
 function documentHandler(e) {
 if (el.contains(e.target)) {
 return false;
 }
 if (binding.expression) {
 binding.value(e);
 }
 }
 el.__vueClickOutside__ = documentHandler;
 document.addEventListener("click", documentHandler);
 },
 update() {},
 unbind(el, binding) {
 document.removeEventListener("click", el.__vueClickOutside__);
 delete el.__vueClickOutside__;
 }
};

正文html如下:

<div class="info-select">
 <div class="select">
 <p class="select-p" @click="showSelectUl('s1')" v-clickOutside="hideSelectUl">
 <span>{{issues}}</span>
 <img :src="require('../../assets/images/support/icon_xiala.png')" alt="">
 </p>
 <transition name="slide-fade">
 <div class="select-ul" v-show="!showIssues" >
 <div v-for="(item, index) in list" :key="index" >
 <div>{{item.class}}</div>
 <div v-for="(item1, i) in item.node" :key="i" @click="getSize('s1', item1.class, index, i)">
 <p :class="{active:item == issues}">{{item1.class}}</p>
 </div>
 </div>
 </div>
 </transition>
 <transition leave-active-class="slideOutRight" enter-active-class="slideInRight">
 <p class="animated errP" style="position: absolute;margin:0.2rem 0 0 -3%;" v-show="form.issueErr" >{{form.issueMsg}}</p>
 </transition>
 </div>
 <div class="select">
 <p class="select-p" @click="showSelectUl('s2')" v-clickOutside="hideSelectUl2">
 <span>{{issues2}}</span>
 <img :src="require('../../assets/images/support/icon_xiala.png')" alt="">
 </p>
 <transition name="component-fade" mode="out-in">
 <div class="select-ul" v-show="!showIssues2">
 <p v-for="(item, index) in childList" :class="{active:item == issues2}"
 :key="index" @click="getSize('s2', item.class, index)">{{item.class}}</p>
 </div>
 </transition>
 <transition leave-active-class="slideOutUp" enter-active-class="slideInUp">
 <p class="animated errP" style="position:absolute;margin:0.2rem 0 0 -3%;" v-if="form.issueErr1" >{{form.issueMsg1}}</p>
 </transition>
 </div>
 </div>
 <div class="p-bts clearafter">
 <button @click="form.issueErr = !form.issueErr">p1</button>
 <button @click="form.issueErr1 = !form.issueErr1">p2</button>
 </div>

js 代码如下:

import { clickOutside } from 'Models/clickoutside.js';
export default {
 data(){
 return{
 catogery:'flight',
 issues:"Select Category",
 issues2:"Select Issue",
 showIssues:true,
 showIssues2:true,
 list:[
 {id:0,class:'flight',node:[
 {class:'1.1 a1111111111111 11111111111111',node:[
 {class:'问题a1?'},
 {class:'问题a2?'}
 ]},
 {class:'1.2 a2',node:[
 {class:'问题a3?'},
 {class:'问题a4?'}
 ]},
 ]},
 {id:1,class:'hotel',node:[
 {class:'1.1 b1',node:[
 {class:'问题b1?'},
 {class:'问题b2?'}
 ]},
 {class:'1.2 b2',node:[
 {class:'问题b3?'},
 {class:'问题b4?'}
 ]},
 ]},
 ],
 childList:[],
 form:{
 issueMsg:"Please select a category",issueErr:true,
 issueMsg1:"Please select a issue",issueErr1:true,
 },
 }
 },
 methods: {
 hideSelectUl(){
 this.showIssues = true;
 },
 hideSelectUl2(){
 this.showIssues2 = true;
 },
 showSelectUl(s){
 if(s == 's1'){
 this.showIssues = !this.showIssues;
 this.showIssues2 = true;
 }else{
 this.showIssues = true;
 this.showIssues2 = !this.showIssues2;
 }
 },
 getSize(s, val, index, index2){
 if(s == 's1'){
 this.issues = val;
 this.showIssues = true;
 this.catogery = this.list[index].class;
 this.childList = this.list[index].node[index2].node;
 this.issues2 = 'Select Issue';
 }else if(s == 's2'){
 this.issues2 = val;
 this.showIssues2 = true;
 }
 },
 },
 directives:{
 clickOutside,
 }
}

css代码如下:

.info-select{
 display: flex;
 justify-content: space-between;
 .select{
 width:40%;
 position: relative;
 padding:0.1rem 3% 0.1rem;
 vertical-align: top;
 font-size: 0.15rem;
 border-radius:2px;
 background: #fff;
 border-top:1px solid #ddd;
 border-bottom:1px solid #ddd;
 border-right:1px solid #ddd;
 }
 .select:last-child{
 border-right:0;
 border-top:1px solid #ddd;
 border-bottom:1px solid #ddd;
 border-left:1px solid #ddd;
 }
 .select-p{
 position: relative;
 height:0.21rem;
 line-height:0.21rem;
 span{
 font-size: 0.16rem;
 display: inline-block;
 width:90%;
 overflow:hidden;
 white-space:nowrap;
 text-overflow:ellipsis;
 }
 img{
 display:block;
 width:0.12rem;
 position: absolute;
 right: 0;
 top: 0;
 vertical-align: middle;
 }
 }
 .select-ul{
 width:93.5%;
 padding:0.12rem 3%;
 position: absolute;
 top: 0.42rem;
 left: 0;
 z-index: 12;
 background: #fff;
 border:1px solid #eee;
 p{
 padding:0.1rem 0 0.1rem 0.1rem;
 overflow:hidden;
 white-space:nowrap;
 text-overflow:ellipsis;
 }
 p:hover{
 background: #eee;
 }
 p.active{
 background: #eee;
 }
 }
 .errP{
 color:#f00;
 }
 }
 .p-bts{
 margin-top: 0.4rem;
 zoom: 1;// zoom(IE转有属性)可解决ie6,ie7浮动问题
 button{
 width:1.5rem;
 height:0.4rem;
 background: #ffa000;
 float: left;
 color:#fff;
 font-size:0.25rem;
 border-radius:2px;
 }
 button:last-child{
 float: right;
 }
 }

 .component-fade-enter-active, .component-fade-leave-active {
 transition: opacity .3s ease;
 }
 .component-fade-enter, .component-fade-leave-to
 /* .component-fade-leave-active for below version 2.1.8 */ {
 opacity: 0;
 }
 // css animate
 .slide-fade-enter-active{
 transition:all .2s ease-in;
 }
 .slide-fade-leave-active {
 transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
 }
 .slide-fade-enter, .slide-fade-leave-to{
 /* .slide-fade-leave-active for below version 2.1.8 */ 
 transform: translateY(20px);
 opacity: 0;
 }

 // bounce
 .bounce-enter-active {
 animation: bounce-in .2s;
 }
 .bounce-leave-active {
 animation: bounce-in .1s reverse;
 }
 @keyframes bounce-in {
 0% {
 transform: scale(0);
 }
 50% {
 transform: scale(1);
 }
 100% {
 transform: scale(1);
 }
 }

查看完整代码

更多教程点击《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery控制listbox中项的移动并排序
Nov 12 Javascript
JS与框架页的操作代码
Jan 17 Javascript
javascript cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
推荐20家国外的脚本下载网站
Apr 28 Javascript
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 Javascript
JS得到当前时间的方法示例
Mar 24 Javascript
openlayers 3实现车辆轨迹回放
Sep 24 Javascript
Vue.js仿Select下拉框效果
Feb 18 #Javascript
JavaScript中的惰性载入函数及优势
Feb 18 #Javascript
jquery实现垂直手风琴导航栏
Feb 18 #jQuery
vue微信分享插件使用方法详解
Feb 18 #Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 #jQuery
vue+ts下对axios的封装实现
Feb 18 #Javascript
ES6中Promise的使用方法实例总结
Feb 18 #Javascript
You might like
一个更简单的无限级分类菜单代码
2007/01/16 PHP
在命令行下运行PHP脚本[带参数]的方法
2010/01/22 PHP
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
获取URL文件名后缀
2013/10/24 PHP
为你总结一些php信息函数
2015/10/21 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
Python 命令行参数sys.argv
2008/09/06 Python
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
基于Python检测动态物体颜色过程解析
2019/12/04 Python
Python reques接口测试框架实现代码
2020/07/28 Python
PyCharm上安装Package的实现(以pandas为例)
2020/09/18 Python
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
产品工艺师的岗位职责
2013/11/15 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
信息管理专业自荐书
2014/06/05 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
财政局个人总结
2015/03/04 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
学习弘扬焦裕禄精神心得体会
2016/01/23 职场文书
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL