chunLei-popups.vue 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334
  1. <template>
  2. <view class="mask" :class="!show?'':'mask-show'" :style="{backgroundColor:show?maskBg:'rgba(0,0,0,0)'}" @tap="tapMask">
  3. <view class="popups" :class="[theme]"
  4. :style="{top: popupsTop ,left: popupsLeft,flexDirection:direction}">
  5. <text :class="dynPlace" :style="{width:'0px',height:'0px'}" v-if="triangle"></text>
  6. <view v-for="(item,index) in popData" :key="index" @tap.stop="tapItem(item)"
  7. class="itemChild view" :class="[direction=='row'?'solid-right':'solid-bottom',item.disabled?'disabledColor':'']">
  8. <image class="image" :src="item.icon" v-if="item.icon"></image>{{item.title}}
  9. </view>
  10. <slot></slot>
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. export default{
  16. props:{
  17. maskBg:{
  18. type:String,
  19. default:'rgba(0,0,0,0)'
  20. },
  21. placement:{
  22. type:String,
  23. default:'default' //default top-start top-end bottom-start bottom-end
  24. },
  25. direction:{
  26. type:String,
  27. default:'column' //column row
  28. },
  29. x:{
  30. type:Number,
  31. default:0
  32. },
  33. y:{
  34. type:Number,
  35. default:0
  36. },
  37. value:{
  38. type:Boolean,
  39. default:false
  40. },
  41. modelValue:{
  42. type:Boolean,
  43. default:false
  44. },
  45. popData:{
  46. type:Array,
  47. default:()=>[]
  48. },
  49. theme:{
  50. type:String,
  51. default:'light' //light dark
  52. },
  53. dynamic:{
  54. type:Boolean,
  55. default:false
  56. },
  57. gap:{
  58. type:Number,
  59. default:20
  60. },
  61. triangle:{
  62. type:Boolean,
  63. default:true
  64. }
  65. },
  66. data(){
  67. return{
  68. popupsTop:'0px',
  69. popupsLeft:'0px',
  70. show:false,
  71. dynPlace:''
  72. }
  73. },
  74. mounted() {
  75. this.popupsPosition()
  76. },
  77. methods:{
  78. tapMask(){
  79. this.$emit('input',!this.value)
  80. this.$emit('update:modelValue',!this.value)
  81. },
  82. tapItem(item){
  83. if(item.disabled) return
  84. this.$emit('tapPopup',item)
  85. this.$emit('input',!this.value)
  86. this.$emit('update:modelValue',!this.value)
  87. },
  88. getStatusBar(){
  89. let promise = new Promise((resolve,reject)=>{
  90. uni.getSystemInfo({
  91. success: function(e) {
  92. let customBar
  93. // #ifdef H5
  94. customBar = e.statusBarHeight + e.windowTop;
  95. // #endif
  96. resolve(customBar)
  97. }
  98. })
  99. })
  100. return promise
  101. },
  102. async popupsPosition(){
  103. let statusBar = await this.getStatusBar()
  104. let promise = new Promise((resolve,reject)=>{
  105. let popupsDom = uni.createSelectorQuery().in(this).select(".popups")
  106. popupsDom.fields({
  107. size: true,
  108. }, (data) => {
  109. let width = data.width
  110. let height = data.height
  111. let y = this.dynamic?this.dynamicGetY(this.y,this.gap):this.transformRpx(this.y)
  112. let x = this.dynamic?this.dynamicGetX(this.x,this.gap):this.transformRpx(this.x)
  113. // #ifdef H5
  114. y = this.dynamic?(this.y+statusBar): this.transformRpx(this.y+statusBar)
  115. // #endif
  116. this.dynPlace = this.placement=='default'?this.getPlacement(x,y):this.placement
  117. switch(this.dynPlace){
  118. case 'top-start':
  119. this.popupsTop = `${y+9}px`
  120. this.popupsLeft = `${x-15}px`
  121. break;
  122. case 'top-end':
  123. this.popupsTop = `${y+9}px`
  124. this.popupsLeft = `${x+15-width}px`
  125. break;
  126. case 'bottom-start':
  127. this.popupsTop = `${y-18-height}px`
  128. this.popupsLeft = `${x-15}px`
  129. break;
  130. case 'bottom-end':
  131. this.popupsTop = `${y-9-height}px`
  132. this.popupsLeft = `${x+15-width}px`
  133. break;
  134. }
  135. resolve()
  136. }).exec();
  137. })
  138. return promise
  139. },
  140. getPlacement(x,y){
  141. let width = uni.getSystemInfoSync().windowWidth
  142. let height = uni.getSystemInfoSync().windowHeight
  143. if(x>width/2&&y>height/2){
  144. return 'bottom-end'
  145. }else if(x<width/2&&y<height/2){
  146. return 'top-start'
  147. }else if(x>width/2&&y<height/2){
  148. return 'top-end'
  149. }else if(x<width/2&&y>height/2){
  150. return 'bottom-start'
  151. }else if(x>width/2){
  152. return 'top-end'
  153. }else{
  154. return 'top-start'
  155. }
  156. },
  157. dynamicGetY(y,gap){
  158. let height = uni.getSystemInfoSync().windowHeight
  159. y = y<gap?gap:y
  160. y = height - y <gap? (height - gap) : y
  161. return y
  162. },
  163. dynamicGetX(x,gap){
  164. let width = uni.getSystemInfoSync().windowWidth
  165. x = x< gap?gap:x
  166. x = width - x <gap? (width - gap) : x
  167. return x
  168. },
  169. transformRpx(params){
  170. return params*uni.getSystemInfoSync().screenWidth/375
  171. }
  172. },
  173. watch:{
  174. value:{
  175. immediate:true,
  176. handler:async function (newVal,oldVal){
  177. if(newVal) await this.popupsPosition()
  178. this.show = newVal
  179. }
  180. },
  181. placement:{
  182. immediate:true,
  183. handler(newVal,oldVal){
  184. this.dynPlace = newVal
  185. }
  186. }
  187. }
  188. }
  189. </script>
  190. <style lang="scss" scoped>
  191. .mask{
  192. position: fixed;
  193. top: 0;
  194. right: 0;
  195. bottom: 0;
  196. left: 0;
  197. z-index: 99999;
  198. transition: background 0.3s ease-in-out;
  199. visibility: hidden;
  200. &.mask-show{
  201. visibility: visible;
  202. }
  203. }
  204. .popups{
  205. position: absolute;
  206. padding: 20rpx;
  207. border-radius: 5px;
  208. display:flex;
  209. .view{
  210. padding: 10rpx;
  211. }
  212. .image{
  213. display: inline-block;
  214. vertical-align: middle;
  215. width: 40rpx;
  216. height: 40rpx;
  217. margin-right: 20rpx;
  218. }
  219. }
  220. .dark{
  221. background-color: #4C4C4C;
  222. color: #fff;
  223. .top-start:after {
  224. content: "";
  225. position: absolute;
  226. top: -18rpx;
  227. left: 10rpx;
  228. border-width: 0 20rpx 20rpx;
  229. border-style: solid;
  230. border-color: transparent transparent #4C4C4C;
  231. }
  232. .top-end:after {
  233. content: "";
  234. position: absolute;
  235. top: -18rpx;
  236. right: 10rpx;
  237. border-width: 0 20rpx 20rpx;
  238. border-style: solid;
  239. border-color: transparent transparent #4C4C4C;
  240. }
  241. .bottom-start:after {
  242. content: "";
  243. position: absolute;
  244. bottom: -18rpx;
  245. left: 10rpx;
  246. border-width: 20rpx 20rpx 0 ;
  247. border-style: solid;
  248. border-color: #4C4C4C transparent transparent ;
  249. }
  250. .bottom-end:after {
  251. content: "";
  252. position: absolute;
  253. bottom: -18rpx;
  254. right: 10rpx;
  255. border-width: 20rpx 20rpx 0 ;
  256. border-style: solid;
  257. border-color: #4C4C4C transparent transparent ;
  258. }
  259. .disabledColor{
  260. color: #c5c8ce;
  261. }
  262. }
  263. .light{
  264. color: #515a6e;
  265. box-shadow: 0upx 0upx 30upx rgba(0,0,0,0.2);
  266. background: #fff;
  267. .top-start:after {
  268. content: "";
  269. position: absolute;
  270. top: -18rpx;
  271. left: 10rpx;
  272. border-width: 0 20rpx 20rpx;
  273. border-style: solid;
  274. border-color: transparent transparent #fff;
  275. }
  276. .top-end:after {
  277. content: "";
  278. position: absolute;
  279. top: -18rpx;
  280. right: 10rpx;
  281. border-width: 0 20rpx 20rpx;
  282. border-style: solid;
  283. border-color: transparent transparent #fff;
  284. }
  285. .bottom-start:after {
  286. content: "";
  287. position: absolute;
  288. bottom: -18rpx;
  289. left: 10rpx;
  290. border-width: 20rpx 20rpx 0 ;
  291. border-style: solid;
  292. border-color: #fff transparent transparent ;
  293. }
  294. .bottom-end:after {
  295. content: "";
  296. position: absolute;
  297. bottom: -18rpx;
  298. right: 10rpx;
  299. border-width: 20rpx 20rpx 0 ;
  300. border-style: solid;
  301. border-color: #fff transparent transparent ;
  302. }
  303. .disabledColor{
  304. color: #c5c8ce;
  305. }
  306. }
  307. .solid-bottom{
  308. border-bottom: 1px solid #ccc;
  309. }
  310. .solid-right{
  311. border-right: 1px solid #ccc;
  312. }
  313. .popups .itemChild:last-child{
  314. border: none;
  315. }
  316. </style>