第一个组件

前端的业务由一系列的组件,模块构成,这篇我们来完成第一个组件

真实的组件

  • item结构
  • collapse组件

    collapse组件是一个折叠面板组件,真实效果参考效果
    数据结构大致如下
    collapse具有2层结构,可以使用tree来对应生成相应的结构,点击父级,展开、收起子集
      {
        data: [
          {title: 'this is panel header 1', idf: 'level-1'},
          {
            parent: 'level-1',
            title: 'A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world'
          },
        ]
      }
    

代码示例

模板部分

<ui-list list="{{$list}}" fromTree="{{uniqId}}"/>

tree是list的扩展,这里直接使用list组件来输出结构,设置fromTree="{{uniqId}}",启用list组件的tree模式

js部分

// 解析原始数据
function collapseParse(source={}){
  let data = source.data
  if (lib.isArray(data)) {
    data = data.map(item=> {
      if (lib.isString(item) || lib.isNumber(item)) {
        item = {title: item}
      }

      if (lib.isObject(item)) {
        if (item.idf && !item.parent) {
          item.show = false       // 设定展开列表默认为隐藏状态
          item.catchtap = 'toggleChildren'  // 为所有父级项绑定点击方法
          if (lib.isString(item.title)) {
            item.title = {
              title: item.title,
              class: 'item icon-arrows-a-r color-999'  // 样式设定箭头图标
            }
          }
        }
      }
      return item
    })
  }
  source.data = data
  return source
}

Component({
  options: {
    multipleSlots: true, // 在组件定义时的选项中启用多slot支持
    addGlobalClass: true  // 开放全局样式
  },
  properties: {
    dataSource: Object,  // 数据源
  },
  behaviors: [Core.treeComponentBehavior(app, 'collapse')],  // 继承tree的所有属性方法
  lifetimes: {
    attached: function() { //节点树完成,可以用setData渲染节点,但无法操作节点
      let properties = this.properties
      let dataSource = collapseParse(properties.dataSource)  // 数据源适配
      this.setData({ $list: dataSource }) // 设定渲染数据,tree组件和list组件都是用$list作为源数据
    },
    ready: function() {
      const ds = this.data.$list
      this.mount((ds.$$id || ds.id))  // 绑定实例
    }
  },
  methods: {
    // 响应折叠收起事件
    toggleChildren: function (e, param, inst) {
      const currentTarget = e.currentTarget
      const dataset = currentTarget.dataset
      const treeid = dataset.treeid
      this.findAndUpdate(treeid, function(res) {
        let title = res.title

        // 切换展开收起状态
        if (title.class.indexOf('icon-arrows-a-r')>-1) {
          res.title.class = 'item icon-arrows-a-b color-999'
          setTimeout(() => inst.children[treeid].show(), 100);  // 展开
        } else {
          res.title.class = 'item icon-arrows-a-r color-999'
          setTimeout(() => inst.children[treeid].hide(), 100);  // 折叠隐藏
        }
        return res
      })
    }
  }
})