How to use omi - 10 common examples

/* eslint-disable no-console */

if (process.env.NODE_ENV === 'development') {
	const omi = require('omi');
	const options = omi.options;
	const oldVnodeOption = options.vnode;

	options.vnode = function(vnode) {
		const { nodeName, attributes, children } = vnode;

		if (nodeName === void 0) {
			console.error('Undefined component passed to omi.h()\n'+serializeVNode(vnode));
		}

		if (
			attributes && attributes.ref !== void 0 &&
			typeof attributes.ref !== 'function' &&
			!('$$typeof' in vnode)  // allow string refs when omi-compat is installed
		) {
			throw new Error(
				`Component's "ref" property should be a function,` +

function render() {
  return h('div', null, [h('my-child', null, []), h('div', null, ['my-ele'])])
}
// components/my-ele/my-ele.js

this.longTapTimeout = null;
    this.singleTapTimeout = null;
    this.swipeTimeout = null;
    this.x1 = this.x2 = this.y1 = this.y2 = null;
    this.preTapPosition = { x: null, y: null };

    // Disable taps after longTap
    this.afterLongTap = false;
    this.afterLongTapTimeout = null;

    this._handleTouchStart = this._handleTouchStart.bind(this)
    this._handleTouchMove = this._handleTouchMove.bind(this)
    this._handleTouchCancel = this._handleTouchCancel.bind(this)
    this._handleTouchEnd = this._handleTouchEnd.bind(this)

    this.css = getHost(this).css
  }

// Icon - Still show loading icon when loading without showIcon
    let $icon;

    if (showIcon) {
      const currentIcon = icon || treeIcon;

      $icon = currentIcon ? (
        <span>
          {typeof currentIcon === 'function' ?
            omi.createElement(currentIcon, {
              ...this.props,
            }) : currentIcon}
        </span>
      ) : this.renderIcon();
    } else if (loadData &amp;&amp; loading) {
      $icon = this.renderIcon();
    }

    // Title
    const $title = <span>{title}</span>;

    return (

renderTreeNode = (child, index, level = 0) => {
    const {
      keyEntities,
      expandedKeys = [], selectedKeys = [], halfCheckedKeys = [],
      loadedKeys = [], loadingKeys = [],
      dragOverNodeKey, dropPosition,
    } = this.data;

    const pos = getPosition(level, index);
    const key = child.key || pos;

    if (!keyEntities[key]) {
      warnOnlyTreeNode();
      return null;
    }
    const r = omi.cloneElement(child, {
      key,
      eventKey: key,
      expanded: expandedKeys.indexOf(key) !== -1,
      selected: selectedKeys.indexOf(key) !== -1,
      loaded: loadedKeys.indexOf(key) !== -1,
      loading: loadingKeys.indexOf(key) !== -1,
      checked: this.isKeyChecked(key),
      halfChecked: halfCheckedKeys.indexOf(key) !== -1,
      pos,

      // [Legacy] Drag props
      dragOver: dragOverNodeKey === key && dropPosition === 0,
      dragOverGapTop: dragOverNodeKey === key && dropPosition === -1,
      dragOverGapBottom: dragOverNodeKey === key && dropPosition === 1,
    });
    return r

import {
    h,
    render,
    define,
} from 'omi';
import oApp from './oApp.omi'
import stores from './stores/stores'
define('o-app', oApp)
render(h('o-app'), 'body', stores)

import { WeElement, define, render } from 'omi'
import 'omi-router'

let currentPage = null
let stackList = []

window.stackList = stackList
define('o-router', class extends WeElement {

  _firstTime = true

  installed() {
    const root = document.querySelector('#app')
    let main
    this.props.routes.forEach(current => {
      route(current.path, (evt) => {
        current.componentLoader()
          .then(res => {
            const arr = current.path.replace(/pages/, 'page').split('/')
            const selector = current.path.replace(/\//g, '-')
            routeUpdate({ nodeName: arr[1] + '-' + arr[2], attributes: { className: selector } }, selector, evt.byNative, root)
          }).catch(res => {
            console.log(res)
          })

import Omi from 'omi';
import OmiJQueryDatePicker from '../../omi-jquery-date-picker.js';

OmiJQueryDatePicker.init();

class App extends Omi.Component {
    constructor(data) {
        super(data);
        this.data.date = '';
    }

    applyHandle(evt, obj){
        console.log('apply', obj);
        console.log(this.datePicker);
        this.data.date = this.refs.dateInput.value;
    }

    render() {
        return  `
        <div>
            <input value="${this.data.date}" size="40">
        </div>

import { tag, WeElement } from 'omi'
import style from './_index.css'
import '../../omi-element-ui/el-radio'
import '../../omi-element-ui/el-radio-group'

@tag('my-app')
class MyApp extends WeElement {
  css() {
    return style
  }

  onChange = e => {
    console.log('radio checked', e.detail.value)
  }

  render(props, data) {
    return (
      <div>
        <div>
          备选项
          备选项
          备选项</div></div>

import Omi from 'omi';
import config from '../../docs/config.js';
import OmiFinger from 'omi-finger';

OmiFinger.init();

class Pager extends Omi.Component {
    constructor (data) {
        super(data);
        this.activeIndex = 0;
        this.currentIndex = 0;
    }

    updatePager() {
        this.data.preMd = null;
        this.data.preName = null;
        this.data.nextMd = null;
        this.data.nextName = null;
        let item = config.menus[this.data.lan][this.activeIndex];

        let pre = item.list[this.currentIndex - 1];
        if (pre) {
            this.data.preMd = pre.md;