Skip to content

U
uview-ui
Commit f22d21a3 authored by wlxuqu's avatar wlxuqu
Browse files
Options

修复dropdown组件某些情况可能会错位的问题

parent 9561247f
Hide whitespace changes
Inline Side-by-side
Showing with 65 additions and 20 deletions
README.md
View file @ f22d21a3
......@@ -17,7 +17,9 @@
uView UI，是[uni-app](https://uniapp.dcloud.io/)生态优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水
## [点击加群交流反馈：1129077272](https://qm.qq.com/cgi-bin/qm/qr?k=1FfucLpozYbnb7FWo_KsqAdEi1mE3Qrf&jump_from=webapi)
## [官方文档：https://www.uviewui.com](https://www.uviewui.com)
### [点击加群交流反馈：1129077272](https://qm.qq.com/cgi-bin/qm/qr?k=1FfucLpozYbnb7FWo_KsqAdEi1mE3Qrf&jump_from=webapi)
## 特性
......@@ -39,8 +41,6 @@ uView UI，是[uni-app](https://uniapp.dcloud.io/)生态优秀的UI框架，全
## 友情链接
<br>
#### **vue-admin-beautiful** —— [企业级、通用型中后台前端解决方案（基于vue/cli 4 最新版，同时支持电脑，手机，平板）](https://github.com/chuzhixin/vue-admin-beautiful)
#### **vue-admin-beautiful** —— [在线演示](http://beautiful.panm.cn/vue-admin-beautiful/#/index)
......
pages/componentsB/waterfall/index.vue
View file @ f22d21a3
......@@ -3,13 +3,8 @@
<u-waterfall v-model="flowList" ref="uWaterfall">
<template v-slot:left="{ leftList }">
<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
<!-- 警告：微信小程序不支持嵌入lazyload组件，请自行如下使用image标签 -->
<!-- #ifndef MP-WEIXIN -->
<!-- 微信小程序需要hx2.8.11版本才支持在template中引入其他组件，比如下方的u-lazy-load组件 -->
<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="demo-img-wrap"><image class="demo-image" :src="item.image" mode="widthFix"></image></view>
<!-- #endif -->
<view class="demo-title">{{ item.title }}</view>
<view class="demo-price">{{ item.price }}元</view>
<view class="demo-tag">
......@@ -17,7 +12,6 @@
<view class="demo-tag-text">放心购</view>
</view>
<view class="demo-shop">{{ item.shop }}</view>
<!-- 微信小程序无效，因为它不支持在template中引入组件 -->
<view class="u-close">
<u-icon name="close-circle-fill" color="#fa3534" size="34" @click="remove(item.id)"></u-icon>
</view>
......@@ -25,12 +19,7 @@
</template>
<template v-slot:right="{ rightList }">
<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
<!-- #ifndef MP-WEIXIN -->
<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="demo-img-wrap"><image class="demo-image" :src="item.image" mode="widthFix"></image></view>
<!-- #endif -->
<view class="demo-title">{{ item.title }}</view>
<view class="demo-price">{{ item.price }}元</view>
<view class="demo-tag">
......@@ -38,7 +27,6 @@
<view class="demo-tag-text">放心购</view>
</view>
<view class="demo-shop">{{ item.shop }}</view>
<!-- 微信小程序无效，因为它不支持在template中引入组件 -->
<view class="u-close">
<u-icon name="close-circle-fill" color="#fa3534" size="34" @click="remove(item.id)"></u-icon>
</view>
......
uview-ui/components/u-card/u-card.vue
View file @ f22d21a3
......@@ -74,7 +74,7 @@
/**
* card 卡片
* @description 卡片组件一般用于多个列表条目，且风格统一的场景
* @tutorial https://www.uviewui.com/components/line.html
* @tutorial https://www.uviewui.com/components/card.html
* @property {Boolean} full 卡片与屏幕两侧是否留空隙（默认false）
* @property {String} title 头部左边的标题
* @property {String} title-color 标题颜色（默认#303133）
......
uview-ui/components/u-dropdown-item/u-dropdown-item.vue
View file @ f22d21a3
......@@ -21,6 +21,18 @@
</template>
<script>
/**
* dropdown-item 下拉菜单
* @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
* @tutorial http://uviewui.com/components/dropdown.html
* @property {String | Number} v-model 双向绑定选项卡选择值
* @property {String} title 菜单项标题
* @property {Array[Object]} options 选项数据，如果传入了默认slot，此参数无效
* @property {Boolean} disabled 是否禁用此选项卡（默认false）
* @property {String | Number} duration 选项卡展开和收起的过渡时间，单位ms（默认300）
* @property {String | Number} height 弹窗下拉内容的高度(内容超出将会滚动)（默认auto）
* @example <u-dropdown-item title="标题"></u-dropdown-item>
*/
export default {
name: 'u-dropdown-item',
props: {
......
uview-ui/components/u-dropdown/u-dropdown.vue
View file @ f22d21a3
......@@ -21,7 +21,8 @@
</view>
<view class="u-dropdown__content" :style="[contentStyle, {
transition: `opacity ${duration / 1000}s linear`,
top: $u.addUnit(height)
top: $u.addUnit(height),
height: contentHeight + 'px'
}]"
@tap="maskClick" @touchmove.stop.prevent>
<view @tap.stop.prevent class="u-dropdown__content__popup" :style="[popupStyle]">
......@@ -33,6 +34,23 @@
</template>
<script>
/**
* dropdown 下拉菜单
* @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
* @tutorial http://uviewui.com/components/dropdown.html
* @property {String} active-color 标题和选项卡选中的颜色（默认#2979ff）
* @property {String} inactive-color 标题和选项卡未选中的颜色（默认#606266）
* @property {Boolean} close-on-click-mask 点击遮罩是否关闭菜单（默认true）
* @property {Boolean} close-on-click-self 点击当前激活项标题是否关闭菜单（默认true）
* @property {String | Number} duration 选项卡展开和收起的过渡时间，单位ms（默认300）
* @property {String | Number} height 标题菜单的高度，单位任意（默认80）
* @property {String | Number} border-radius 菜单展开内容下方的圆角值，单位任意（默认0）
* @property {Boolean} border-bottom 标题菜单是否显示下边框（默认false）
* @property {String | Number} title-size 标题的字体大小，单位任意，数值默认为rpx单位（默认28）
* @event {Function} open 下拉菜单被打开时触发
* @event {Function} close 下拉菜单被关闭时触发
* @example <u-dropdown></u-dropdown>
*/
export default {
name: 'u-dropdown',
props: {
......@@ -75,6 +93,11 @@
titleSize: {
type: [Number, String],
default: 28
},
// 下拉出来的内容部分的圆角值
borderRadius: {
type: [Number, String],
default: 0
}
},
data() {
......@@ -91,7 +114,8 @@
opacity: 0
},
// 让某个菜单保持高亮的状态
highlightIndex: 99999
highlightIndex: 99999,
contentHeight: 0
}
},
computed: {
......@@ -101,6 +125,7 @@
// 进行Y轴位移，展开状态时，恢复原位。收齐状态时，往上位移100%，进行隐藏
style.transform = `translateY(${this.active ? 0 : '-100%'})`
style['transition-duration'] = this.duration / 1000 + 's';
style.borderRadius = `0 0 ${this.$u.addUnit(this.borderRadius)} ${this.$u.addUnit(this.borderRadius)}`;
return style;
}
},
......@@ -108,6 +133,9 @@
// 引用所有子组件(u-dropdown-item)的this，不能在data中声明变量，否则在微信小程序会造成循环引用而报错
this.children = [];
},
mounted() {
this.getContentHeight();
},
methods: {
init() {
// 当某个子组件内容变化时，触发父组件的init，父组件再让每一个子组件重新初始化一遍
......@@ -171,6 +199,20 @@
// 外部手动设置某个菜单高亮
highlight(index = undefined) {
this.highlightIndex = index !== undefined ? index : 99999;
},
// 获取下拉菜单内容的高度
getContentHeight() {
// 这里的原理为，因为dropdown组件是相对定位的，它的下拉出来的内容，必须给定一个高度
// 才能让遮罩占满菜单一下，直到屏幕底部的高度
// this.$u.sys()为uView封装的获取设备信息的方法
let windowHeight = this.$u.sys().windowHeight;
this.$uGetRect('.u-dropdown__menu').then(res => {
// 这里获取的是dropdown的尺寸，在H5上，uniapp获取尺寸是有bug的(以前提出修复过，后来又出现了此bug，目前hx2.8.11版本)
// H5端bug表现为元素尺寸的top值为导航栏底部到到元素的上边沿的距离，但是元素的bottom值确是导航栏顶部到元素底部的距离
// 二者是互相矛盾的，本质原因是H5端导航栏非原生，uni的开发者大意造成
// 这里取菜单栏的botton值合理的，不能用res.top，否则页面会造成滚动
this.contentHeight = windowHeight - res.bottom;
})
}
}
}
......@@ -182,6 +224,7 @@
.u-dropdown {
flex: 1;
width: 100%;
position: relative;
&__menu {
@include vue-flex;
......@@ -220,6 +263,7 @@
left: 0px;
bottom: 0;
overflow: hidden;
&__mask {
position: absolute;
......@@ -236,6 +280,7 @@
z-index: 10;
transition: all 0.3s;
transform: translate3D(0, -100%, 0);
overflow: hidden;
}
}
......
uview-ui/components/u-message-input/u-message-input.vue
View file @ f22d21a3
......@@ -100,7 +100,7 @@
// 激活样式
activeColor: {
type: String,
default: 'red'
default: '#2979ff'
},
// 未激活的样式
inactiveColor: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment