加载中...

Modal

实例代码 

  1. <template>
  2.   <scroller>
  3.     <wxc-panel title="Toast" type="primary">
  4.       <wxc-button type="primary" onclick="{{toast}}" value="Toast"></wxc-button>
  5.     </wxc-panel>
  6.  
  7.     <wxc-panel title="Dialog" type="primary">
  8.       <wxc-button type="success" onclick="{{alert}}" value="Alert" style="margin-bottom: 20px;"></wxc-button>
  9.       <wxc-button type="primary" onclick="{{confirm}}" value="Confirm" style="margin-bottom: 20px;"></wxc-button>
  10.       <wxc-button type="warning" onclick="{{prompt}}" value="Prompt"></wxc-button>
  11.     </wxc-panel>
  12.   </scroller>
  13. </template>
  14.  
  15. <script>
  16.   require('weex-components');
  17.   module.exports = {
  18.     data: {},
  19.     methods: {
  20.       toast: function(msg, duration) {
  21.         if (!msg || typeof msg !== 'string') {
  22.           msg = 'I am Toast show!';
  23.         }
  24.  
  25.         duration = duration || 2;
  26.         var modal = require('@weex-module/modal');
  27.         modal.toast({
  28.           'message': msg,
  29.           'duration': duration
  30.         });
  31.  
  32.       },
  33.       alert: function(msg, okTitle, cancelTitle) {
  34.         var self = this;
  35.         if (!msg || typeof msg !== 'string') {
  36.           msg = "I am Alert!";
  37.         }
  38.          var modal = require('@weex-module/modal');
  39.          modal.alert({
  40.           'message': msg,
  41.           'okTitle': okTitle,
  42.           'cancelTitle': cancelTitle
  43.         }, function() {
  44.           self.toast("Click Alert OK Bnt!!");
  45.         });
  46.  
  47.       },
  48.       confirm: function(msg, okTitle, cancelTitle) {
  49.         var self = this
  50.         if (!msg || typeof msg !== 'string') {
  51.           msg = "I am Confirm!";
  52.         }
  53.        var modal = require('@weex-module/modal');
  54.         okTitle = okTitle || "OK";
  55.         cancelTitle = cancelTitle || "Cancel";
  56.         modal.confirm({
  57.           'message': msg,
  58.           'okTitle': okTitle,
  59.           'cancelTitle': cancelTitle
  60.         }, function(result) {
  61.           self.toast("Click Confirm  " + result);
  62.         });
  63.  
  64.       },
  65.       prompt: function() {
  66.         var self = this;
  67.         var modal = require('@weex-module/modal');
  68.         modal.prompt( {
  69.           'message': 'I am Prompt!',
  70.           'okTitle': 'ok',
  71.           'cancelTitle': 'cancel'
  72.         }, function(result) {
  73.           self.toast("Click Prompt  " + result);
  74.         });
  75.        
  76.       }
  77.     }
  78.   }
  79. </script>
  80.  
  81. <style>
  82. </style>
还没有评论.