test.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <template>
  2. <view>
  3. <view class="box">
  4. <view @click="open" :data-id="'up'">
  5. 打开上弹窗
  6. </view>
  7. <view @click="open" :data-id="'below'">
  8. 打开下弹窗
  9. </view>
  10. <view @click="open" :data-id="'left'">
  11. 打开左弹窗
  12. </view>
  13. <view @click="open" :data-id="'right'">
  14. 打开右弹窗
  15. </view>
  16. <view @click="open" :data-id="'center'">
  17. 打开中间弹窗
  18. </view>
  19. </view>
  20. <pop ref="pop" :direction="direction" :is_close="true" :is_mask="true" :width="100">
  21. <view v-for="t in 5" :key="t">
  22. 我是:{{direction}}一个弹窗
  23. </view>
  24. </pop>
  25. </view>
  26. </template>
  27. <script>
  28. import pop from "@/components/ming-pop/ming-pop.vue"
  29. export default {
  30. data() {
  31. return {
  32. direction: "up"
  33. }
  34. },
  35. onLoad() {
  36. },
  37. methods: {
  38. open(e) {
  39. this.direction = e.currentTarget.dataset.id;
  40. //打开弹窗
  41. this.$refs.pop.show();
  42. }
  43. },
  44. components: {
  45. pop
  46. }
  47. }
  48. </script>
  49. <style scoped>
  50. .box view {
  51. text-align: center;
  52. margin: 20px;
  53. background-color: #007AFF;
  54. color: #FFFFFF;
  55. border-radius: 3px;
  56. padding: 10px 0;
  57. }
  58. </style>