组件

组件是由相同名字的模板+模块文件组成,模板使用.html结尾,模块使用.js结尾,默认使用路径名作为组件的名称,无需配置。组件拥有独立交互,独立样式,独立作用域,独立资源,可以被路由加载(bui.router),局部加载(bui.tab,component)或弹窗加载(bui.page),使用范围更为广泛灵活。

特点

特点 BUI 模块 BUI 组件
html 文件 没有
js 文件
独立作用域
自执行 没有

组件定义

以按钮为例,默认绑定一个事件。

pages/components/btn.html

<!-- 局部样式,非必需 -->
<style>
  .bui-btn {
  }
</style>
<!-- 结构 -->
<div class="bui-btn">按钮</div>

pages/components/btn.js

// 定义一个模块
loader.define(function (requires, exports, module, global) {
  // 通过 module.id 绑定可以防止组件被重复加载导致重复绑定问题
  let mid = module.id;
  let $module = bui.$(`#${mid}`);
  let $btn = $module.find(".bui-btn");

  // 通过对象来描述组件的信息,便于维护
  const pageview = {
    init() {
      // 绑定事件
      this.bind();
    },
    bind() {
      $btn.click(function () {
        alert("已经有按钮事件");
      });

      return this;
    },
  };

  // 自执行
  pageview.init();

  // 可以抛出组件里面的方法给外部操作,也可以不抛出
  return pageview;
});

组件加载及传参

1.静态加载

页面打开的时候,就会自动加载标签上的组件,color 为自定义传给组件的参数

pages/main/main.html

<component name="pages/components/btn" color="primary"></component>

2.动态延迟加载

pages/main/main.html

标签多了个 delay 属性,需要等待主动调用 delay 方法才会加载组件

<component id="btn" name="pages/components/btn" delay="true"></component>

pages/main/main.js

loader.define(function (requires, exports, module, global) {
  // 动态加载
  loader.delay({
    id: "#btn",
    param: {
      color: "primary",
    },
  });
});

3. 组件同步加载

1.7.x 支持,需要工程支持

<component id="btn" name="pages/components/btn" delay="true"></component>
loader.define(async function (requires, exports, module, global) {
  // compBtn 组件可以拿到 init, bind 方法;
  const compBtn = await loader.delay({
    id: "#btn",
    param: {
      color: "primary",
    },
  });
});

组件接收参数

pages/components/btn.js

// 定义一个模块
loader.define(function (requires, exports, module, global) {
  // 1.6.x 通过模块的id来获取不同的参数,所有属性的参数都会被拿到.
  // var params = bui.history.getParams(module.id);
  // 1.7.x
  let params = module.props;

  // 通过 module.id 绑定可以防止组件被重复加载导致重复绑定问题
  let mid = module.id;
  let $module = bui.$(`#${mid}`);
  let $btn = $module.find(".bui-btn");

  // 通过对象来描述组件的信息,便于维护
  const pageview = {
    init() {
      // 绑定事件
      this.bind(params);
      this.addColor(params);
    },
    addColor(opt) {
      // 增加样式
      opt.color && $btn.addClass(opt.color);
    },
    bind() {
      let that = this;
      $btn.click(function (e) {
        // 如果外部传方法,则点击的时候要执行该方法
        params.callback && params.callback.call(that, e);
      });

      return this;
    },
  };

  // 自执行
  pageview.init();

  // 可以抛出组件里面的方法给外部操作,也可以不抛出
  return pageview;
});

组件预览及传参

组件可以单独预览,在网址中的路径 index.html# + 组件名的形式;

方式 1: 普通调试

index.html#pages/components/btn

index.html#pages/components/btn?color=primary

方式 2: 微信开发的回调域名不允许使用 hash 值,要改成? 的形式

index.html?module=pages/components/btn

index.html?module=pages/components/btn&color=primary

效果预览

按钮
Copyright ©2017-2022 easybui.com all right reserved,powered by Gitbook该文件修订时间: 2022-04-27 18:56:31

results matching ""

    No results matching ""