Add Button,CheckBox,Input,Label,Radio,Switch Components

hc-tec · Jun 3, 2020 · f3c311d · f3c311d
1 parent c3ef3e6
commit f3c311d
Show file tree

Hide file tree

Showing 14 changed files with 694 additions and 116 deletions.
diff --git a/public/index.html b/public/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
   </head>
   <body>
     <noscript>

diff --git a/src/App.vue b/src/App.vue
@@ -1,32 +1,17 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
+    <router-view />
   </div>
 </template>
 
 <style lang="scss">
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
+  background: #E4EBF5;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100vh;
+  height: 100vh;
 }
 </style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
diff --git a/src/components/neumorphic/button.vue b/src/components/neumorphic/button.vue
@@ -0,0 +1,76 @@
+<template>
+  <button
+    :class="neumorphicButtonClass"
+    :circle="circle"
+    @click="click">
+    <slot></slot>
+  </button>
+</template>
+<script lang='ts'>
+import { Component, Vue, Prop, Emit } from 'vue-property-decorator'
+
+@Component
+export default class NeumorphicBtn extends Vue {
+  @Prop({ type: Boolean, default: false }) private circle!: boolean;
+  neumorphicButtonClass: Record<string, boolean> = {
+    'neumorphic-btn': true,
+    'neumorphic-btn-circle': this.circle
+  }
+
+  @Emit('click')
+  click () {}
+}
+</script>
+<style lang="scss" scoped>
+:root {
+  --hue: 215;
+  --saturation: 46%;
+  --lightness: 93%;
+  --reach: 0.3rem;
+  --blur: 0.6rem;
+  --alpha: 0.8;
+  --dark: hsla(215, 46%, calc(93% - 15%), 0.8);
+  --light: hsla(215, 46%, calc(93% + 15%), 0.8);
+  --white: #FFFFFF;
+  --greyLight-1: #E4EBF5;
+  --greyLight-2: #c8d0e7;
+  --greyLight-3: #bec8e4;
+  --greyDark: #9baacf;
+  --shadow: 0.3rem 0.3rem 0.6rem hsla(215, 46%, calc(93% - 15%), 0.8), 
+            calc(-1 * 0.3rem) calc(-1 * 0.3rem) 0.6rem hsla(215, 46%, calc(93% + 15%), 0.8);
+  --inner-shadow: inset 0.3rem 0.3rem 0.6rem hsla(215, 46%, calc(93% - 15%), 0.8), 
+                  inset calc(-1 * 0.3rem) calc(-1 * 0.3rem) 0.6rem hsla(215, 46%, calc(93% + 15%), 0.8);
+  --primary-light: #8abdff;
+  --primary: #6d5dfc;
+  --primary-dark: #5b0eeb;
+}
+.neumorphic-btn {
+  border: none;
+  outline: none;
+  padding: 12px 40px;
+  letter-spacing: 0.1em;
+  color: #61677C;
+  text-shadow: 1px 1px 0 #FFF;
+  border-radius: 1rem;
+  background-color: transparent;
+  cursor: pointer;
+  box-shadow: 0.3rem 0.3rem 0.6rem hsla(215, 46%, calc(93% - 15%), 0.8),
+              calc(-1 * 0.3rem) calc(-1 * 0.3rem) 0.6rem hsla(215, 46%, calc(93% + 15%), 0.8);
+  transition: box-shadow .1s ease, color .3s ease;
+  &:hover {
+    color: #66ccff;
+  }
+  &:active {
+    box-shadow: inset 0.3rem 0.3rem 0.6rem hsla(215, 46%, calc(93% - 15%), 0.8),
+                inset calc(-1 * 0.3rem) calc(-1 * 0.3rem) 0.6rem hsla(215, 46%, calc(93% + 15%), 0.8);
+  }
+}
+
+.neumorphic-btn-circle {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  padding: 0;
+}
+
+</style>
diff --git a/src/components/neumorphic/checkbox.vue b/src/components/neumorphic/checkbox.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="neumorphic-checkbox-wrapper">
+    <div class="neumorphic-checkbox-content">
+      <span
+        :class="neumorphicCheckBoxClass">
+        <input 
+          ref="neumorphicCheckBox"
+          :class="neumorphicCheckBoxInputClass"
+          type="chechbox"
+          :value="value"
+          :name="label"
+          @click="change($event)"
+          :disabled="disabled">
+        <i class="fa fa-check-square"></i>
+      </span>
+    </div>
+    <neumorphic-label class="neumorphic-checkbox-slot">
+      <slot></slot>
+    </neumorphic-label>
+  </div>
+</template>
+<script lang='ts'>
+import { Component, Vue, Model, Ref, Prop, Watch } from 'vue-property-decorator'
+import neumorphicLabel from './label.vue'
+@Component({
+  components: {
+    'neumorphic-label': neumorphicLabel
+  }
+})
+export default class Checkbox extends Vue {
+
+  checked!: boolean;
+
+  @Prop()
+  label!: string | number;
+
+  @Prop({default: false})
+  disabled!: boolean;
+  
+  @Model('change', {type: String})
+  value!: string;
+
+  @Watch('value')
+  // 此监测函数主要是为了 兄弟组件间的双向数据绑定 
+  // 以防多个相同组件绑定到了同一个数据而导致数据更新不及时
+  watchValueChange(newValue: string | number, oldValue: string | number) {
+    this.checked = (newValue === (this.$refs.neumorphicCheckBox as HTMLInputElement).name);
+    this.neumorphicCheckBoxClass['neumorphic-checkbox-checked'] = this.checked;
+  }
+
+  change(event: any) {
+    this.checked = !this.checked;
+    // 强制 类 更新
+    this.neumorphicCheckBoxClass['neumorphic-checkbox-checked'] = this.checked;
+    if(this.checked){
+      this.$emit('change', event.target.value); 
+    }
+    else
+      this.$emit('change', '');
+  }
+
+  neumorphicCheckBoxClass: Record<string, boolean> = {
+    'neumorphic-checkbox': true,
+    'neumorphic-checkbox-checked': this.checked,
+    'neumorphic-checkbox-disabled': this.disabled
+  }
+
+  neumorphicCheckBoxInputClass: Record<string, boolean> = {
+    'neumorphic-checkbox-input': true,
+    'neumorphic-checkbox-input-disabled': this.disabled
+  }
+
+  mounted() {
+    this.checked = (this.value === (this.$refs.neumorphicCheckBox as HTMLInputElement).name);
+    this.neumorphicCheckBoxClass['neumorphic-checkbox-checked'] = this.checked;
+  }
+  
+}
+</script>
+<style scoped>
+.neumorphic-checkbox-wrapper {
+  display: inline-block;
+  margin-right: 30px;
+}
+.neumorphic-checkbox-content {
+  display: inline-block;
+}
+.neumorphic-checkbox {
+  box-shadow: 0.3rem 0.3rem 0.6rem hsla(215, 46%, calc(93% - 15%), 0.8), 
+              calc(-1 * 0.3rem) calc(-1 * 0.3rem) 0.6rem hsla(215, 46%, calc(93% + 15%), 0.8);
+  cursor: pointer;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: .3rem;
+  overflow: hidden;
+  padding: 6px;
+  font-size: 1rem;
+  font-weight: 700;
+  color: rgb(184, 189, 195);
+  transition: .3s ease;
+}
+.neumorphic-checkbox-input {
+  opacity: 0;
+  outline: none;
+  position: absolute;
+  width: inherit;
+  height: inherit;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: 0;
+  border: none;
+  cursor: pointer;
+}
+.neumorphic-checkbox-checked {
+  box-shadow: inset 0.3rem 0.3rem 0.6rem hsla(215, 46%, calc(93% - 15%), 0.8), 
+              inset calc(-1 * 0.3rem) calc(-1 * 0.3rem) 0.6rem hsla(215, 46%, calc(93% + 15%), 0.8);
+  color: #66ccff;
+}
+.neumorphic-checkbox-slot {
+  margin: 0;
+  margin-left: 10px;
+  display: inline-block;
+}
+.neumorphic-checkbox-input-disabled,
+.neumorphic-checkbox-disabled {
+  cursor: not-allowed;
+  color: #c7c7c7 !important;
+}
+</style>