chunLei-popups.vue 7.1 KB

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