@blueking/bk-query-component v1.2.0

DataQuery 组件化

基于Omi框架，使用JSX语法快速开发的Web Component，用以支持计算平台查询组件化需求，能够跨平台，不依赖运行时框架的组件。

开始

安装依赖

npm install

运行项目

npm run start

项目打包

npm run build

打包产物在dist中，其中main.js是页面级入口，如果只需要组件本身，引入dist/assets下，除了main.xxx.js之外的所有文件，即可使用<data-query></data-query>组件。

如何开发

快速开发组件

组件的开发依赖omi框架，语法与JSX相同，一个较为标准的组件，并支持TS提示语法的，应该为

import { h, WeElement, tag } from 'omi';
import styles from './index.scss';
import iconStyles from '@/common/icon/style.css' // 如果要使用bk-icon，必须引入样式

interface IDemoProps {
  href?: string,
  disabled?: boolean,
  type?: 'default' | 'primary' | 'danger',
  onClick?: (e: any) => void
}

const tagName = 'demo'

/** 声明，用以支持TS的自动补全 */
declare global {
  namespace JSX {
    interface IntrinsicElements {
      [tagName]: Omi.Props & IDemoProps
    }
  }
}

@tag(tagName)
export default class oButton extends WeElement<ButtonProps> {
  /**
   * static css
   *  方法，将定义组件的CSS样式
   */
  static css = `
    ${styles}
    ${iconStyles}
  `

  /**
   * static defaultProps
   *  方法给定Props的默认值
   */
  static defaultProps = {
    href: 'demo',
    disabled: false,
    type: 'default'
  }

  /**
   * static propTypes
   * 如果要使props在原声HTML中支持，务必写propTypes，并注意类型定义是String 而非 string。
   * 如果在omi内使用的组件，则不需要定义此静态变量
   */
  static propTypes = {
    href: String,
    disabled: Boolean,
    type: String
  }

  render(props: IDemoProps) {
    return (...)
  }

组件通讯

父子通讯

父子组件通讯，可以使用fire自定义事件，并用onXX在父级监听

//子组件
...
this.fire('change')
...

// 父组件
...
render() {
  return(
    <div>
      <child-ele onChange={this.changeHandle.bind(this)}></child-ele>
    </div>
  )
}

祖孙组件通讯

跨域多个层级向下传递 props 有时非常麻烦，这个时候可以使用 provide 和 Inject 跨组件层级传递

define('parent-el', class extends WeElement {

  provide = {
    name: 'omi'
  }

  render() {
    return <child-el></child-el>
  }
})

//不仅仅是子，在任意子孙曾孙节点都可以使用 inject 来消费祖先节点的注入
define('child-el', class extends WeElement {

  inject = ['name']

  render() {
    //output: <div>omi</div>
    return <div>{this.injection.name}</div>
  }
})

兄弟组件通讯

兄弟组件通讯，通过使用mitt进行全局通讯 通过provide/inject，注册emitter，并在全局中使用

import mitt from 'mitt'
define('parent-el', class extends WeElement {

  const emitter = mitt()

  provide = {
    emitter: emitter
  }

  changeHandle() {
    ...
  }

  install() {
    emitter.on('change', this.changeHandle())
  }

  render() {
    return <child-el></child-el>
  }
})

define('child-el', class extends WeElement {

  inject = ['emitter']

  emit() {
    this.injection.emitter.emit('change')
  }
})

更新Update

update 方法是内置的重要核心方法，用于更新组件自身。比如:

this.update()

举个场景，比如点击弹出层的 mask 关闭弹出，在 react 中需要传递给父组件，让父组件更新，而 Omi 推崇自更新，这样 diff 的区域更小。

onMaskClick = ()=> {
  //修改 props
  this.props.show = false
  //防止父组件更新 diff 不出结果
  this.prevProps.show = false
  //更新，并且在 html 模式下忽略 attributes
  this.forceUpdate()
  //触发事件，可以通过这个更改外部的状态变量来保持一致性，但是外面的组件不用再更新
  this.fire('close')
}

也可以使用 updateProps 达到同样的效果:

onMaskClick = ()=> {
  //修改 props 并强制更新
  this.updateProps({
    show: false
  })
  //触发事件，可以通过这个更改外部的状态变量来保持一致性，但是外面的组件不用再更新
  this.fire('close')
}

如果不需要更新子组件，可以使用updateSelf方法