95 lines
1.6 KiB
Markdown
95 lines
1.6 KiB
Markdown
# DetailPopup 弹窗组件
|
|
|
|
这是一个简单的弹窗组件，支持自定义内容，提供开启和关闭方法。
|
|
|
|
## 使用方法
|
|
|
|
### 1. 导入组件
|
|
|
|
```vue
|
|
<script>
|
|
import DetailPopup from '@/components/detail-popup';
|
|
|
|
export default {
|
|
components: {
|
|
DetailPopup
|
|
}
|
|
}
|
|
</script>
|
|
```
|
|
|
|
### 2. 在模板中使用
|
|
|
|
```vue
|
|
<template>
|
|
<view>
|
|
<!-- 按钮触发弹窗 -->
|
|
<button @click="openPopup">打开弹窗</button>
|
|
|
|
<!-- 弹窗组件 -->
|
|
<detail-popup ref="popup">
|
|
<!-- 自定义弹窗内容 -->
|
|
<view class="custom-content">
|
|
<view class="title">这是弹窗标题</view>
|
|
<view class="content">这是弹窗内容</view>
|
|
<button @click="closePopup">确定</button>
|
|
</view>
|
|
</detail-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
methods: {
|
|
// 打开弹窗
|
|
openPopup() {
|
|
this.$refs.popup.open();
|
|
},
|
|
|
|
// 关闭弹窗
|
|
closePopup() {
|
|
this.$refs.popup.close();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.custom-content {
|
|
padding: 20rpx;
|
|
}
|
|
.title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 20rpx;
|
|
text-align: center;
|
|
}
|
|
.content {
|
|
font-size: 28rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
### 3. 事件监听
|
|
|
|
组件会在打开和关闭时触发相应的事件：
|
|
|
|
```vue
|
|
<detail-popup ref="popup" @open="onPopupOpen" @close="onPopupClose">
|
|
<!-- 内容 -->
|
|
</detail-popup>
|
|
|
|
<script>
|
|
export default {
|
|
methods: {
|
|
onPopupOpen() {
|
|
console.log('弹窗已打开');
|
|
},
|
|
onPopupClose() {
|
|
console.log('弹窗已关闭');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
``` |