uniquejava / blog

My notes regarding the vibrating frontend :boom and the plain old java :rofl.
Creative Commons Zero v1.0 Universal
11 stars 5 forks source link

vue swipe to reveal delete #250

Open uniquejava opened 5 years ago

uniquejava commented 5 years ago

用到的组件

https://github.com/eCollect/vue-swipe-actions 期间碰到了一个issue, 向作者提交了一个PR, 作者据此发布了1.10.0版.

碰到的safari问题 (外围组件的border-radius被撑破)

safari border-radius显示问题.搜到答案好难, 尝试了N多关键词. 好吧, 记住这个问题的描述 CSS: inner elements breaking border-radius https://www.onenaught.com/posts/266/css-inner-elements-breaking-border-radius

https://stackoverflow.com/questions/11008614/border-radius-doesnt-affect-inner-elements

.swipeout-action {
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}

以上的方案在delete button完全展现的时候有用, 但在侧滑的过程还是会break外围元素的border-radius, 我X, 我是什么运气, 最后乱试出来了一个解决方案 == 在outter element(设定border-radius)的元素上加上z-index: 0., 完全解决! What a SAFARI.

碰到的element-ui的问题

Element-UI confirm dialog在手机浏览器上没有垂直居中, 解决办法

max-width: 100%