开关组件及标题对接

components/en-checkbox/en-checkbox.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="box">
     <view class="input-box">
-      <view class="input-box-left">
+      <view class="input-box-left" :style="{'letter-spacing':labelWidth}">
         {{ label }}
       </view>
       <view class="input-box-right">
@@ -60,12 +60,14 @@ export default {
     return {
       inputValue: [],
       checkboxArr:[],
+      labelWidth:0
     }
   },
   components: {},
   mounted() {
     this.setValue()
     this.setCheckboxData()
+    this.setLabelWidth()
   },
   watch: {
     'value': function () {
@@ -118,6 +120,14 @@ export default {
       this.checkboxArr.forEach((item)=>{
         item.isChecked=this.inputValue.indexOf(item.id) >= 0
       })
+    },
+    setLabelWidth(){
+      let differenceNum=4- this.label.length;
+      if(differenceNum===2){
+        this.labelWidth='2em'
+      }else if(differenceNum===1){
+        this.labelWidth='0.5em'
+      }
     }
   }
 

components/en-input/en-input.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="box">
     <view class="input-box">
-      <view class="input-box-left">
+      <view class="input-box-left" :style="{'letter-spacing':labelWidth}">
         {{ label }}
       </view>
       <input
@@ -44,12 +44,14 @@ export default {
   },
   data() {
     return {
-      inputValue: ''
+      inputValue: '',
+      labelWidth:0
     }
   },
   components: {},
   mounted() {
     this.inputValue = this.value
+    this.setLabelWidth()
   },
   watch: {
     'value': function () {
@@ -61,7 +63,16 @@ export default {
       this.$emit('input', this.inputValue)
     }
   },
-  methods: {}
+  methods: {
+  setLabelWidth(){
+    let differenceNum=4- this.label.length;
+    if(differenceNum===2){
+      this.labelWidth='2em'
+    }else if(differenceNum===1){
+      this.labelWidth='0.5em'
+    }
+  }
+  }
 
 }
 </script>

components/en-radio/en-radio.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="box">
     <view class="input-box">
-      <view class="input-box-left">
+      <view class="input-box-left" :style="{'letter-spacing':labelWidth}">
         {{ label }}
       </view>
       <view class="input-box-right">
@@ -57,12 +57,14 @@ export default {
     return {
       inputValue: [],
       radioArr:[],
+      labelWidth:0
     }
   },
   components: {},
   mounted() {
     this.setValue()
     this.setRadioData()
+    this.setLabelWidth()
   },
   watch: {
     'value': function () {
@@ -94,6 +96,14 @@ export default {
     },
     setValue(){
       this.inputValue = this.value
+    },
+    setLabelWidth(){
+      let differenceNum=4- this.label.length;
+      if(differenceNum===2){
+        this.labelWidth='2em'
+      }else if(differenceNum===1){
+        this.labelWidth='0.5em'
+      }
     }
   }
 

components/en-send/en-send.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="box">
     <view class="input-box">
-      <view class="input-box-left">
+      <view class="input-box-left" :style="{'letter-spacing':labelWidth}">
         {{ label }}
       </view>
       <input
@@ -56,13 +56,14 @@ export default {
     return {
       inputValue: '',
       timer: '',
-      timeNum:0
+      timeNum:0,
+      labelWidth:0
     }
   },
   components: {},
   mounted() {
     this.inputValue = this.value
-
+    this.setLabelWidth()
   },
   watch: {
     'value': function () {
@@ -95,6 +96,14 @@ export default {
           clearInterval(this.timer);
         }
       }, 1000);
+    },
+    setLabelWidth(){
+      let differenceNum=4- this.label.length;
+      if(differenceNum===2){
+        this.labelWidth='2em'
+      }else if(differenceNum===1){
+        this.labelWidth='0.5em'
+      }
     }
   }
 

components/en-switch/en-switch.vue

@@ -0,0 +1,93 @@
+<template>
+  <view class="box">
+    <view class="input-box">
+      <view class="input-box-left" :style="{'letter-spacing':labelWidth}">
+        {{ label }}
+      </view>
+      <switch  color="#3169FA" style="transform:scale(0.7)" :checked="inputValue" @change="switchChange" />
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'en-switch',
+  props: {
+    type: {
+      type: String,
+      default: 'text'
+    },
+    label: {
+      type: String,
+      default: '状态'
+    },
+    value: {
+      default: ''
+    },
+    trueValue: {
+      default: 1
+    },
+    falseValue: {
+      default: '0'
+    }
+  },
+  data() {
+    return {
+      inputValue: false,
+      labelWidth:0
+    }
+  },
+  components: {},
+  mounted() {
+    this.inputValue = this.value
+    this.setLabelWidth()
+
+  },
+  watch: {
+    'value': function () {
+      this.inputValue = this.value
+    }
+  },
+  methods: {
+    setValue(){
+      this.inputValue =this.value===this.trueValue
+    },
+    switchChange(e){
+        if(e.detail.value){
+          this.$emit('input', this.trueValue)
+        }else {
+          this.$emit('input', this.falseValue)
+        }
+    },
+    setLabelWidth(){
+      let differenceNum=4- this.label.length;
+      if(differenceNum===2){
+        this.labelWidth='2em'
+      }else if(differenceNum===1){
+        this.labelWidth='0.5em'
+      }
+    }
+
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+@import url("../static/css/en-common.css");
+  .box{
+    padding: 26rpx 0 24rpx 0;
+    .input-box {
+      display: flex;
+      align-items: center;
+      font-size: 32rpx;
+      .input-box-left {
+        color: #333333;
+        width: 210rpx;
+        //letter-spacing:1em;
+      }
+
+    }
+  }
+
+</style>

pages/index/index.vue

@@ -2,10 +2,11 @@
 	<view class="box-data">
     <Nav title="首页"></Nav>
     <view class="border-item"></view>
-    <enInput v-model="text" label="用户姓名"></enInput>
+    <enInput v-model="text" label="姓名"></enInput>
     <enSend v-model="phone" ref="enSendObj" @getCode="getCode"></enSend>
-    <enCheckbox v-model="type"  label="用户爱好" :checkboxData="checkboxData"></enCheckbox>
-    <enRadio v-model="sex"  label="用户性别" :radioData="radioData"></enRadio>
+    <enCheckbox v-model="type"  label="爱好" :checkboxData="checkboxData"></enCheckbox>
+    <enRadio v-model="sex"  label="性别" :radioData="radioData"></enRadio>
+    <enSwitch v-model="status"  label="状态" ></enSwitch>
 	</view>
 
 </template>
@@ -15,8 +16,10 @@
   import enSend from "components/en-send/en-send"
   import enCheckbox from "components/en-checkbox/en-checkbox"
   import enRadio from "components/en-radio/en-radio"
+  import enSwitch from "components/en-switch/en-switch"
 	export default {
 		components: {
+      enSwitch,
       enRadio,
       enCheckbox,
       enInput,
@@ -25,9 +28,10 @@
 		data() {
 			return {
         phone:'13900139001',
-        text:'asdsa',
-        type:[],
+        text:'来自火星的你',
+        type:['1'],
         sex:'1',
+        status:1,
         // checkboxData:[{'id':'1','name':'足球'},{'id':'2','name':'篮球'},{'id':'3','name':'排球'},{'id':'4','name':'羽毛球'},{'id':'5','name':'乒乓球'},{'id':'6','name':'铅球'},{'id':'7','name':'棒球'},{'id':'8','name':'冰球'},{'id':'9','name':'网球'},{'id':'10','name':'乒乓球'}]
         checkboxData:[{'id':'1','name':'足球'},{'id':'2','name':'篮球'},{'id':'3','name':'排球'}],
         radioData:[{'id':'1','name':'男'},{'id':'2','name':'女'}]
@@ -42,6 +46,9 @@
       },
       'text':function (){
         console.log('new--------'+this.text)
+      },
+      'status':function (){
+        console.log('new--------'+this.status)
       }
 
     },