Dialog

弹框

Dialog,也叫 “modal”,表现为带遮罩的弹框。可以分为 AlertConfirm 两种。

实现这个功能调用微信 API wx.showModal() 即可,然后设置不同的参数就可以实现Alert 或者 Confirm,示例代码如下:

  1. <template>
  2. <divclass="page">
  3. <divclass="weui-btn-area">
  4. <buttonclass="weui-btn"type="default" @click="openConfirm">Confirm Dialog</button>
  5. <buttonclass="weui-btn"type="default" @click="openAlert">Alert Dialog</button>
  6. </div>
  7. </div>
  8. </template>
  9. <script>
  10. import base64 from '../../../static/images/base64';
  11. exportdefault{
  12. data(){
  13. return{
  14. }
  15. },
  16. methods:{
  17. openConfirm(){
  18. wx.showModal({
  19. title:'弹窗标题',
  20. content:'弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内',
  21. confirmText:"主操作",
  22. cancelText:"辅助操作",
  23. success:function(res){
  24. console.log(res);
  25. if(res.confirm){
  26. console.log('用户点击主操作')
  27. }else{
  28. console.log('用户点击辅助操作')
  29. }
  30. }
  31. });
  32. },
  33. openAlert(){
  34. wx.showModal({
  35. content:'弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内',
  36. showCancel:false,
  37. success:function(res){
  38. if(res.confirm){
  39. console.log('用户点击确定')
  40. }
  41. }
  42. });
  43. }
  44. }
  45. }
  46. </script>
  47. <style>
  48. page {
  49. margin-top:50px;
  50. padding:15px;
  51. box-sizing: border-box;
  52. }
  53. </style>

效果

dialog01