继续重构layer

package.json

@@ -19,7 +19,7 @@
   "license": "MIT",
   "dependencies": {},
   "devDependencies": {
-    "anot": "^2.0.0",
+    "anot": "^2.1.1",
     "chalk": "^2.4.2",
     "chokidar": "^1.7.0",
     "es.shim": "^1.1.2",

src/layer/core.wc

@@ -33,11 +33,10 @@
   color: #666;
   font-size: 14px;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
-  // opacity: 0;
+  transition: opacity 0.2s ease-in-out, left 0.2s ease-in-out,
+    right 0.2s ease-in-out, top 0.2s ease-in-out, bottom 0.2s ease-in-out;
+  opacity: 0;
 
-  &.shift {
-    transition: all 0.5s ease-out;
-  }
   &.scale {
     transform: scale(1.01);
     transition: transform 0.1s linear;
@@ -84,6 +83,31 @@
       padding: 0;
       border: 0;
       resize: none;
+      background: #fff;
+    }
+
+    ::slotted(&__toast) {
+      display: flex;
+      align-items: center;
+      width: 300px;
+      padding: 0 10px !important;
+      border-radius: 4px;
+    }
+
+    ::slotted(&__toast.style-info) {
+      border: 1px solid nth($cp, 3);
+      background: nth($cp, 2);
+      color: nth($cgr, 3);
+    }
+    ::slotted(&__toast.style-warn) {
+      border: 1px solid #faebb4;
+      background: #fffbed;
+      color: nth($co, 3);
+    }
+    ::slotted(&__toast.style-error) {
+      border: 1px solid #f5c4c4;
+      background: #fef0f0;
+      color: nth($cr, 1);
     }
   }
 
@@ -148,13 +172,6 @@
   height: 100%;
   background: rgba(255, 255, 255, 0.15);
   backdrop-filter: blur(5px);
-
-  &.shift {
-    transition: all 0.5s ease-out;
-  }
-  &.inner {
-    position: absolute;
-  }
 }
 
 :host([type='alert']),
@@ -170,6 +187,15 @@
     }
   }
 }
+:host([type='toast']) {
+  .layer {
+    box-shadow: none;
+
+    &__content {
+      min-height: 40px;
+    }
+  }
+}
 </style>
 
 <script>
@@ -195,29 +221,11 @@ const lang =
   LANGUAGES[window.__ENV_LANG__ || navigator.language] || LANGUAGES.en
 
 let unique = null // 储存当前打开的alert/confirm/prompt类型的弹窗
-
+let toastCount = 0
-let defconf = {
-  area: ['auto', 'auto'],
-  shift: {}, // 弹窗出来的初始位置,用于出场动画
-  offset: {} // 弹窗出来后的坐标, 为数组,可有4个值,依次是 上右下左
-}
 
 // 要保证弹层唯一的类型
 const UNIQUE_TYPES = ['alert', 'confirm', 'prompt']
 
-const fixOffset = function(offset) {
-  for (let i in offset) {
-    if (offset[i] === 'auto' || (!offset[i] && offset[i] !== 0)) {
-      delete offset[i]
-    } else {
-      if (isFinite(offset[i])) {
-        offset[i] += 'px'
-      }
-    }
-  }
-  return offset
-}
-
 function renderBtns(list) {
   var html = ''
   list.forEach((t, i) => {
@@ -260,6 +268,10 @@ class Layer {
   set type(val) {
     var { btns } = this.props
 
+    if (this._handleBtnClick) {
+      return
+    }
+
     switch (val) {
       case 'alert':
         while (btns.length > 1) {
@@ -341,7 +353,23 @@ class Layer {
     }
     delete this.promise
     unbind(this.__CTRL__, 'click', this._handleBtnClick)
-    this.parentNode.removeChild(this)
+
+    // 离场动画
+    if (this.props.from) {
+      let _style = 'opacity:0;'
+      for (let k in this.props.from) {
+        _style += `${k}:${this.props.from[k]};`
+      }
+      this.root.children[1].style.cssText += _style
+      setTimeout(() => {
+        this.parentNode.removeChild(this)
+        if (this.props.type === 'toast') {
+          toastCount--
+        }
+      }, 200)
+    } else {
+      this.parentNode.removeChild(this)
+    }
   }
 
   mounted() {
@@ -383,6 +411,9 @@ class Layer {
 
     this._updateFixedStat()
 
+    /* ------------------------ */
+    /* ----    额外的样式     --- */
+    /* ------------------------ */
     if (this.props.mask) {
       this._handlMask = clickOutside(this.root.children[1], ev => {
         if (this.props.maskClose) {
@@ -412,14 +443,39 @@ class Layer {
     if (this.props.background) {
       _style += `background: ${this.props.background};`
     }
-    if (this.props.radius) {
+    if (this.props.radius || this.props.radius === 0) {
       _style += `border-radius: ${this.props.radius};`
     }
 
+    if (this.props.size) {
+      for (let k in this.props.size) {
+        _style += `${k}:${this.props.size[k]};`
+      }
+    }
+
+    if (this.props.from) {
+      for (let k in this.props.from) {
+        _style += `${k}:${this.props.from[k]};`
+      }
+      // 进场动画
+      setTimeout(_ => {
+        let _nextStyle = 'opacity:1;'
+        for (let k in this.props.to) {
+          _nextStyle += `${k}:${this.props.to[k]};`
+        }
+        this.root.children[1].style.cssText += _nextStyle
+      }, 50)
+    }
+
     if (_style) {
-      log(_style)
       this.root.children[1].style.cssText += _style
     }
+
+    if (this.props.type === 'toast') {
+      setTimeout(() => {
+        this.close()
+      }, this.props.timeout)
+    }
   }
 
   unmount() {
@@ -441,31 +497,68 @@ class Layer {
 
 function createLayer(opt) {
   var layDom = document.createElement('wc-layer')
-  if (opt.mask) {
+
-    layDom.setAttribute('mask', '')
+  if (opt.type === 'toast') {
+    var { timeout, type, content } = opt
+    timeout = timeout >>> 0
+    if (timeout < 1) {
+      timeout = 2500
+    }
+    opt = {
+      timeout,
+      type,
+      content,
+      from: { top: `${toastCount * 50}px` },
+      to: { top: `${(toastCount + 1) * 50 - 30}px` }
+    }
+    toastCount++
+  } else {
+    if (opt.mask) {
+      layDom.setAttribute('mask', '')
+    }
+
+    if (opt.btns === false) {
+      layDom.props.btns = []
+    } else if (opt.btns && opt.btns.length) {
+      layDom.props.btns = opt.btns
+    } else {
+      layDom.props.btns = lang.BTNS.concat()
+    }
+
+    if (opt.intercept && typeof opt.intercept === 'function') {
+      layDom.props.intercept = opt.intercept
+    }
+
+    layDom.props.mask = opt.mask
+    layDom.props.maskClose = opt.maskClose
+
+    if (opt.hasOwnProperty('overflow')) {
+      layDom.props.overflow = opt.overflow
+    }
+
+    /* 额外样式 */
+    layDom.props.maskColor = opt.maskColor
+
+    layDom.props.blur = opt.blur
+
+    layDom.props.radius = opt.radius
+    layDom.props.background = opt.background
+
+    if (opt.size && typeof opt.size === 'object') {
+      layDom.props.size = opt.size
+    }
   }
 
   layDom.title = opt.title
-  if (opt.btns === false) {
+  layDom.props.timeout = timeout
-    layDom.props.btns = []
-  } else if (opt.btns && opt.btns.length) {
-    layDom.props.btns = opt.btns
-  } else {
-    layDom.props.btns = lang.BTNS.concat()
-  }
 
-  if (opt.intercept && typeof opt.intercept === 'function') {
+  if (opt.to && typeof opt.to === 'object') {
-    layDom.props.intercept = opt.intercept
+    layDom.props.to = opt.to
-  }
+    if (opt.from && typeof opt.from === 'object') {
-
+      layDom.props.from = opt.from
-  layDom.props.radius = opt.radius
+    } else {
-  layDom.props.background = opt.background
+      layDom.props.from = opt.to
-  layDom.props.mask = opt.mask
+    }
-  layDom.props.maskClose = opt.maskClose
-  layDom.props.maskColor = opt.maskColor
-  layDom.props.blur = opt.blur
-  if (opt.hasOwnProperty('overflow')) {
-    layDom.props.overflow = opt.overflow
   }
 
   layDom.type = opt.type
@@ -511,6 +604,13 @@ const _layer = function(opt) {
   }
 }
 
+Object.defineProperty(_layer, '__map__', {
+  value: {},
+  writable: true,
+  enumerable: false,
+  configurable: true
+})
+
 Object.assign(_layer, {
   alert(content, title = lang.TITLE) {
     return createLayer({
@@ -562,170 +662,25 @@ Object.assign(_layer, {
     }
     switch (type) {
       case 'info':
-        break
       case 'warn':
-        break
       case 'error':
-        type = 'deny'
         break
       default:
         type = 'info'
     }
 
-    let opt = {
+    return createLayer({
       content: `
-      <mark class="toast-box style-${type}">
+      <div class="layer__content__toast style-${type}">
-        <i class="do-icon-${type}"></i>
+        <wc-icon size="mini" is="${type}"></wc-icon>
         ${txt}
-      </mark>`,
+      </div>`,
-      menubar: false,
+      type: 'toast',
-      mask: false,
+      timeout
-      type: 7,
+    })
-      shift: { top: 0 },
-      timeout,
-      offset: { top: 50 },
-      fixed: true,
-      toast: true // toast模式
-    }
-
-    return _layer.open(opt)
   }
 })
 
-/* Anot.directive('layer', {
-  priority: 8090,
-  init: function(binding) {
-    // 去掉:layer属性,避免二次扫描
-    binding.element.removeAttribute(binding.name)
-    if (!binding.param || binding.param !== 'tips') {
-      binding.param = '' // 去掉param,保证之后的逻辑处理正常
-      binding.element.style.display = 'none'
-    }
-  },
-  update: function(val) {
-    if (!val) {
-      return console.error(
-        `SyntaxError: Unexpected [${this.name}=${this.expr}]`
-      )
-    }
-
-    let state = Object.assign({ type: 7, wrap: true }, this.element.dataset)
-
-    if (!this.param) {
-      let init = { $id: 'layerwrap-' + val, state, props: {} }
-
-      if (state.hasOwnProperty('area')) {
-        state.area = state.area.split(',')
-      }
-      if (state.hasOwnProperty('shift')) {
-        state.shift = fixOffset(new Function(`return ${state.shift}`)())
-      }
-
-      if (state.hasOwnProperty('offset')) {
-        state.offset = fixOffset(new Function(`return ${state.offset}`)())
-      }
-
-      if (state.hasOwnProperty('btns')) {
-        state.btns = state.btns.split(',')
-      }
-
-      if (!state.hasOwnProperty('menubar')) {
-        state.menubar = false
-      }
-
-      let tmp = new __layer__().__init__(init)
-
-      //去掉data-*属性
-      for (let i in this.element.dataset) {
-        delete this.element.dataset[i]
-      }
-
-      layerObj[tmp.init.$id] = {
-        obj: tmp,
-        parentElem: this.element.parentNode,
-        wrap: this.element,
-        show: false
-      }
-      layerDom[tmp.init.$id] = tmp.create()
-    } else if (this.param === 'tips') {
-      let tips = document.createElement('div')
-      let cont = document.createElement('span')
-      let arrow = document.createElement('i')
-      let $container = Anot(this.element)
-      let { position } = getComputedStyle(this.element)
-
-      tips.className = 'do-layer__tips'
-      cont.className = 'layer-content'
-      arrow.className = 'arrow'
-      cont.textContent = val
-      tips.appendChild(cont)
-      tips.appendChild(arrow)
-
-      if (position === 'static') {
-        this.element.style.position = 'relative'
-      }
-      this.element.appendChild(tips)
-
-      let style = {}
-
-      if (state.color) {
-        style.color = state.color
-      }
-      if (state.color) {
-        style.background = state.background
-      }
-
-      let cw = $container.innerWidth()
-      let ch = $container.innerHeight()
-
-      let arrowOffset = ['top']
-
-      // log(tips, layw, layh)
-      Anot(tips).css(style)
-
-      $container.bind('mouseenter', ev => {
-        let tmpStyle = { visibility: 'visible' }
-        let layw = tips.clientWidth
-        let layh = tips.clientHeight
-        let { left, top } = $container.offset()
-        let ol = left - $doc.scrollLeft()
-        let ot = top - $doc.scrollTop()
-
-        // 判断位置是以确定出现 在上还是在下
-        if (ot < layh + 8) {
-          arrowOffset[0] = 'bottom'
-          arrow.style.borderBottomColor = state.background
-          tmpStyle.bottom = ''
-          tmpStyle.top = ch + 8
-        } else {
-          arrow.style.borderTopColor = state.background
-          tmpStyle.top = ''
-          tmpStyle.bottom = ch + 8
-        }
-
-        if (ol + cw * 0.7 + layw > window.innerWidth) {
-          tmpStyle.left = cw * 0.3 - layw
-          arrowOffset[1] = 'left'
-        } else {
-          tmpStyle.left = cw * 0.7
-        }
-
-        arrow.classList.add('offset-' + arrowOffset.join('-'))
-        Anot(tips).css(tmpStyle)
-      })
-      $container.bind('mouseleave', () => {
-        setTimeout(() => {
-          arrow.classList.remove('offset-' + arrowOffset.join('-'))
-          arrowOffset = ['top']
-          arrow.style.borderBottomColor = ''
-          arrow.style.borderTopColor = ''
-          tips.style.visibility = 'hidden'
-        }, 100)
-      })
-    }
-  }
-}) */
-
 window.layer = _layer
 
 export default _layer

src/layer/index.js

@@ -7,696 +7,10 @@
 
 'use strict'
 
-import '../drag/index'
+import layer from './core'
-
-Anot.ui.layer = '1.0.0-normal'
-
 const log = console.log
 
-const LANGUAGES = {
+/* Anot.directive('layer', {
-  en: {
-    TITLE: 'Dialog',
-    YES_BTN: 'OK',
-    NO_BTN: 'Cancel',
-    ERROR: 'The layer instance is not exists',
-    NEED_CONTAINER: 'layer "tips" require a DOM object as container'
-  },
-  zh: {
-    TITLE: '提示',
-    YES_BTN: '确定',
-    NO_BTN: '取消',
-    ERROR: '要关闭的layer实例不存在',
-    NEED_CONTAINER: 'tips类型需要指定一个元素节点作为容器'
-  },
-  'zh-TW': {
-    TITLE: '提示',
-    YES_BTN: '確定',
-    NO_BTN: '取消',
-    ERROR: '要關閉的layer實例不存在',
-    NEED_CONTAINER: 'tips类型需要指定一個元素節點作爲容器'
-  }
-}
-LANGUAGES['zh-CN'] = LANGUAGES.zh
-const lang =
-  LANGUAGES[window.__ENV_LANG__ || navigator.language] || LANGUAGES.en
-let layerDom = {}
-let layerObj = {}
-let unique = null // 储存当前打开的1/2/3类型的弹窗
-let lid = 0
-let defconf = {
-  type: 1, // 弹窗类型
-  background: '#fff',
-  mask: true, // 遮罩
-  maskClose: false, // 遮罩点击关闭弹窗
-  maskColor: null, // 遮罩背景色
-  radius: '0px', // 弹窗圆角半径
-  area: ['auto', 'auto'],
-  title: lang.TITLE, // 弹窗主标题(在工具栏上的)
-  menubar: true, // 是否显示菜单栏
-  content: '', // 弹窗的内容
-  fixed: false, // 是否固定不可拖拽
-  shift: {}, // 弹窗出来的初始位置,用于出场动画
-  offset: {}, // 弹窗出来后的坐标, 为数组,可有4个值,依次是 上右下左
-  btns: [lang.YES_BTN, lang.NO_BTN] // 弹窗的2个按钮的文字
-}
-const $doc = Anot(document)
-const uuid = function() {
-  return 'layer-' + lid++
-}
-const close = function(id) {
-  if (typeof id !== 'string' && typeof id !== 'number') {
-    return Anot.error(lang.ERROR)
-  }
-  if (/^layerwrap\-/.test(id) || layerObj['layerwrap-' + id]) {
-    try {
-      id = (layerObj['layerwrap-' + id] ? 'layerwrap-' : '') + id
-      //未显示过,忽略
-      if (!layerObj[id].show) {
-        return
-      }
-      layerObj[id].parentElem.replaceChild(layerObj[id].wrap, layerDom[id][0])
-      layerObj[id].wrap.style.display = 'none'
-      layerObj[id].show = false
-    } catch (err) {}
-  } else {
-    unique = null
-    if (layerDom[id]) {
-      layerDom[id][0].classList.add('shift')
-      layerDom[id][1].classList.add('shift')
-      layerDom[id][0].style.opacity = ''
-      layerDom[id][1].style.opacity = 0
-      setTimeout(function() {
-        try {
-          layerDom[id][0].parentNode.removeChild(layerDom[id][0])
-          delete layerDom[id]
-          delete Anot.vmodels[id]
-        } catch (err) {}
-      }, 200)
-    }
-  }
-  document.body.style.overflow = ''
-}
-
-const fixOffset = function(offset) {
-  for (let i in offset) {
-    if (offset[i] === 'auto' || (!offset[i] && offset[i] !== 0)) {
-      delete offset[i]
-    } else {
-      if (isFinite(offset[i])) {
-        offset[i] += 'px'
-      }
-    }
-  }
-  return offset
-}
-
-/* type: { // 弹窗类型对应的id值
-  1: 'alert',
-  2: 'confirm',
-  3: 'prompt',
-  4: 'iframe',
-  5: 'tips',
-  6: 'loading',
-  7: 'msg',
-} */
-class __layer__ {
-  get dot() {
-    //loading的子元素数量
-    return {
-      1: 1,
-      2: 5,
-      3: 5,
-      4: 9
-    }
-  }
-
-  constructor(opt) {
-    if (opt) {
-      let { yes, no, success } = opt
-      delete opt.yes
-      delete opt.no
-      delete opt.success
-
-      this.__init__({
-        state: { ...opt },
-        props: { yes, no, success }
-      })
-        .append()
-        .show()
-    }
-    this.timeout = null
-  }
-
-  // 真正的初始化弹层配置
-  __init__(opt) {
-    let _id = opt.$id || uuid()
-    this.init = {
-      $id: _id,
-      state: {
-        ...defconf,
-        ...opt.state
-      },
-      props: opt.props,
-      skip: [
-        'area',
-        'shift',
-        'offset',
-        'mask',
-        'maskClose',
-        'container',
-        'follow'
-      ],
-      methods: {
-        shake() {
-          this.$refs.layer.classList.add('scale')
-          setTimeout(() => {
-            this.$refs.layer.classList.remove('scale')
-          }, 100)
-        },
-        onMaskClick: function(ev) {
-          if (ev.target === ev.currentTarget) {
-            if (this.type < 4 && !this.maskClose) {
-              this.shake()
-            } else {
-              this.maskClose && this.close()
-            }
-          }
-        },
-        handleConfirm: function() {
-          if (this.type === 3) {
-            if (!this.prompt) {
-              return this.shake()
-            }
-          }
-          if (typeof this.props.yes === 'function') {
-            let cb = [this.$id]
-            if (this.type === 3) {
-              cb.unshift(this.prompt)
-            }
-            this.props.yes.apply(this, cb)
-          } else {
-            this.close()
-          }
-        },
-        handleCancel: function() {
-          if (typeof this.props.no === 'function') {
-            this.props.no.call(this, this.$id)
-          } else {
-            this.close()
-          }
-        },
-        close: function() {
-          close(this.$id)
-        }
-        // cancelBubble: function(ev) {
-        //   ev.cancelBubble = true
-        // }
-      },
-      mounted: function() {
-        if (typeof this.props.success === 'function') {
-          this.props.success.call(this)
-        }
-      }
-    }
-
-    // iframe类型补一个自适应高度的方法
-    if (this.init.state.type === 4) {
-      this.init.methods.autoSize = function() {
-        let { layer, frame } = this.$refs
-        frame.onload = function() {
-          try {
-            let $body = frame.contentWindow.document.body
-            let { clientWidth, clientHeight } = $body
-
-            layer.style.cssText += `width: ${clientWidth}px;height: ${clientHeight}px;`
-            frame.style.cssText += `height: ${clientHeight}px;`
-          } catch (err) {}
-        }
-      }
-    }
-    return this
-  }
-
-  // 创建弹层容器及骨架
-  create() {
-    let { state, $id } = this.init
-    let outerBox = document.createElement('div')
-    let layBox = document.createElement('div')
-
-    outerBox.setAttribute('anot', $id)
-    outerBox.setAttribute(':on-click', 'onMaskClick')
-
-    outerBox.classList.add('do-layer')
-    if (state.mask) {
-      outerBox.classList.add('mask')
-      if (state.container && state.container !== document.body) {
-        outerBox.classList.add('inner')
-      }
-    }
-    if (state.maskColor) {
-      outerBox.style.background = state.maskColor
-    }
-
-    layBox.classList.add('layer-box')
-    layBox.classList.add('skin-normal')
-
-    if (state.extraClass) {
-      layBox.classList.add(state.extraClass)
-      delete state.extraClass
-    }
-    if (state.shift) {
-      fixOffset(state.shift)
-      for (let k in state.shift) {
-        let val = state.shift[k]
-        val += isFinite(val) ? 'px' : ''
-        layBox.style.cssText += `${k}: ${val};`
-      }
-    }
-
-    if (state.toast) {
-      layBox.classList.add('type-toast')
-    } else {
-      layBox.classList.add('type-' + state.type)
-    }
-
-    layBox.setAttribute('ref', 'layer')
-    // layBox.setAttribute(':on-click', 'cancelBubble')
-
-    // 暂时隐藏,避免修正定位时,能看到闪一下
-    layBox.style.cssText += 'border-radius:' + state.radius + 'px'
-
-    // 没有菜单栏, 且未禁止拖拽,则加上可拖拽属性
-    if (!state.menubar && !state.fixed) {
-      layBox.setAttribute(':drag', '')
-      layBox.setAttribute('data-limit', 'window')
-    }
-
-    // size of layer-content
-    var boxcss = ''
-    if (state.area[0] !== 'auto') {
-      boxcss += 'width: ' + state.area[0] + ';'
-    }
-    if (state.area[1] !== 'auto') {
-      boxcss += 'height: ' + state.area[1] + ';'
-    }
-    let arrow = ''
-    if (state.type === 5) {
-      arrow += `<i class="arrow"></i>`
-    }
-
-    layBox.innerHTML = `
-      ${this.mkMenubar()}
-      <div
-        class="layer-content do-fn-cl"
-        style="${boxcss}"
-        ${!state.wrap && state.type !== 6 ? ':html="content"' : ''}>
-
-        ${state.type === 6 ? this.mkLoading(state.load) : ''}
-      </div>
-      ${this.mkCtrl()}
-      ${arrow}
-    `
-    delete state.wrap
-    outerBox.appendChild(layBox)
-    return [outerBox, layBox]
-  }
-
-  // 创建loading元素
-  mkLoading(style) {
-    return `
-      <div class="loading style-${style}">
-        <span class="dot-box">
-        ${(style === 1 ? '<i class="do-icon-loading"></i>' : '<i></i>').repeat(
-          this.dot[style]
-        )}
-        </span>
-      </div>
-    `
-  }
-
-  // 创建窗口导航条
-  mkMenubar() {
-    let { menubar, fixed } = this.init.state
-    let html = ''
-    if (menubar) {
-      html = `
-        <div class="layer-title do-fn-noselect"
-          :text="title"
-          ${!fixed ? ':drag="layer-box" data-limit="window"' : ''}>
-        </div>
-      `
-    }
-    return html
-  }
-
-  // 创建窗口按钮
-  mkCtrl() {
-    let { type } = this.init.state
-    if (type > 3) {
-      return ''
-    } else {
-      let html = ''
-      let btns = `
-        <a class="action-yes"
-          :on-click="handleConfirm"
-          tabindex="-1"
-          :text="btns[0]"
-          ></a>
-        `
-      if (type > 1) {
-        btns =
-          `
-        <a class="action-no"
-          :on-click="handleCancel"
-          :text="btns[1]"
-          ></a>
-        ` + btns
-      }
-      html = `
-        <div class="layer-ctrl do-fn-noselect">
-          ${btns}
-        </div>
-      `
-      return html
-    }
-  }
-
-  append() {
-    let { state, $id } = this.init
-    let container = state.container
-
-    if (state.type < 4) {
-      // 如果有已经打开的弹窗,则关闭
-      if (unique) {
-        close(unique)
-      }
-      unique = $id
-    }
-
-    // 返回一个数组,第1个元素是容器,第2个是骨架
-    layerDom[$id] = this.create()
-
-    delete state.toast
-    this.toast = true
-    if (!container) {
-      container = document.body
-    }
-
-    container.appendChild(layerDom[$id][0])
-    this.vm = Anot(this.init)
-    return this
-  }
-
-  show() {
-    let vm = this.vm
-    let { state, $id } = this.init
-    let container = state.container
-
-    setTimeout(function() {
-      let style = { background: state.background }
-
-      let $dom1 = Anot(layerDom[$id][1])
-
-      // tips类型, 弹层的定位要在指定的容器上
-      if (state.type === 5) {
-        let css = getComputedStyle(layerDom[$id][1])
-        // 只有tips类型可以定义 `color`
-        style.color = state.color
-        style.opacity = 1
-        let $container = Anot(container)
-        let $arrow = $container[0].querySelector('.arrow')
-        let cw = $container.innerWidth()
-        let ch = $container.innerHeight()
-        let ol = $container.offset().left - $doc.scrollLeft()
-        let ot = $container.offset().top - $doc.scrollTop()
-
-        let layw = parseInt(css.width)
-        let layh = parseInt(css.height)
-        let arrowOffset = ['top']
-
-        Anot(layerDom[$id][1]).css(style)
-
-        $container.bind('mouseenter', ev => {
-          let tmpStyle = { visibility: 'visible' }
-          ol = $container.offset().left - $doc.scrollLeft()
-          ot = $container.offset().top - $doc.scrollTop()
-
-          if (ot + 18 < layh) {
-            arrowOffset[0] = 'bottom'
-            $arrow.style.borderBottomColor = state.background
-            tmpStyle.top = ot + ch + 8
-          } else {
-            $arrow.style.borderTopColor = state.background
-            tmpStyle.top = ot - layh - 8
-          }
-
-          if (ol + cw * 0.7 + layw > window.innerWidth) {
-            tmpStyle.left = ol + cw * 0.3 - layw
-            arrowOffset[1] = 'left'
-          } else {
-            tmpStyle.left = ol + cw * 0.7
-          }
-
-          $arrow.classList.add('offset-' + arrowOffset.join('-'))
-          $dom1.css(tmpStyle)
-        })
-        $container.bind('mouseleave', () => {
-          setTimeout(() => {
-            $arrow.classList.remove('offset-' + arrowOffset.join('-'))
-            arrowOffset = ['top']
-            $arrow.style.borderBottomColor = ''
-            $arrow.style.borderTopColor = ''
-            layerDom[$id][1].style.visibility = 'hidden'
-          }, 100)
-        })
-      } else {
-        let offsetStyle = { opacity: 1 }
-        if (state.offset) {
-          fixOffset(state.offset)
-
-          Object.assign(offsetStyle, state.offset)
-        }
-        $dom1.css(style)
-        setTimeout(() => {
-          document.body.style.overflow = 'hidden'
-          layerDom[$id][1].classList.add('shift')
-          setTimeout(_ => {
-            $dom1.css(offsetStyle)
-            if (vm && vm.$refs.input) {
-              vm.$refs.input.focus()
-            }
-            setTimeout(_ => {
-              try {
-                layerDom[$id][1].classList.remove('shift')
-              } catch (err) {}
-            }, 500)
-          }, 50)
-        }, 50)
-      }
-    }, 4)
-
-    // loading类型,回调需要自动触发
-    if (state.type > 3) {
-      //大于0自动触发超时关闭
-      if (state.timeout > 0) {
-        clearTimeout(this.timeout)
-        this.timeout = setTimeout(() => {
-          clearTimeout(this.timeout)
-          close($id)
-
-          // 为loading类型时,自动关闭同时触发回调
-          if (state.type === 6) {
-            this.vm.props.yes.call(this.vm, $id)
-          }
-        }, state.timeout)
-      } else if (state.type === 6) {
-        // loading类型, 非自动关闭时, 主动触发回调
-        this.vm.props.yes.call(this.vm, $id)
-      }
-    }
-  }
-}
-
-const _layer = {
-  alert(content, title, cb) {
-    let opt = { content, fixed: true }
-
-    if (typeof title === 'function') {
-      opt.yes = title
-    } else {
-      if (title) {
-        opt.title = title + ''
-      }
-      if (cb && typeof cb === 'function') {
-        opt.yes = cb
-      }
-    }
-    return _layer.open(opt)
-  },
-  confirm(content, title, yescb, nocb) {
-    let opt = { content, fixed: true, type: 2 }
-
-    if (typeof title === 'function') {
-      opt.yes = title
-      if (typeof yescb === 'function') {
-        opt.no = yescb
-      }
-    } else {
-      if (title) {
-        opt.title = title + ''
-      }
-      if (yescb && typeof yescb === 'function') {
-        opt.yes = yescb
-      }
-      if (nocb && typeof nocb === 'function') {
-        opt.no = nocb
-      }
-    }
-    return _layer.open(opt)
-  },
-  frame(url, extra = {}) {
-    let opt = {
-      content: `<iframe ref="frame" class="frame-box" src="${url}"></iframe>`,
-      menubar: false,
-      maskClose: true,
-      type: 4,
-      ...extra
-    }
-    return _layer.open(opt)
-  },
-  toast(txt, type = 'info', timeout = 2500) {
-    if (typeof type === 'number') {
-      timeout = type
-      type = 'info'
-    }
-    switch (type) {
-      case 'info':
-        break
-      case 'warn':
-        break
-      case 'error':
-        type = 'deny'
-        break
-      default:
-        type = 'info'
-    }
-
-    let opt = {
-      content: `
-      <mark class="toast-box style-${type}">
-        <i class="do-icon-${type}"></i>
-        ${txt}
-      </mark>`,
-      menubar: false,
-      mask: false,
-      type: 7,
-      shift: { top: 0 },
-      timeout,
-      offset: { top: 50 },
-      fixed: true,
-      toast: true // toast模式
-    }
-
-    return _layer.open(opt)
-  },
-  load(style, container, cb) {
-    style = style >>> 0
-    style = style < 1 ? 1 : style > 4 ? 4 : style
-
-    if (typeof container === 'function') {
-      cb = container
-      container = null
-    } else {
-      if (!(container instanceof HTMLElement)) {
-        container = null
-      }
-      if (typeof cb !== 'function') {
-        cb = Anot.noop
-      }
-    }
-    return _layer.open({
-      container,
-      type: 6,
-      load: style,
-      yes: cb,
-      menubar: false,
-      background: 'none',
-      fixed: true
-    })
-  },
-  tips(content, container, opt = {}) {
-    if (!(container instanceof HTMLElement)) {
-      return Anot.error(lang.NEED_CONTAINER)
-    }
-
-    if (!opt.background) {
-      opt.background = 'rgba(0,0,0,.5)'
-    }
-    if (!opt.color) {
-      opt.color = '#fff'
-    }
-    Object.assign(opt, {
-      container,
-      content,
-      type: 5,
-      fixed: true,
-      mask: false,
-      menubar: false,
-      timeout: 0
-    })
-    return _layer.open(opt)
-  },
-  prompt(title, yescb) {
-    if (typeof yescb !== 'function') {
-      return console.error(
-        'argument [callback] requires a function, but ' +
-          typeof yescb +
-          ' given'
-      )
-    }
-    let opt = {
-      type: 3,
-      prompt: '',
-      title,
-      content: `<input class="prompt-value" ref="input" :class="{alert: !prompt}" :duplex="prompt" />`,
-      fixed: true,
-      yes: yescb
-    }
-    return _layer.open(opt)
-  },
-  close: close,
-  open(opt) {
-    if (typeof opt === 'string') {
-      opt = 'layerwrap-' + opt
-      if (!layerObj[opt]) {
-        throw new Error(lang.ERROR)
-      } else {
-        //只能显示一个实例
-        if (layerObj[opt].show) {
-          return opt
-        }
-        layerObj[opt].show = true
-
-        layerObj[opt].parentElem.appendChild(layerDom[opt][0])
-        layerDom[opt][0]
-          .querySelector('.layer-content')
-          .appendChild(layerObj[opt].wrap)
-        layerObj[opt].wrap.style.display = ''
-
-        if (!Anot.vmodels[opt]) {
-          Anot(layerObj[opt].obj.init)
-        }
-        layerObj[opt].obj.show()
-        return opt
-      }
-    } else {
-      return new __layer__(opt).init.$id
-    }
-  },
-  version: Anot.ui.layer
-}
-
-Anot.directive('layer', {
   priority: 8090,
   init: function(binding) {
     // 去掉:layer属性,避免二次扫描
@@ -828,8 +142,6 @@ Anot.directive('layer', {
       })
     }
   }
-})
+}) */
 
-window.layer = _layer
+export default layer
-
-export default _layer