index.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. <template>
  2. <view class="ss-modal-body" :class="{'ss-modal-active' : animation, 'ss-modal-H5Top': _H5Top, 'ss-modal-H5Bottom': _H5Bottom}" :data-platform="platform">
  3. <view class="ss-modal" :class="'ss-modal-' + position +' ' + 'ss-modal-' + mode">
  4. <slot></slot>
  5. </view>
  6. <view v-if="_mask" class="uni-mask" @touchmove.stop.prevent="moveHandle" catchtouchmove="true" @click.stop="hide()"></view>
  7. </view>
  8. </template>
  9. <script>
  10. const systemInfo = uni.getSystemInfoSync();
  11. export default {
  12. data () {
  13. return {
  14. animation: false,
  15. platform: systemInfo.platform
  16. }
  17. },
  18. props: {
  19. /*
  20. * 参数说明(定位)
  21. */
  22. position: {//可能值 top left right bottom middle
  23. type: String,
  24. default: 'middle'
  25. },
  26. /*
  27. * 参数说明
  28. * full 宽度100%
  29. * insert 80%宽度内联小框
  30. * cover 宽度高度100%
  31. */
  32. mode: {
  33. type: String,
  34. default: 'full'
  35. },
  36. mask: {
  37. type: [Boolean, String],
  38. default: true
  39. },
  40. /*
  41. * H5置顶
  42. */
  43. H5Top: {
  44. type: [Boolean, String],
  45. default: true
  46. },
  47. /*
  48. * H5置底
  49. */
  50. H5Bottom: {
  51. type: [Boolean, String],
  52. default: true
  53. },
  54. },
  55. computed: {
  56. _mask() {
  57. return String(this.mask) === 'false' ? false : true;
  58. },
  59. _H5Top() {
  60. return String(this.H5Top) === 'false' ? false : true;
  61. },
  62. _H5Bottom() {
  63. return String(this.H5Bottom) === 'false' ? false : true;
  64. }
  65. },
  66. watch: {
  67. animation(val) {
  68. this.$emit('change', val);
  69. }
  70. },
  71. methods: {
  72. moveHandle() {
  73. return ;
  74. },
  75. show () {
  76. this.animation = true;
  77. return true;
  78. },
  79. hide () {
  80. this.animation = false;
  81. return false;
  82. },
  83. toggle () {
  84. return !this.animation ? this.show() : this.hide()
  85. }
  86. }
  87. }
  88. </script>
  89. <style lang="scss">
  90. // 弹窗公用样式
  91. .ss-modal-body{
  92. box-sizing: border-box;
  93. opacity: 0;
  94. position: fixed;
  95. top: 0;
  96. bottom: 0;
  97. left: 0;
  98. width: 100%;
  99. pointer-events: none;
  100. transform: translateX(0);
  101. transition: all .2s linear;
  102. z-index: 98;
  103. &.ss-modal-active{
  104. pointer-events: auto;
  105. opacity: 1;
  106. }
  107. }
  108. /* #ifdef H5 */
  109. .ss-modal-body.ss-modal-H5Top{
  110. top: 0;
  111. z-index: 999;
  112. }
  113. .ss-modal-body.ss-modal-H5Bottom{
  114. bottom: 0;
  115. z-index: 999;
  116. }
  117. /* #endif */
  118. .ss-modal-body .uni-mask{
  119. z-index: 1;
  120. position: fixed;
  121. top: 0;
  122. right: 0;
  123. left: 0;
  124. bottom: 0;
  125. background: rgba(0,0,0,.6);
  126. }
  127. .ss-modal{
  128. position: fixed;
  129. z-index: 2;
  130. transition: inherit;
  131. /deep/ .gmy-float-touch{
  132. display: none;
  133. }
  134. }
  135. .ss-modal-middle{
  136. top: 50%;
  137. left: 50%;
  138. transform: translate(-50%, -50%);
  139. }
  140. .ss-modal-cover{
  141. width: 100%;
  142. // width: 100vw;
  143. width: calc(100% + 3px);
  144. // width: calc(100vw + 2px);//清除translate带来了计算误差
  145. height: 100%;
  146. // height: 100vw;
  147. height: calc(100% + 3px);
  148. // height: calc(100vh + 2px);//清除translate带来了计算误差
  149. left: 0;
  150. top: 0;
  151. transform: translate(100%, 0);
  152. }
  153. .ss-modal-top{
  154. left: 50%;
  155. z-index: 98;
  156. width: 100%;
  157. height: auto;
  158. transform: translate(-50%, -100%);
  159. & + .uni-mask{
  160. z-index: 97;
  161. }
  162. }
  163. .ss-modal-full{
  164. width: 100%;
  165. width: calc(100% + 3px);//清除translate带来了计算误差
  166. left: 0;
  167. transform: translate(0, -100%);
  168. }
  169. .ss-modal-full.ss-modal-top{
  170. transform: translate(0, -200%);
  171. }
  172. .ss-modal-full.ss-modal-bottom{
  173. transform: translate(0, 100%);
  174. transition: inherit;
  175. }
  176. .ss-modal-right{
  177. right: 0;
  178. max-width: 80%;
  179. }
  180. .ss-modal-left{
  181. left: 0;
  182. max-width: 80%;
  183. }
  184. .ss-modal-middle.ss-modal-insert {
  185. min-width: 380rpx;
  186. min-height: 380rpx;
  187. max-width: 102%;
  188. max-height: 80%;
  189. transform: translate(-50%, -50%);
  190. background: none;
  191. box-shadow: none;
  192. }
  193. .ss-modal-body{
  194. opacity: 0;
  195. pointer-events: none;
  196. }
  197. .ss-modal-active{
  198. opacity: 1;
  199. pointer-events: auto;
  200. .ss-modal-top{
  201. top: 44px;
  202. transform: translate(-50%, 0);
  203. }
  204. .ss-modal-full{
  205. transform: translate(0, -50%);
  206. }
  207. .ss-modal-full.ss-modal-top{
  208. transform: translate(0, 0);
  209. }
  210. .ss-modal-bottom{
  211. transform: translate(0, 0);
  212. }
  213. .ss-modal-cover{
  214. transform: translate(0, 0);
  215. }
  216. }
  217. .ss-modal-bottom{
  218. bottom: 0;
  219. }
  220. </style>