12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 |
- <template>
- <view>
- <view class="box">
- <view @click="open" :data-id="'up'">
- 打开上弹窗
- </view>
- <view @click="open" :data-id="'below'">
- 打开下弹窗
- </view>
- <view @click="open" :data-id="'left'">
- 打开左弹窗
- </view>
- <view @click="open" :data-id="'right'">
- 打开右弹窗
- </view>
- <view @click="open" :data-id="'center'">
- 打开中间弹窗
- </view>
- </view>
- <pop ref="pop" :direction="direction" :is_close="true" :is_mask="true" :width="100">
- <view v-for="t in 5" :key="t">
- 我是:{{direction}}一个弹窗
- </view>
- </pop>
- </view>
- </template>
- <script>
- import pop from "@/components/ming-pop/ming-pop.vue"
- export default {
- data() {
- return {
- direction: "up"
- }
- },
- onLoad() {
- },
- methods: {
- open(e) {
- this.direction = e.currentTarget.dataset.id;
- //打开弹窗
- this.$refs.pop.show();
- }
- },
- components: {
- pop
- }
- }
- </script>
- <style scoped>
- .box view {
- text-align: center;
- margin: 20px;
- background-color: #007AFF;
- color: #FFFFFF;
- border-radius: 3px;
- padding: 10px 0;
- }
- </style>
|