美文网首页
Taro-vue表单模板

Taro-vue表单模板

作者: Wynter_Wang | 来源:发表于2021-07-06 14:59 被阅读0次

最近iOS客户端迭代放缓,被发配去做一些前端开发工作,后面会总结一些前端开发经验

框架:Taro
基于:Vue3.0

<template>
  <view class="">
    <view class="text-center mt-30" @tap="addImg">
      <image :src="require('@/images/avatar_unknown.png')" class="w-80 h-80 rounded-40" />
      <view class="text-12 text-blue">添加照片</view>
    </view>
    <view class="bg-white mt-20">
      <view v-for="(item, index) in dataList" :key="index" class="h-48 flex items-center px-12 van-hairline--bottom">
        <text class="w-70 text-dgray-900">{{ item.title }}</text>
        <view v-if="index == 4" class="flex items-center">
          <view
            v-for="(value, sexidx) in ['男', '女']"
            :key="sexidx"
            class="text-dgray-900 flex items-center mx-12"
            @tap="clickSex(sexidx)"
          >
            <image
              class="w-20 h-20 mr-4"
              :src="
                sexidx == sexIndex ? require('@/images/radio_selected.png') : require('@/images/radio_unselected.png')
              "
            />
            <text>{{ value }}</text>
          </view>
        </view>
        <input
          v-else
          v-model="item.value"
          :type="item.type"
          :placeholder="item.placeholder"
          :maxlength="item.maxlength"
          class="text-dgray-900 ml-12"
        />
      </view>
    </view>
    <view class="mx-12">
        <button
        type="primary"
        class="mt-20"
        block
        :disabled="!disabled"
        :loading="loading"
        loading-text="绑定中..."
        loading-type="spinner"
        @click="submitClick"
      >
        确认绑定
      </button>
    </view>
  </view>
</template>

<script>
  import Taro from '@tarojs/taro'
  export default {
    data() {
      return {
        loading: false,
        sexIndex: -1,
        dataList: [
          {
            title: '姓名',
            value: null,
            placeholder: '请填写您的真实姓名',
            type: 'text',
            maxlength: '5',
            regExp: /^[\u4e00-\u9fa5]+$/,
            errMsg: '请输入中文姓名',
          },
          {
            title: '身份证号',
            value: null,
            placeholder: '请填写您的身份证号',
            type: 'idcard',
            maxlength: '18',
            regExp: /^(\d{18,18}|\d{15,15}|\d{17,17}[x|X])$/,
            errMsg: '请输入15位或者18位身份证号',
          },
          {
            title: '手机号',
            value: null,
            placeholder: '请填写您的手机号',
            type: 'number',
            maxlength: '11',
            regExp: /^1\d{10}$/,
            errMsg: '请输入正确手机号',
          },
          {
            title: '年龄',
            value: null,
            placeholder: '请填写您的年龄',
            type: 'number',
            maxlength: '3',
            regExp: /^\d{1,3}$/,
            errMsg: '请输入1到3位整数',
          },
          {
            title: '性别',
            value: null,
            placeholder: '',
            type: 'check',
            maxlength: '1',
            regExp: /^\d{1}$/,
            errMsg: '请选择性别',
          },
        ],
      }
    },
    computed: {
      disabled() {
        let count = 0
        this.dataList.forEach((item) => {
          if (item.value) {
            count++
          }
        })
        if (count >= 4) {
          return true
        }
        return false
      },
    },
    methods: {
      addImg() {},
      clickSex(index) {
        this.sexIndex = index
        this.dataList[4].value = index
      },
      submitClick() {
        for (let index = 0; index < this.dataList.length; index++) {
          const item = this.dataList[index]
          if (!item.regExp.test(item.value)) {
            Taro.showToast({
              title: item.errMsg,
              duration: 2000,
              icon: 'none',
            })
            return
          }
        }
      },
    },
  }
</script>

效果:


image.png

使用时导入css样式即可 tailwindcss

相关文章

网友评论

      本文标题:Taro-vue表单模板

      本文链接:https://www.haomeiwen.com/subject/egsgultx.html