混合模式

如何使用

  • 首先在对应的yml中引入如下内容:
    wau_config:
    include:
      css:
        - "/application/css/sample/mix/mix1.css"
        - "/application/css/sample/mix/mix2.css"
      js:
        - "/application/js/sample/mix/mix1.js"
        - "/application/js/sample/mix/mix2.js"
    plugins: 
      - "TxMap"
      - "Ueditor"
    
字段 类型 含义
wau_config include、plugins 页面注入文件入口和插件加载配置
wau_config.include Object 页面要注入配置
wau_config.include.css Array 页面要注入的css文件注入,支持多个
wau_config.include.js Array 页面要注入的js的文件注入,支持多个
wau_config.plugins Array 需要引入三方库的组件,目前仅支持TxMap、ueditor
ps:如果每个js之间存在逻辑关系,请调整js数组中的顺序
ps:引入的js只能是页面入口文件,如果要引入三方类库,请在require-wau-config.js中进行配置
  • require-wau-config.js
/*
 * Requirejs Config File
 */

require.config({
    baseUrl: sAsset ? sAsset : './',

    waitSeconds: 600,

    map: {
        '*': {
            'css': 'require-css/css.min'
        }
    },

    paths: {
        'jquery': ["jquery/dist/jquery.min"],
        'Ace': ['ace/dist/js/ace.min'],
        'ace-elements': ["ace/dist/js/ace-elements.min.js"],
        'Chosen': ['chosen/chosen.jquery.min'],
        'Bootstrap': ['bootstrap/dist/js/bootstrap'],
        'BootBox': ['bootbox.js/bootbox'],
        'daterangepicker': ['bootstrap-daterangepicker/daterangepicker.min'],
        'loading': ['wii2-wau/dist/smodel/js/loading'],
        'template': ['/application/common/goods/template'],
    },

    /**
     * 样式按照需要加载加载键值名和加载模块的名称一致,目的是加载模块时加载对应的css样式
     */
    shim: {
        'Ace': {
            deps: [
                'jquery',
                'css!wii2-wau/dist/smodel/css/main.css',
            ],
            exports: 'Ace'
        },
        'Bootstrap':{
            deps: [
                'jquery',
            ]
        },
        'BootBox':{
          deps: [
                'jquery',
                'Bootstrap',
            ],
        },
        'ace-elements': {
            deps: ['assets/js/ace.js']
        }
    }
});
  • 编写你的碎片html文件
- model: plugin
  label: '混合模式字段'
  template: '<div id="myPlugin" class="col-md-8 no-padding-left form-input-buttons my-plugin"><input type="text" name="name" placeholder="请输入自定义字段" maxlength="5" minlength="1" autocomplete="off" required="required" validerror="请输入正确的自定义字段" class="col-sm-12 wii-input"></div>'
  • 或include碎片模式
- model: plugin
  label: '混合模式字段'
  template: !include '@app/module/sample/views/default/fragment/mix1.html'
  • 在mix1.js中编写以下代码

    F.evt.on('wauready', function() {
      var reqdata = Array.prototype.slice.call(arguments, 1)[0];
    });
    

    wau在渲染完成以后会自动触发wauready reqdata会将php对应的renderData中全部的数据都带过来。

  • 在wauready回调函数中可以使用requirejs进行管理,如下所示:

    F.evt.on('wauready', function() {
      var reqdata = Array.prototype.slice.call(arguments, 1)[0];
      $('#myPlugin input').val(reqdata['link']);
    
      requirejs(['/application/require-wau-config.js'], function(common) {
          requirejs(["Ace", "BootBox"], function(ace, bootbox) {
              bootbox.confirm("是否删除该用户吗?", function(result) {
                  console.log('删除以后的回调 ' + result);
              });
          });
      });
    });
    

    通过requirejs可以将你需要的类库引入进行,具体的插件列表如下: bootbox

results matching ""

    No results matching ""