组件源码

仅用学习使用，切勿用于生产环境，有问题，请自行解决

ActionButton/ActionButton.vue

@@ -0,0 +1,69 @@
+<template>
+    <div class='wt-actionButton' :class="className" :style="{zIndex: zIndex, bottom:bottom + 'rem', right:right + 'rem'}">
+        <slot></slot>
+    </div>
+</template>
+<script>
+export default {
+  name: 'wt-actionButton',
+  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: {
+    // 拼接class
+    className: function () {
+      return this.type;
+    }
+  },
+  methods: {}
+};
+</script>
+<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>

Align/Align.vue

@@ -0,0 +1,24 @@
+<template>
+    <div class='wt-align'>
+        <slot></slot>
+    </div>
+</template>
+<script>
+export default {
+  name: 'wt-align',
+  props: {},
+  data () {
+    return {
+    };
+  },
+  methods: {}
+};
+</script>
+<style lang='less' rel='stylesheet/less' scoped>
+.wt-align {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+</style>

BoxSize/BoxSize.vue

@@ -0,0 +1,34 @@
+<template>
+    <div class='wt-box-size' :style="{width: width + 'rem',height: height + 'rem'}">
+        <slot></slot>
+    </div>
+</template>
+<script>
+export default {
+  name: 'wt-boxSize',
+  props: {
+    width: {
+      type: String | Number,
+      default: () => {
+        return 0;
+      }
+    },
+    height: {
+      type: String | Number,
+      default: () => {
+        return 0;
+      }
+    }
+  },
+  data () {
+    return {
+    };
+  },
+  methods: {}
+};
+</script>
+<style lang='less' rel='stylesheet/less' scoped>
+  .wt-box-size {
+    overflow: hidden;
+  }
+</style>

Button/Button.vue

@@ -0,0 +1,99 @@
+<template>
+        <div class="wt-button" :class="className()">
+          <i :class="icon" v-if="icon"></i>
+          {{title}}
+          </div>
+</template>
+<script>
+export default {
+  name: 'wt-button',
+  props: {
+    title: {
+      type: String,
+      default: () => {
+        return 'button';
+      }
+    },
+    icon: {
+      type: String,
+      default: () => {
+        return '';
+      }
+    },
+    type: {
+      type: String,
+      default: () => {
+        return 'default';
+      }
+    },
+    size: {
+      type: String,
+      default: () => {
+        return 'normal';
+      }
+    }
+  },
+  data () {
+    return {};
+  },
+  methods: {
+    // 拼接class
+    className () {
+      return this.type + ' ' + this.size;
+    }
+  }
+};
+</script>
+<style lang="less" rel="stylesheet/less" scoped>
+.wt-button {
+        background: #fff;
+        color: #333;
+        border: 1px solid #eee;
+        text-align: center;
+        border-radius: 0.2rem;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        i {
+          margin: 0 0.2rem;
+        }
+        &:active {
+          background: #eee;
+        }
+        &.primary {
+            background: #1BB5F1;
+            color:#fff;
+            border: 0;
+            &:active {
+              background: #62c3e9;
+            }
+        }
+        &.danger {
+            background: #ef4f4f;
+            color:#fff;
+            border: 0;
+            &:active {
+              background: #ff6969;
+            }
+        }
+        &.normal {
+            height: 2rem;
+            line-height: 2rem;
+            font-size: 0.8rem;
+            width: 50%;
+        }
+        &.small {
+            height: 1.5rem;
+            line-height: 1.5rem;
+            font-size: 0.7rem;
+            width: 30%;
+        }
+        &.large {
+            height: 2.5rem;
+            line-height: 2.5rem;
+            font-size: 0.9rem;
+            width: 100%;
+        }
+}
+</style>