diff --git a/src/module/popper/index.less b/src/module/popper/index.less index ae994b31..cf6ce3f3 100644 --- a/src/module/popper/index.less +++ b/src/module/popper/index.less @@ -14,21 +14,21 @@ @attr : ~'[position=@{position}]'; &{ border: 1px solid @m-border-color; - &.layui-popper@{attr}{ - margin-@{contrary_position}: 6px; - .layui-popper-arrow { - @{contrary_position}: -6px; - border-@{contrary_position}-width: 0; - border-@{position}-color: @m-border-color; - &::after{ - @{contrary_position}: 1px; + &@{attr}{ + margin-@{contrary_position}: 6px; + .layui-popper-arrow { + @{contrary_position}: -6px; border-@{contrary_position}-width: 0; - margin-@{margin_postion}: -6px; - border-@{position}-color: @color; + border-@{position}-color: @m-border-color; + &::after{ + @{contrary_position}: 1px; + border-@{contrary_position}-width: 0; + margin-@{margin_postion}: -6px; + border-@{position}-color: @color; + } } } } - } } // 统一设置四个方向的主题 .theme(@background-color, @color, @border-color) { @@ -43,7 +43,7 @@ // 箭头默认居中 .arrow-default-center(@position, @prop) { @attr : ~'[position=@{position}]'; - &.layui-popper@{attr} { + &@{attr} { .layui-popper-arrow{ @{prop}: -moz-calc(50% - 6px); @{prop}: -webkit-calc(50% - 6px); @@ -58,6 +58,23 @@ .arrow-default-center(right, top); } +// 填充popper,支持可以移动到popper使用到 +.single-fill-popper(@position, @contrary_position, @zeroPosition, @all, @seven){ + @attr : ~'[position=@{position}]'; + &@{attr}::after{ + @{contrary_position}: -7px; + @{zeroPosition}: 0; + @{all}: 100%; + @{seven}: 7px; + } +} +.fill-popper(){ + .single-fill-popper(top, bottom, left, width, height); + .single-fill-popper(bottom, top, left, width, height); + .single-fill-popper(left, right, bottom, height, width); + .single-fill-popper(right, left, bottom, height, width); +} + // 样式开始 .layui-popper { position: fixed; @@ -76,9 +93,17 @@ // 箭头默认居中 .all-arrow-default-center(); + &::after{ + content: " "; + position: absolute; + display: block; + } + // 填充 + .fill-popper(); + .layui-popper-arrow { &,&::after{ - position: absolute; + position: absolute; display: block; width: 0; height: 0; diff --git a/src/module/popper/index.vue b/src/module/popper/index.vue index 3e24f07b..8b793f3b 100644 --- a/src/module/popper/index.vue +++ b/src/module/popper/index.vue @@ -1,15 +1,17 @@