Vue组件开发系列之ActionButton组件

组件源码：
https://github.com/AntJavascript/widgetUI/tree/master/ActionButton

演示地址：
http://widget-ui.cn/ActionButton

微信截图_20190807204141.png

基本用法：

<template>
             <wt-actionButton>
               <wt-align>
                 <i class="icon-service"></i>
               </wt-align>
             </wt-actionButton>
             <wt-actionButton type='primary' right="3.5">
                <wt-align>
                  <i class="icon-edit"></i>
                </wt-align>
             </wt-actionButton>
             <wt-actionButton type='danger' right="6.5">
                <wt-align>
                  <i class="icon-up"></i>
                </wt-align>
             </wt-actionButton>
           </template>

组件结构：

<template>
    <div class='wt-actionButton' :class="className" :style="{zIndex: zIndex, bottom:bottom + 'rem', right:right + 'rem'}">
        <slot></slot>
    </div>
</template>

代码分析：

props参数：

props: {
    type: {
      type: String,
      default: () => {
        return '';
      }
    },
    zIndex: {
      type: String | Number,
      default: () => {
        return 100;
      }
    },
    bottom: {
      type: String | Number,
      default: () => {
        return 2.8;
      }
    },
    right: {
      type: String | Number,
      default: () => {
        return 0.5;
      }
    }
  }
**computed：**

computed: {
// 拼接class
className: function () {
return this.type;
}
}
css代码：

<style lang='less' rel='stylesheet/less' scoped>
    .wt-actionButton {
        position: fixed;
        width: 2.4rem;
        height: 2.4rem;
        border-radius: 2.2rem;
        background: #fff;
        box-sizing: border-box;
        &.primary {
            background: #1BB5F1;
            color:#fff;
            border: 0;
            &:active {
                background: #62c3e9;
            }
        }
        &.danger {
            background: #ef4f4f;
            color:#fff;
            border: 0;
            &:active {
                background: #ff6969;
            }
        }
    }
</style>

演示地址：
http://widget-ui.cn/ActionButton

组件源码：
https://github.com/AntJavascript/widgetUI/tree/master/ActionButton