Add radio component

Author: leezng

src/assets/less/radio.less

@@ -0,0 +1,55 @@
+@import "./var.less";
+
+.@{css-prefix}-radio {
+  position: absolute;
+  left: -@selectabl-span;
+  color: #1f2d3d;
+  user-select: none;
+
+  &.is-checked .@{css-prefix}-radio__inner {
+    background-color: @color-primary;
+    border-color: darken(@color-primary, 10%);
+
+    &:after {
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+
+  .@{css-prefix}-radio__inner {
+    border: 1px solid @border-color;
+    border-radius: 100%;
+    width: 16px;
+    height: 16px;
+    vertical-align: middle;
+    background-color: #fff;
+    position: relative;
+    cursor: pointer;
+    display: inline-block;
+    box-sizing: border-box;
+                
+    &:after {
+      width: 4px;
+      height: 4px;
+      border-radius: 100%;
+      background-color: #fff;
+      content: "";
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%) scale(0);
+      transition: transform .15s ease-in;
+    }
+  }
+
+  .@{css-prefix}-radio__original {
+    opacity: 0;
+    outline: none;
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: 0;
+  }
+}

src/components/radio.vue

@@ -0,0 +1,50 @@
+<template>
+  <!-- click.stop 避免向上冒泡触发 tree.vue 的 click 事件-->
+  <label :class="[ 'vjs-radio', model === currentPath ? 'is-checked': '' ]" @click.stop>
+    <span class="vjs-radio__inner"></span>
+    <input
+      class="vjs-radio__original"
+      type="radio"
+      v-model="model"
+      :value="currentPath"
+      @change="test"
+      @focus="focus = true"
+      @blur="focus = false">
+  </label>
+</template>
+
+<script>
+  export default {
+    props: {
+      path: String,
+      value: {
+        type: String,
+        default: ''
+      }
+    },
+    data () {
+      return {
+        focus: false
+      }
+    },
+    computed: {
+      currentPath () {
+        return this.path
+      },
+
+      model: {
+        get () {
+          return this.value
+        },
+        set (val) {
+          this.$emit('input', val)
+        }
+      }
+    },
+    methods: {
+      test () {
+        this.$emit('change', this.model)
+      }
+    }
+  }
+</script>