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 相关文章推荐
讨论javascript(一)工厂方式 js面象对象的定义方法
Dec 15 Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
JS产生随机数的用法小结
Dec 10 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
vue引入js数字小键盘的实现代码
May 14 Javascript
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
JS防抖和节流实例解析
Sep 24 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
js基于div丝滑实现贝塞尔曲线
Sep 23 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
php之可变变量的实例详解
2017/09/12 PHP
sina的lightbox效果。
2007/01/09 Javascript
很酷的javascript loading效果代码
2008/06/18 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
JS简单验证上传文件类型的方法
2017/04/17 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
详谈Node.js之操作文件系统
2017/08/29 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
深入理解 TypeScript Reflect Metadata
2019/12/12 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
python实现批量解析邮件并下载附件
2018/06/19 Python
实例讲解python中的协程
2018/10/08 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
使用python求解二次规划的问题
2020/02/29 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
Marriott国际:万豪国际酒店查询预订
2017/09/25 全球购物
Sql面试题
2013/03/20 面试题
迟到检讨书1000字
2014/01/15 职场文书
美容院店长岗位职责
2014/04/08 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
学校中秋节活动总结
2015/03/23 职场文书
成品仓管员岗位职责
2015/04/01 职场文书