- 博客(3)
- 收藏
- 关注
原创 用CSS实现div中居中放置提示文字,且可被覆盖
1.背景:如下图所示:左侧区域是三个可拖拽div,右侧是可拖拽区域,目标就是在可拖拽区域居中放一行提示文字,即:Drop to Here,且有元素拖入(左侧可拖拽元素落入右侧区域时,变为带有一个名称标签+输入框的div)时,可被覆盖;2.解决方法:将提示文字设置为绝对定位,且设置z-index,其应小于落入元素的层次值,同时提示文字dropTips(类名),应相对于父元素dropArea(类名),因此需要增加样式如下:.dropArea { position: relative; ...}
2021-01-23 22:58:18 915 4
原创 el-dialog窗口中绝对定位子元素被遮挡问题解决
el-dialog窗口中绝对定位子元素被遮挡问题解决1.背景:el-dialog中使用了表单,表单校验信息不采用显示在输入框下方的方式,而是自定义一个组件来显示在标签上方(类似el-poppver),其使用了绝对定位;2.现象:第一行表单元素(两个输入框,标签位置为top),当校验信息(显示于标签之上)为换行显示时,好像被el-dialog__header遮挡了,不能显示完全,因此力求可以显示完整的方法;3.探索之路:网上搜解决绝对定位div子元素被遮挡的方法,均是父元素层级太低或父元素未设置posi
2021-01-21 22:33:12 2471 7
原创 vuedraggable插件使用总结
vuedraggable插件使用总结【1】 需求:一个list内,div元素上下拖动某个地方交换位置,且拖动时div元素带有样式,预拖动位置出现虚线边框;【2】经历:由于没写过前端,未遇过拖拽需求,被别人推荐使用draggable插件,摸索了一天才实现效果;【3】资源:vuedraggable插件:https://sortablejs.github.io/Vue.Draggable/官网例子:https://david-desmaisons.github.io/draggable-example/
2020-06-30 00:33:33 1220 1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人