How to use domify - 10 common examples

return this.positionHolder(wrapper).then(() => {
        image.style.display = 'block'
        let spinEl = domify(`<div class="spin"></div>`)
        if (wrapper.clientHeight &gt; this.container.clientHeight) {
          spinEl.style.top = `${this.container.clientHeight / 2}px`
        }
        wrapper.appendChild(spinEl)
        let stop = spin(spinEl, {
          color: '#ffffff',
          duration: 1000,
          width: 4
        })
        let self = this
        return new Promise((resolve, reject) =&gt; {
          function onload () {
            stop()
            if (spinEl.parentNode) wrapper.removeChild(spinEl)
            self.positionWrapper(wrapper, image)
            resolve()

body.appendChild(dots)
    let ul = query('ul', dots)
    let fragment = doc.createDocumentFragment()
    for (let i = 0, l = this.imgs.length; i < l; i++) {
      ul.appendChild(doc.createElement('li'))
      let el = doc.createElement('div')
      el.style.width = `${vw}px`
      let wrapper = doc.createElement('div')
      let src = this.imgs[i].currentSrc || this.imgs[i].src
      wrapper.className = 'wrapper'
      if (this.loaded.indexOf(i) !== -1) {
        let img = this.createImage(wrapper, src)
        img.style.display = 'block'
        this.positionWrapper(wrapper, img)
      } else {
        wrapper.appendChild(domify(`
        <div style="background-image:url('${src}')" class="mask">
        </div>`))
        let rect = this.imgs[i].getBoundingClientRect()
        let h = rect.height || vw
        let top = Math.min(div.clientHeight - 10, h)/2
        assign(wrapper.style, {
          width: `${vw - 10}px`,
          height: `${h}px`,
          left: '5px',
          marginTop: `-${top}px`
        })
      }
      el.appendChild(wrapper)
      fragment.appendChild(el)
    }
    div.appendChild(fragment)

show() {
    let div = this.container = doc.createElement('div')
    div.id = 'images-preview'
    let vw = viewportWidth()
    div.style.width = (vw*this.imgs.length + 40) + 'px'
    this.setTransform(-20)
    body.appendChild(div)
    let dots = this.dots = domify(`<div class="imgs-preview-dots"><ul></ul></div>`)
    body.appendChild(dots)
    let ul = query('ul', dots)
    let fragment = doc.createDocumentFragment()
    for (let i = 0, l = this.imgs.length; i &lt; l; i++) {
      ul.appendChild(doc.createElement('li'))
      let el = doc.createElement('div')
      el.style.width = `${vw}px`
      let wrapper = doc.createElement('div')
      let src = this.imgs[i].currentSrc || this.imgs[i].src
      wrapper.className = 'wrapper'
      if (this.loaded.indexOf(i) !== -1) {
        let img = this.createImage(wrapper, src)
        img.style.display = 'block'
        this.positionWrapper(wrapper, img)
      } else {
        wrapper.appendChild(domify(`

export default function ({title = '', content = '', imgUrl, showCancel = true, cancelText = '取消', cancelColor = '#000000', confirmText = '确定', confirmColor = '#3CC51F'}) {
  if (el && el.parentNode) el.parentNode.removeChild(el)

  el = domify(fn({
    imgUrl,
    title,
    content,
    showCancel,
    cancelText,
    cancelColor,
    confirmText,
    confirmColor
  }))
  document.body.appendChild(el)
  let called = false
  return new Promise(resolve => {
    el.addEventListener('click', (e) => {
      if (called) return
      if (classes(e.target).has('confirm-btn')) {
        called = true

show () {
    this.root.appendChild(domify('<div class="wx-picker-mask"></div>'))
    const group = []
    group.push(
      range(23, 0).map(o =&gt; {
        return { text: o, value: o }
      })
    )
    group.push(
      range(59, 0).map(o =&gt; {
        return { text: o, value: o }
      })
    )
    const el = domify(tmplFn({ group }))
    this.root.appendChild(el)

    const ps = Array.from(this.root.querySelectorAll('.wx-picker-content'))
    const curr = this.getCurrent()
    this.scrollables = ps.map((el, i) =&gt; {
      const s = new Scrollable(el, curr[i])
      s.on('end', () =&gt; {
        this.checkValue(s, s.currentValue())
      })
      return s
    })
  }
  checkValue (s, value) {

renderPager = () => {
		const { pagerWrapper, pagerItem, pagerActiveClass } = this.options
		this.$pagerWrapper = this.$tag.appendChild(domify(pagerWrapper))
		this.$pagerWrapper.appendChild(
			domify(this.slides.map(() => pagerItem).join(''))
		)
		this.$buttons = [...this.$pagerWrapper.children].map(($button, index) => {
			$button.setAttribute('data-index', index)
			if (index === this.currentItemIndex) {
				DomClass($button).add('is-current')
			}
			return $button
		})

		DomClass(this.$buttons[this.currentItemIndex]).add(pagerActiveClass)

		this.addPagerEvents()

		return this

show () {
    this.root.appendChild(domify('<div class="wx-picker-mask"></div>'))
    const items = this.opts.array.map(text =&gt; {
      return { text, value: text }
    })
    const el = domify(tmplFn({ group: [items] }))
    this.root.appendChild(el)
    const container = this.root.querySelector('.wx-picker-content')
    this.scrollable = new Scrollable(container, this.opts.current)
  }
  hide () {

show () {
    this.root.appendChild(domify('<div class="wx-picker-mask"></div>'))
    const group = []
    group.push(
      range(23, 0).map(o =&gt; {
        return { text: o, value: o }
      })
    )
    group.push(
      range(59, 0).map(o =&gt; {
        return { text: o, value: o }
      })
    )
    const el = domify(tmplFn({ group }))
    this.root.appendChild(el)

    const ps = Array.from(this.root.querySelectorAll('.wx-picker-content'))
    const curr = this.getCurrent()

show () {
    this.root.appendChild(domify('<div class="wx-picker-mask"></div>'))
    const items = this.opts.array.map(text =&gt; {
      return { text, value: text }
    })
    const el = domify(tmplFn({ group: [items] }))
    this.root.appendChild(el)
    const container = this.root.querySelector('.wx-picker-content')
    this.scrollable = new Scrollable(container, this.opts.current)
  }
  hide () {

var createModal = function (
    imgUrl,
    title,
    content,
    showCancel,
    cancelText,
    cancelColor,
    confirmText,
    confirmColor
  ) {
    el = domify(
      fn({
        imgUrl,
        title,
        content,
        showCancel,
        cancelText,
        cancelColor,
        confirmText,
        confirmColor
      })
    )
    document.body.appendChild(el)
    called = false
  }
  if (el && el.parentNode) {