wcui/src/form/button.wc

<template>
  <button>
    <wc-icon class="icon"></wc-icon>
    <slot></slot>
  </button>
</template>

<style lang="scss">
:host {
  overflow: hidden;
  display: inline-block;
  min-width: 64px;
  height: 32px;
  user-select: none;
  -moz-user-select: none;
  color: nth($cd, 2);
  font-size: 14px;
  cursor: pointer;

  button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: inherit;
    padding: 0 5px;
    margin: auto;
    border: 1px solid nth($cp, 3);
    border-radius: 4px;
    white-space: nowrap;
    background: #fff;
    font-size: inherit;
    outline: none;
    color: inherit;
    cursor: inherit;

    &:hover {
      background: nth($cp, 1);
    }

    &:active {
      border-color: nth($cgr, 1);
    }
  }

  .icon {
    --size: 18px;
    margin-right: 3px;
  }
}

:host([round]) button {
  border-radius: 21px;
}
:host([circle]) {
  min-width: 32px;
  button {
    padding: 0;
    border-radius: 50%;
  }
  .icon {
    margin-right: 0;
  }
}

:host([size='large']) {
  min-width: 120px;
  height: 42px;
  font-size: 16px;

  .icon {
    --size: 20px;
  }
}
:host([size='large'][circle]) {
  min-width: 42px;
}
:host([size='medium']) {
  min-width: 90px;
  height: 36px;
}
:host([size='medium'][circle]) {
  min-width: 36px;
}
:host([size='mini']) {
  min-width: 24px;
  height: 24px;
  font-size: 12px;

  .icon {
    --size: 14px;
  }
}

:host([loading]),
:host([disabled]) {
  cursor: not-allowed;
  color: nth($cgr, 1);
  opacity: 0.6;

  .icon {
    color: nth($cgr, 1);
  }
  button {
    background: #fff;
  }
}

:host([color]) {
  color: #fff;
  button {
    border-color: transparent;
  }
  .icon {
    color: #fff;
  }
}

:host([color='red']) button {
  background: nth($cr, 2);
  &:hover {
    background: nth($cr, 1);
  }
  &:active {
    background: nth($cr, 3);
  }
}
:host([color='red'][loading]) button,
:host([color='red'][disabled]) button {
  background: nth($cr, 1);
}

:host([color='blue']) button {
  background: nth($cb, 2);
  &:hover {
    background: nth($cb, 1);
  }
  &:active {
    background: nth($cb, 3);
  }
}
:host([color='blue'][loading]) button,
:host([color='blue'][disabled]) button {
  background: nth($cb, 1);
}

:host([color='green']) button {
  background: nth($cg, 2);
  &:hover {
    background: nth($cg, 1);
  }
  &:active {
    background: nth($cg, 3);
  }
}
:host([color='green'][loading]) button,
:host([color='green'][disabled]) button {
  background: nth($cg, 1);
}

:host([color='teal']) button {
  background: nth($ct, 2);
  &:hover {
    background: nth($ct, 1);
  }
  &:active {
    background: nth($ct, 3);
  }
}
:host([color='teal'][loading]) button,
:host([color='teal'][disabled]) button {
  background: nth($ct, 1);
}

:host([color='orange']) button {
  background: nth($co, 2);
  &:hover {
    background: nth($co, 1);
  }
  &:active {
    background: nth($co, 3);
  }
}
:host([color='orange'][loading]) button,
:host([color='orange'][disabled]) button {
  background: nth($co, 1);
}

:host([color='dark']) button {
  background: nth($cd, 2);
  &:hover {
    background: nth($cd, 1);
  }
  &:active {
    background: nth($cd, 3);
  }
}
:host([color='dark'][loading]) button,
:host([color='dark'][disabled]) button {
  background: nth($cd, 1);
}

:host([color='purple']) button {
  background: nth($cpp, 2);
  &:hover {
    background: nth($cpp, 1);
  }
  &:active {
    background: nth($cpp, 3);
  }
}
:host([color='purple'][loading]) button,
:host([color='purple'][disabled]) button {
  background: nth($cpp, 1);
}

:host([color='grey']) button {
  background: nth($cgr, 2);
  &:hover {
    background: nth($cgr, 1);
  }
  &:active {
    background: nth($cgr, 3);
  }
}
:host([color='grey'][loading]) button,
:host([color='grey'][disabled]) button {
  background: nth($cgr, 1);
}
</style>

<script>
import '../icon/index'
const IS_FIREFOX = !!window.sidebar

export default class Button {
  props = {
    icon: '',
    autofocus: '',
    loading: false,
    disabled: false
  }

  constructor() {
    /* render */

    // 圆形按钮不允许文字
    if (this.hasAttribute('circle')) {
      this.textContent = ''
    }

    this.__BTN__ = this.root.children[1]
    this.__ICO__ = this.__BTN__.children[0]
  }

  get loading() {
    return this.props.loading
  }

  set loading(val) {
    var type = typeof val

    if (val === this.props.loading) {
      return
    }

    if ((type === 'boolean' && val) || type !== 'boolean') {
      this.props.loading = true
      this.__ICO__.setAttribute('is', 'loading')
      this.setAttribute('loading', '')
    } else {
      this.props.loading = false
      this.__ICO__.setAttribute('is', this.props.icon)
      this.removeAttribute('loading')
    }
  }

  get disabled() {
    return this.props.disabled
  }

  set disabled(val) {
    var type = typeof val

    if (val === this.props.disabled) {
      return
    }
    if ((type === 'boolean' && val) || type !== 'boolean') {
      this.props.disabled = true
      this.setAttribute('disabled', '')
    } else {
      this.props.disabled = false
      this.removeAttribute('disabled')
    }
  }

  mounted() {
    this._handleClick = ev => {
      if (this.props.loading || this.props.disabled) {
        // 阻止事件冒泡, 避免用户自己绑定click事件不受这2个值的限制
        ev.stopPropagation()
        return
      }
      this.dispatchEvent(new CustomEvent('active'))
    }
    this.__BTN__.addEventListener('click', this._handleClick, false)
  }

  unmount() {
    this.__BTN__.removeEventListener('click', this._handleClick)
  }

  watch(name, old, val) {
    if (old === val) {
      return
    }
    switch (name) {
      case 'icon':
        this.props.icon = val
        if (val) {
          if (!this.props.loading) {
            this.__ICO__.setAttribute('is', val)
          }
        } else {
          this.removeAttribute('icon')
          this.__ICO__.removeAttribute('is')
        }
        break

      case 'autofocus':
        this.__BTN__.setAttribute('autofocus', '')
        // 辣鸡火狐, 要触发一下focus, 才能聚焦
        if (IS_FIREFOX) {
          setTimeout(_ => {
            this.__BTN__.focus()
          }, 10)
        }
        break

      case 'loading':
      case 'disabled':
        if (val === '') {
          this[name] = true
        }
        break
    }
  }
}
</script>