px-popup-bottom.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. "use strict";
  2. var common_vendor = require("../../common/vendor.js");
  3. const _sfc_main = {
  4. props: {
  5. title: {
  6. type: String,
  7. default: ""
  8. },
  9. fontweight: {
  10. type: [String, Number],
  11. default: "normal"
  12. },
  13. visible: {
  14. type: Boolean,
  15. default: false
  16. },
  17. maxHeight: {
  18. type: [String, Number],
  19. default: "75%"
  20. },
  21. radius: {
  22. type: [String, Number],
  23. default: "0"
  24. },
  25. animaTime: {
  26. type: Number,
  27. default: 0.2
  28. },
  29. bottom: {
  30. type: [String, Number],
  31. default: 0
  32. },
  33. bgColor: {
  34. type: [String],
  35. default: "#ffffff"
  36. },
  37. zindex: {
  38. type: [String, Number],
  39. default: 1e3
  40. },
  41. maskZindex: {
  42. type: [String, Number],
  43. default: 999
  44. },
  45. always: {
  46. type: Boolean,
  47. default: false
  48. }
  49. },
  50. data() {
  51. return {
  52. show: false,
  53. height: 0,
  54. PopHeight: 0,
  55. cotMaxHeight: "",
  56. isAnimaStart: false,
  57. rpxRate: "",
  58. cotRadius: 0
  59. };
  60. },
  61. watch: {
  62. visible(newval) {
  63. this.isAnimaStart = true;
  64. setTimeout(() => {
  65. this.isAnimaStart = false;
  66. }, this.animaTime * 1e3);
  67. if (newval && this.height === 0) {
  68. if (this.PopHeight === 0 || this.always) {
  69. this.setContViewHeight();
  70. } else {
  71. this.height = this.PopHeight;
  72. }
  73. this.$emit("open");
  74. } else {
  75. this.height = 0;
  76. }
  77. this.show = newval;
  78. },
  79. maxHeight: {
  80. handler(newval) {
  81. this.cotMaxHeight = this.unitCheck(newval);
  82. },
  83. immediate: true
  84. },
  85. radius: {
  86. handler(newval) {
  87. this.cotRadius = this.unitCheck(newval);
  88. },
  89. immediate: true
  90. }
  91. },
  92. created() {
  93. this.rpxRate = this.getRpxRate();
  94. },
  95. mounted() {
  96. this.$nextTick(() => {
  97. });
  98. },
  99. methods: {
  100. onClose() {
  101. this.$emit("update:visible", false);
  102. this.$emit("close");
  103. },
  104. onScrollToLower(e) {
  105. this.$emit("reachBottom");
  106. },
  107. getRpxRate() {
  108. let res = common_vendor.index.getWindowInfo();
  109. let width = res.windowWidth;
  110. let rate = 750 / width;
  111. return rate;
  112. },
  113. unitCheck(value) {
  114. const val = String(value);
  115. if (!val.includes("px") && !val.includes("%")) {
  116. return `${val}rpx`;
  117. }
  118. return val;
  119. },
  120. preventTouch(el) {
  121. el.addEventListener("touchmove", function(e) {
  122. e.stopPropagation();
  123. }, {
  124. passive: false
  125. });
  126. },
  127. setBodyOverFlow(val) {
  128. document.body.style.overflow = val;
  129. },
  130. async setContViewHeight() {
  131. let data = await this.computeHeight();
  132. this.height = data.height + (this.title ? 100 / parseFloat(this.rpxRate) : 0);
  133. this.PopHeight = this.height;
  134. },
  135. computeHeight() {
  136. return new Promise((resolve) => {
  137. this.$nextTick(() => {
  138. const query = common_vendor.index.createSelectorQuery().in(this);
  139. query.select("#popup_content").boundingClientRect((data) => {
  140. resolve(data);
  141. }).exec();
  142. });
  143. });
  144. }
  145. }
  146. };
  147. function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  148. return {
  149. a: $props.maskZindex,
  150. b: $props.bottom + "rpx",
  151. c: $data.show,
  152. d: common_vendor.o((...args) => $options.onClose && $options.onClose(...args)),
  153. e: common_vendor.o(() => {
  154. }),
  155. f: common_vendor.t($props.title),
  156. g: $props.fontweight,
  157. h: common_vendor.o((...args) => $options.onClose && $options.onClose(...args)),
  158. i: $props.title,
  159. j: $data.isAnimaStart ? 1 : "",
  160. k: common_vendor.o((...args) => $options.onScrollToLower && $options.onScrollToLower(...args)),
  161. l: common_vendor.n({
  162. show: $data.show
  163. }),
  164. m: common_vendor.o(() => {
  165. }),
  166. n: common_vendor.o(() => {
  167. }),
  168. o: $props.bgColor,
  169. p: `${$data.height}px`,
  170. q: $data.show ? $data.cotMaxHeight : 0,
  171. r: $data.cotRadius,
  172. s: $data.cotRadius,
  173. t: `all ${$props.animaTime}s ease-in`,
  174. v: $props.bottom + "rpx",
  175. w: $props.zindex,
  176. x: common_vendor.n({
  177. "popup-show": $data.show
  178. }),
  179. y: common_vendor.o(() => {
  180. }),
  181. z: common_vendor.o(() => {
  182. }),
  183. A: $props.zindex
  184. };
  185. }
  186. var Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-32af3e28"], ["__file", "C:/Users/Administrator/Desktop/\u9879\u76EE/\u76F4\u64AD/liveH5-v3/components/px-popup-bottom/px-popup-bottom.vue"]]);
  187. wx.createComponent(Component);