多选框样式调整完成

components/en-checkbox/en-checkbox.vue

@@ -0,0 +1,172 @@
+<template>
+  <view class="box">
+    <view class="input-box">
+      <view class="input-box-left">
+        {{ label }}
+      </view>
+      <view class="input-box-right">
+          <checkbox-group @change="checkboxChange">
+            <label class="checkbox-item" v-for="(checkboxItem,index) in checkboxArr">
+              <checkbox  :id="name+index" :value="checkboxItem.id"  />
+              <text  class="iconfont icon-ok" v-if="checkboxItem.isChecked"> &#xe609;</text>
+              <text  class="iconfont icon-no" v-else> &#xe626;</text>
+              {{checkboxItem.name}}
+            </label>
+          </checkbox-group>
+      </view>
+    </view>
+    <view class="box-solid"></view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'en-checkbox',
+  props: {
+    type: {
+      type: String,
+      default: 'text'
+    },
+    label: {
+      type: String,
+      default: '标题'
+    },
+    checkboxData: {
+      type: Array,
+      default: []
+    },
+    checkboxKey:{
+      type:String,
+      default:'id'
+    },
+    checkboxValue:{
+      type:String,
+      default:'name'
+    },
+    disabled: {
+      default: false
+    },
+    name: {
+      type: String,
+      default: 'text'
+    },
+    valueType: {
+      default: '1'
+    },
+    value: {
+      default: []
+    }
+  },
+  data() {
+    return {
+      inputValue: [],
+      checkboxArr:[],
+    }
+  },
+  components: {},
+  mounted() {
+    this.setValue()
+    this.setCheckboxData()
+  },
+  watch: {
+    'value': function () {
+      if (this.inputValue !== this.value) {
+        this.setValue()
+      }
+    },
+    'inputValue': function () {
+      if(this.valueType==='1'){
+        this.$emit('input', this.inputValue.join(','))
+      }else {
+        this.$emit('input', this.inputValue)
+      }
+
+    }
+  },
+  methods: {
+    checkboxChange(e){
+      this.inputValue=e.detail.value
+      console.log(this.inputValue)
+      this.setIsCheckbox()
+    },
+    setCheckboxData(){
+      if(this.checkboxData.length<=0){
+        return ;
+      }
+      this.checkboxData.forEach((item)=>{
+        if(item[this.checkboxKey] && item[this.checkboxValue]){
+          this.checkboxArr.push({
+            'id':item[this.checkboxKey]+'',
+            'name':item[this.checkboxValue],
+            'isChecked':false,
+          })
+        }
+      })
+      this.setIsCheckbox()
+    },
+    setValue(){
+      let newValue=this.value
+      if(typeof newValue ==='string'){
+        newValue=newValue.split(',')
+      }
+      this.inputValue = []
+      newValue.forEach((item)=>{
+        this.inputValue.push(item+'')
+      })
+      this.setIsCheckbox()
+    },
+    setIsCheckbox(){
+      this.checkboxArr.forEach((item)=>{
+        item.isChecked=this.inputValue.indexOf(item.id) >= 0
+      })
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+  @font-face {
+    font-family: 'iconfont';
+    src: url('iconfont.ttf?t=1662432727120') format('truetype');
+  }
+  .iconfont {
+    font-family: "iconfont" !important;
+    font-size: 36rpx;
+    color: #3169FA;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  .box{
+    background-color: #ffffff;
+    padding: 34rpx 0 12rpx 0;
+    .input-box {
+      display: flex;
+      align-items: center;
+      .input-box-left {
+        width: 210rpx;
+        min-width: 210rpx;
+        font-size: 32rpx;
+        color: #333333;
+      }
+      .input-box-right{
+        display: flex;
+        align-items: center;
+        .checkbox-item{
+          padding-right: 20rpx;
+          margin-bottom: 20rpx;
+          checkbox{
+            display: none;
+          }
+        }
+      }
+
+    }
+    .box-solid{
+      border-bottom: 1px solid #F0F0F0;
+      margin-top:22rpx;
+    }
+  }
+
+</style>

components/en-input/en-input.vue

@@ -69,10 +69,9 @@ export default {
 
 <style lang="scss" scoped>
   .box{
-    height: 114rpx;
     background-color: #ffffff;
+    padding: 34rpx 0 12rpx 0;
     .input-box {
-      height: 98rpx;
       display: flex;
       align-items: center;
       .input-box-left {
@@ -83,8 +82,8 @@ export default {
     }
     .box-solid{
       border-bottom: 1px solid #F0F0F0;
-      margin-bottom:26rpx;
+      margin-top:22rpx;
     }
   }
 
-</style>
+</style>

components/en-send/en-send.vue

@@ -104,10 +104,9 @@ export default {
 
 <style lang="scss" scoped>
   .box{
-    height: 114rpx;
     background-color: #ffffff;
+    padding: 34rpx 0 12rpx 0;
     .input-box {
-      height: 98rpx;
       display: flex;
       align-items: center;
       font-size: 32rpx;
@@ -121,9 +120,9 @@ export default {
       }
     }
     .box-solid{
-      border-bottom: 1px solid #F0F0F0;
-      margin-bottom:26rpx;
+      border-bottom: 1rpx solid #F0F0F0;
+      margin-top:22rpx;
     }
   }
 
-</style>
+</style>

package-lock.json

@@ -2,11 +2,84 @@
   "requires": true,
   "lockfileVersion": 1,
   "dependencies": {
+    "@babel/parser": {
+      "version": "7.19.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.19.0.tgz",
+      "integrity": "sha512-74bEXKX2h+8rrfQUfsBfuZZHzsEs6Eql4pqy/T4Nn6Y9wNPggQOqD6z6pn5Bl8ZfysKouFZT/UXEH94ummEeQw==",
+      "dev": true
+    },
+    "@types/html5plus": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@types/html5plus/-/html5plus-1.0.2.tgz",
+      "integrity": "sha512-OklP5lrmLq8/6TUOLgWc0LndUVvAiTWX5dnyoCFhIUtFW9opWsnCtG/UxPgeuC28Rv2XNbFfft/hEEI39P/4Ag==",
+      "dev": true
+    },
+    "@types/uni-app": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/@types/uni-app/-/uni-app-1.4.4.tgz",
+      "integrity": "sha512-ZTXnrCTblZyoLIoKbTv1Whz1nxrTcM7vg0qGXzDpXP8m9MqdjKt48N3FffQT1IsJWNkxbvJ1Eg5UHDaq+k+oBQ==",
+      "dev": true,
+      "requires": {
+        "vue": "^2.6.8"
+      }
+    },
+    "@vue/compiler-sfc": {
+      "version": "2.7.10",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.10.tgz",
+      "integrity": "sha512-55Shns6WPxlYsz4WX7q9ZJBL77sKE1ZAYNYStLs6GbhIOMrNtjMvzcob6gu3cGlfpCR4bT7NXgyJ3tly2+Hx8Q==",
+      "dev": true,
+      "requires": {
+        "@babel/parser": "^7.18.4",
+        "postcss": "^8.4.14",
+        "source-map": "^0.6.1"
+      }
+    },
+    "csstype": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz",
+      "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==",
+      "dev": true
+    },
     "js-base64": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.2.tgz",
       "integrity": "sha512-NnRs6dsyqUXejqk/yv2aiXlAvOs56sLkX6nUdeaNezI5LFFLlsZjOThmwnrcwh5ZZRwZlCMnVAY3CvhIhoVEKQ=="
     },
+    "nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "dev": true
+    },
+    "picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "dev": true
+    },
+    "postcss": {
+      "version": "8.4.16",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
+      "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
+      "dev": true,
+      "requires": {
+        "nanoid": "^3.3.4",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      }
+    },
+    "source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true
+    },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true
+    },
     "uni-read-pages": {
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/uni-read-pages/-/uni-read-pages-1.0.5.tgz",
@@ -17,6 +90,16 @@
       "resolved": "https://registry.npmmirror.com/uni-simple-router/-/uni-simple-router-2.0.7.tgz",
       "integrity": "sha512-8FKv5dw7Eoonm0gkO8udprrxzin0fNUI0+AvIphFkFRH5ZmP5ZWJ2pvnWzb2NiiqQSECTSU5VSB7HhvOSwD5eA=="
     },
+    "vue": {
+      "version": "2.7.10",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.10.tgz",
+      "integrity": "sha512-HmFC70qarSHPXcKtW8U8fgIkF6JGvjEmDiVInTkKZP0gIlEPhlVlcJJLkdGIDiNkIeA2zJPQTWJUI4iWe+AVfg==",
+      "dev": true,
+      "requires": {
+        "@vue/compiler-sfc": "2.7.10",
+        "csstype": "^3.1.0"
+      }
+    },
     "vue-waterfall-easy": {
       "version": "2.4.4",
       "resolved": "https://registry.npmjs.org/vue-waterfall-easy/-/vue-waterfall-easy-2.4.4.tgz",

package.json

@@ -5,6 +5,8 @@
     "uni-simple-router": "^2.0.7"
   },
   "devDependencies": {
+    "@types/html5plus": "^1.0.2",
+    "@types/uni-app": "^1.4.4",
     "vue-waterfall-easy": "^2.4.4"
   }
 }

pages/index/index.vue

@@ -1,16 +1,21 @@
 <template>
 	<view class="box">
     <Nav title="首页"></Nav>
-    <enInput v-model="text" name="用户姓名"></enInput>
+    <enCheckbox v-model="type"  label="用户类型" :checkboxData="checkboxData"></enCheckbox>
+    <enInput v-model="text" label="用户姓名"></enInput>
     <enSend v-model="phone" ref="enSendObj" @getCode="getCode"></enSend>
+    <enInput v-model="text" label="用户姓名"></enInput>
 	</view>
+
 </template>
 <script>
 
   import enInput from "components/en-input/en-input"
   import enSend from "components/en-send/en-send"
+  import enCheckbox from "components/en-checkbox/en-checkbox"
 	export default {
 		components: {
+      enCheckbox,
       enInput,
       enSend
 		},
@@ -18,9 +23,15 @@
 			return {
         phone:'13900139001',
         text:'asdsa',
+        type:[],
+        // 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':'排球'}]
 			}
 		},
     watch:{
+      'type':function (){
+        console.log('new--------type',this.type)
+      },
 		  'phone':function (){
         console.log('new--------'+this.phone)
       },