vue+css3下拉列表展开
时间:2019-12-17
本文章向大家介绍vue+css3下拉列表展开,主要包括vue+css3下拉列表展开使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<template> <div> <h2 class="record-title">中奖记录</h2> <div> <div v-for="(item, index) in arr" :key="index" class="record-item"> <div class="record-item-field"> <div :class="{'active': item.isDrop}" class="record-content"> <div class="record-time"> <div class="record-time-item">2019-08-15</div> <div class="record-time-item">20:35:26</div> </div> <div class="record-prize"> <div class="record-prize-item">一等奖</div> <div class="record-prize-item">新秀丽行李箱新秀丽行李</div> </div> <button type="button" @click="obtain(item, index)" class="record-button"> {{ item.canDrop ? '领取说明' : '马上领取' }} <i v-if="item.canDrop" :class="{'active':item.isDrop}" class="triangle"></i> </button> </div> </div> <div ref="recordRemark" class="record-item-remark"> <p ref="recordRemarkChild">{{ item.content }}</p> </div> </div> </div> </div> </template> <script> export default { name: 'RecordList', data() { return { isDrop: false, arr: [{ isDrop: false, time: 0, content: '奖品已发放到您的人保会员账', canDrop: false }, { isDrop: false, time: 1, content: '奖品已发放到您的人保会员账号,请到【广东人保财险】微信公众号-我的人保-个人中信-卡券/我的卡券中查收使用。', canDrop: true }, { isDrop: false, time: 2, content: '奖品已发放到您的人保会员账', canDrop: true }] } }, methods: { obtain(item, index) { if(item.canDrop) { item.isDrop = !item.isDrop let childHeight = this.$refs.recordRemarkChild[index].offsetHeight let height = item.isDrop ? childHeight : 0 this.$refs.recordRemark[index].style.height = height + 'px' } } } } </script> <style lang="scss" scoped> .record-title { height: px2rem(88px); border-bottom: 1px solid #e4e4e4; @include font-dpr(32px); color: #333; font-weight: 600; text-align: center; @include lh-dpr(88px); } .record-item-field { padding-left: px2rem(24px); .record-content { height: px2rem(140px); padding-left: px2rem(6px); padding-right: px2rem(30px); border-bottom: 1px solid #e4e4e4; display: flex; align-items: center; justify-content: space-between; &.active { border-bottom-color: transparent; } } } .record-time { width: px2rem(204px); &-item { color: #aaa; font-weight: 600; @include font-dpr(22px); @include lh-dpr(22px); &:first-child { margin-bottom: px2rem(20px); } } } .record-prize-item { width: px2rem(326px); padding-right: px2rem(6px); color: #333; font-weight: 600; @include font-dpr(28px); @include lh-dpr(28px); @extend %ellipsis; &:first-child { margin-bottom: px2rem(20px); } } .record-button { padding: px2rem(8px) 0; width: px2rem(160px); background: #E90832; border-radius: 25px; border: none; color: #fff; white-space: nowrap; @include font-dpr(24px); display: flex; align-items: center; justify-content: center; .triangle { margin-left: px2rem(4px); @include triangle($direction:top, $size:4px, $borderColor:#fff); transform: rotate(180deg); transition: transform .3s; &.active { transform: rotate(0); } } } .record-item-remark { height: 0; overflow: hidden; transition: height .35s; background: #FFF4F4; p { padding: px2rem(33px) px2rem(30px); color: #666; @include font-dpr(26px); @include lh-dpr(37px); } } </style>
原文地址:https://www.cnblogs.com/uno1990/p/12054088.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python输出结果刷新及进度条的实现操作
- PHP实现微信申请退款功能
- python 读取.nii格式图像实例
- PHP实现八皇后算法
- 浅析php如何实现爬取数据原理
- Python 存取npy格式数据实例
- 微信支付之JSAPI公众号支付详解
- 浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
- Python代码执行时间测量模块timeit用法解析
- Laravel框架实现简单的学生信息管理平台案例【附源码下载】
- numpy 矩阵形状调整:拉伸、变成一位数组的实例
- 使用Nibabel库对nii格式图像的读写操作
- ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
- 使用SimpleITK读取和保存NIfTI/DICOM文件实例
- php中上传文件的的解决方案