@aochuang/common 1.0.0 → 1.0.1

package/components/button/button.vue

@@ -0,0 +1,537 @@
+<template>
+  <el-button
+    :type="type"
+    :disabled="disabled || innerLoading"
+    :size="size"
+    :circle="circle"
+    :native-type="nativeType"
+    class="ui-button"
+    :class="{'is-block': block, 'is-plain': plain, 'is-icon-btn': isIconBtn, 'is-link': link, 'is-active': active, 'has-text': hasText, 'has-icon': hasIcon}"
+    @click="handleClick"
+  >
+    <div class="ui-button__inner">
+      <ui-icon v-if="innerLoading" class="ui-button__icon ui-button__loading" name="loading"></ui-icon>
+      <span class="ui-button__icon" v-else-if="icon || $slots.icon">
+        <slot name="icon">
+          <ui-icon :name="icon"></ui-icon>
+        </slot>
+      </span>
+      <template v-if="$slots.default">
+        <span class="ui-button__text" v-if="innerLoading && loadingText">
+          {{loadingText}}
+        </span>
+        <span class="ui-button__text" :class="{'is-text-overflow': textOverflow}" v-else>
+          <slot></slot>
+        </span>
+      </template>
+    </div>
+  </el-button>
+</template>
+<script>
+import { Button } from 'element-ui'
+import UiIcon from '../icon'
+import 'element-ui/lib/theme-chalk/button.css'
+import { getClosestPopup } from './utils'
+
+export default {
+  name: 'UiButton',
+  inject: {
+    UiDialog: {
+      default: null
+    },
+    UiDrawer: {
+      default: null
+    },
+    UiToolbar: {
+      default: null
+    }
+  },
+  components: {
+    UiIcon,
+    ElButton: Button
+  },
+  props: {
+    block: {
+      type: Boolean,
+      default: false
+    },
+    link: {
+      type: Boolean,
+      default: false
+    },
+    active: {
+      type: Boolean,
+      default: false
+    },
+    plain: {
+      type: Boolean,
+      default: false
+    },
+    circle: {
+      type: Boolean,
+      default: false
+    },
+    textOverflow: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: 'small'
+    },
+    icon: {
+      type: String
+    },
+    type: {
+      type: String,
+      default: 'default'
+    },
+    nativeType: {
+      type: String,
+      default: 'button'
+    },
+    disabled: {
+      type: Boolean
+    },
+    loading: {
+      type: Boolean
+    },
+    loadingText: {
+      type: String
+    },
+    click: {
+      type: Function
+    }
+  },
+  data () {
+    return {
+      innerLoading: this.loading
+    }
+  },
+  computed: {
+    isIconBtn () {
+      return !this.$slots.default && this.icon
+    },
+    hasIcon () {
+      return this.$slots.icon || this.icon
+    },
+    hasText () {
+      return !!this.$slots.default
+    }
+  },
+  watch: {
+    loading (val) {
+      this.innerLoading = val
+    }
+  },
+  methods: {
+    closeDialog () {
+      if (this.$parent.$options.name === 'UiToolbarItem') {
+        const popup = getClosestPopup(this)
+        if (popup && this.UiToolbar && this.UiToolbar.closeDialog) {
+          popup.close()
+        }
+      }
+    },
+    handleClick (evt) {
+      if (this.innerLoading) {
+        return
+      }
+      clearTimeout(this._loadingTimer)
+      if (typeof this.click === 'function') {
+        const rs = this.click({
+          closeDialog: () => {
+            const popup = getClosestPopup(this)
+            if (popup) {
+              popup.close()
+            }
+          }
+        })
+        if (rs && rs.then) {
+          this.innerLoading = true
+          rs.then(() => {
+            this.closeDialog()
+            this._loadingTimer = setTimeout(() => {
+              this.innerLoading = false
+            }, 300)
+          }, err => {
+            this.innerLoading = false
+            throw new Error(err)
+          })
+        } else {
+          if (rs !== false) {
+            this.closeDialog()
+          }
+        }
+      } else {
+        this.closeDialog()
+      }
+      this.$emit('click', evt)
+    }
+  },
+  beforeDestroy () {
+    clearTimeout(this._loadingTimer)
+  }
+}
+</script>
+<style lang="less">
+@button-primary-color: #0052CC;
+@button-default-color: #f8f9fa;
+@button-danger-color: #f36d6f;
+@button-warning-color: #F1A600;
+@button-success-color: #10AA52;
+
+.ui-button.el-button{
+  cursor: pointer;
+  line-height: 18px;
+  box-sizing: border-box;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  &.is-block{
+    width: 100%;
+    box-sizing: border-box;
+  }
+  &.is-plain{
+    background-color: transparent;
+    border-color: transparent;
+  }
+  &.is-icon-btn{
+    min-width: auto;
+    padding: 0 9px;
+  }
+  &.has-text{
+    .ui-button__loading{
+      margin-right: 2px;
+    }
+  }
+  &.has-icon{
+    padding-left: 7px;
+  }
+  &.is-link {
+    height: auto;
+    .ui-button__inner{
+      > span{
+        &:not(.ui-button__icon) {
+          display: inline;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+  }
+}
+.ui-button__inner{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+  > span{
+    &:not(.ui-button__icon) {
+      max-width: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+.ui-button__icon{
+  display: inline-block;
+  vertical-align: top;
+  height: 18px;
+  line-height: 18px;
+  text-align: center;
+  & + .ui-button__text{
+    margin-left: 4px;
+  }
+}
+.ui-button__text{
+  line-height: 1em;
+  &.is-text-overflow {
+    display: inline-block !important;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+}
+.ui-button.el-button--mini{
+  font-size: 12px;
+  height: 26px;
+  line-height: 24px;
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-left: 8px;
+  padding-right: 8px;
+  &.is-plain{
+    min-width: auto;
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+
+  .ui-button__icon {
+    height: 16px;
+    vertical-align: top;
+    margin-top: -2px;
+    margin-right: -2px;
+  }
+}
+body .el-button--small{
+  font-size: 14px;
+  height: 32px;
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-left: 12px;
+  padding-right: 12px;
+  min-width: 60px;
+  &.is-plain, &.is-link{
+    min-width: auto;
+    padding-left: 6px;
+    padding-right: 6px;
+  }
+}
+body .el-button--medium{
+  height: 36px;
+  padding-top: 0;
+  padding-bottom: 0;
+  &.is-plain{
+    min-width: auto;
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+}
+.ui-button.el-button{
+  transition: all .15s ease-in-out;
+  font-weight: normal;
+  &.el-button--text{
+    color: #333;
+    min-width: auto;
+  }
+  &.el-button--primary{
+    &.is-plain{
+      color: @button-primary-color;
+      background-color: transparent;
+      border-color: transparent;
+      &:hover{
+        color: darken(@button-primary-color, 5%);
+        background-color: transparent;
+        border-color: transparent;
+      }
+      &.is-disabled{
+        color: @button-primary-color;
+        opacity: .5;
+      }
+    }
+    &.is-link {
+      color: @button-primary-color;
+      padding-left: 1px;
+      padding-right: 1px;
+      background-color: transparent;
+    }
+    &:not(.is-plain) {
+      &:not(.is-link) {
+        background-color: @button-primary-color;
+        border-color: @button-primary-color;
+        &:hover{
+          background-color: darken(@button-primary-color, 5%);
+          border-color: darken(@button-primary-color, 5%);
+        }
+        &:focus:not(.is-disabled){
+          border-color: @button-primary-color;
+          box-shadow: 0 0 0 0.2rem fade(@button-primary-color, 25%);
+        }
+        &.is-disabled{
+          background-color: @button-primary-color;
+          border-color: @button-primary-color;
+          opacity: .4;
+        }
+      }
+    }
+  }
+  &.el-button--danger{
+    &.is-plain{
+      color: @button-danger-color;
+      background-color: transparent;
+      border-color: transparent;
+      &:hover{
+        color: darken(@button-danger-color, 5%);
+        background-color: transparent;
+        border-color: transparent;
+      }
+    }
+    &.is-link {
+      color: @button-danger-color;
+      padding-left: 1px;
+      padding-right: 1px;
+      background-color: transparent;
+    }
+    &:not(.is-plain) {
+      &:not(.is-link) {
+        background-color: @button-danger-color;
+        border-color: @button-danger-color;
+        &:hover{
+          background-color: darken(@button-danger-color, 5%);
+          border-color: darken(@button-danger-color, 5%);
+        }
+        &:focus:not(.is-disabled){
+          border-color: @button-danger-color;
+          box-shadow: 0 0 0 0.2rem fade(@button-danger-color, 25%);
+        }
+        &.is-disabled{
+          background-color: @button-danger-color;
+          border-color: @button-danger-color;
+          opacity: .4;
+        }
+      }
+    }
+  }
+  &.el-button--warning{
+    &.is-plain{
+      color: @button-warning-color;
+      background-color: transparent;
+      border-color: transparent;
+      &:hover{
+        color: darken(@button-warning-color, 5%);
+        background-color: transparent;
+        border-color: transparent;
+      }
+    }
+    &.is-link {
+      color: @button-warning-color;
+      padding-left: 1px;
+      padding-right: 1px;
+      background-color: transparent;
+    }
+    &:not(.is-plain) {
+      &:not(.is-link) {
+        background-color: @button-warning-color;
+        border-color: @button-warning-color;
+        &:hover{
+          background-color: darken(@button-warning-color, 5%);
+          border-color: darken(@button-warning-color, 5%);
+        }
+        &:focus:not(.is-disabled){
+          border-color: @button-warning-color;
+          box-shadow: 0 0 0 0.2rem fade(@button-warning-color, 25%);
+        }
+        &.is-disabled{
+          background-color: @button-warning-color;
+          border-color: @button-warning-color;
+          opacity: .4;
+        }
+      }
+    }
+  }
+  &.el-button--success{
+    &.is-plain{
+      color: @button-success-color;
+      background-color: transparent;
+      border-color: transparent;
+      &:hover{
+        color: darken(@button-success-color, 5%);
+        background-color: transparent;
+        border-color: transparent;
+      }
+    }
+    &.is-link {
+      color: @button-warning-color;
+      padding-left: 1px;
+      padding-right: 1px;
+      background-color: transparent;
+    }
+    &:not(.is-plain) {
+      &:not(.is-link) {
+        background-color: @button-success-color;
+        border-color: @button-success-color;
+        &:hover{
+          background-color: darken(@button-success-color, 5%);
+          border-color: darken(@button-success-color, 5%);
+        }
+        &:focus:not(.is-disabled){
+          border-color: @button-success-color;
+          box-shadow: 0 0 0 0.2rem fade(@button-success-color, 25%);
+        }
+        &.is-disabled{
+          background-color: @button-success-color;
+          border-color: @button-success-color;
+          opacity: .4;
+        }
+      }
+    }
+  }
+  &.el-button--default {
+    &.is-plain{
+      &:not(.is-disabled){
+        &:hover{
+          color: #404040;
+          background-color: rgba(0,0,0,.1);
+          border-color: transparent;
+        }
+        &:focus{
+          background-color: rgba(0,0,0,.1);
+          border-color: transparent;
+          color: #404040;
+        }
+      }
+      &.is-disabled{
+        color: #c0c4cc;
+        border-color: transparent;
+        background-color: transparent;
+      }
+    }
+    &.is-link {
+      color: @button-primary-color;
+      padding-left: 1px;
+      padding-right: 1px;
+      background-color: transparent;
+    }
+    &:not(.is-plain) {
+      &:not(.is-link) {
+        &:hover{
+          &:not(.is-disabled){
+            color: @button-primary-color;
+            border-color: @button-primary-color;
+            background-color: transparent;
+          }
+        }
+        &:focus{
+          color: @button-primary-color;
+          background-color: transparent;
+          border-color: @button-primary-color;
+          box-shadow: 0 0 0 0.2rem rgba(26, 162, 232,.25);
+        }
+        &.is-disabled{
+          color: #c0c4cc;
+          border-color: #ebeef5;
+        }
+      }
+    }
+  }
+
+  &.el-button--link {
+    border-color: transparent;
+    background-color: transparent;
+    display: inline;
+    padding-left: 0;
+    padding-right: 0;
+    min-width: 0;
+    height: auto;
+    line-height: inherit;
+    color: #0052cc;
+    vertical-align: baseline;
+    &:hover,&:focus{
+      border-color: transparent;
+    }
+    &.is-disabled{
+      color: #C0C4CC;
+      border-color: transparent;
+      background-color: transparent;
+    }
+  }
+}
+
+</style>

package/components/button/index.js

@@ -0,0 +1,7 @@
+import Button from './button.vue'
+
+Button.install = (Vue) => {
+  Vue.component(Button.name, Button)
+}
+
+export default Button

package/components/button/utils.js

@@ -0,0 +1,20 @@
+/**
+ * 获取最近的一个弹框组件
+ * 包括对话框的测滑
+*/
+export function getClosestPopup (vm) {
+  if (!vm) {
+    return
+  }
+  const popups = ['UiDialog', 'UiDrawer']
+  let popup
+  let target = vm
+  while (!popup && target) {
+    if (target && popups.includes(target.$options.name)) {
+      popup = target
+    } else {
+      target = target.$parent
+    }
+  }
+  return popup
+}