微信小程序 vant 自定义dialog
时间: 2023-08-23 19:15:30 浏览: 142
小程序源码 -styled-dialogs 可自定义样式的dialog.zip
微信小程序 vant 没有提供直接使用 van-popup 组件的方式,所以我们需要定义一个内部组件,在需要使用的时候将其放到 van-popup 组件中。类似于以下的思路:
在父组件的 wxml 文件中,可以使用 van-popup 组件包裹自定义的子组件,例如:
```html
<van-popup>
<my-component />
</van-popup>
```
然后,在子组件的 wxml 文件中,可以定义自己的样式和内容,例如:
```html
<view class="modal" catchtap="catchClick" animation="{{dialogAni}}">
<view class="header">{{title}}</view>
<view class="body">{{msg}}</view>
<view class="footer">
<button class="cancel" catchtap="bindCancel">{{btnCancel}}</button>
<button class="yes" catchtap="bindYes">{{btnYes}}</button>
</view>
</view>
```
这样,就可以在微信小程序 vant 中自定义 dialog 组件了。
#### 引用[.reference_title]
- *1* *2* *3* [微信小程序 | 结合vant-ui自定义弹出框](https://blog.csdn.net/qq_40738077/article/details/103796703)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
阅读全文