其他分享
首页 > 其他分享> > vue3项目-小兔鲜儿笔记-商品详情页03和登录页01

vue3项目-小兔鲜儿笔记-商品详情页03和登录页01

作者：互联网

1.封装数量选择组件

功能分析：

  1. 默认值为1

  2. 可限制最大最小值

  3. 点击-就是减1，点击+就是加1

  4. 需要完成v-model的双向数据绑定

  5. 存在无label的情况

<script setup>
// 组件间的v-model =》父组件绑定:modelValue，监听@update:modelValue
import { useVModel } from '@vueuse/core'

const emit = defineEmits(['update:modelValue', 'change'])
const props = defineProps({
  modelValue: {
    type: Number,
    default: 1
  },
  min: {
    type: Number,
    default: 1
  },
  max: {
    type: Number,
    default: 100
  },
  label: {
    type: String,
    default: ''
  }
})

// 使用useVModel做数据的双向绑定，这样修改值就会自动通知父组件
// 参数1为props，参数2为从父组件接收的参数，参数3是要发送的自定义事件
const count = useVModel(props, 'modelValue', emit)

// 修改值函数
const changeNum = (step) => {
  const newVal = count.value + step
  if (newVal < props.min || newVal > props.max) return
  // 修改count值就会自动通知父组件count值修改
  count.value = newVal
  // 同时发出change通知
  emit('change', count.value)
}
</script>

 

2.封装按钮组件

目的：封装一个通用按钮组件，有大、中、小、超小4种尺寸，有默认、主要、次要、灰色四种类型

<template>
  <button class="xtx-button" :class="[size, type]">
    <slot />
  </button>
</template>

<script setup>
defineProps({
  size: {
    type: String,
    default: 'middle'
  },
  type: {
    type: String,
    default: 'default'
  }
})
</script>
.large {
  width: 240px;
  height: 50px;
  font-size: 16px;
}
.middle {
  width: 180px;
  height: 50px;
  font-size: 16px;
}
.small {
  width: 100px;
  height: 32px;
  font-size: 14px;
}
.mini {
  width: 60px;
  height: 32px;
  font-size: 14px;
}

.default {
  border-color: #e4e4e4;
  color: #666;
}
.primary {
  border-color: @xtxColor;
  background-color: @xtxColor;
  color: #fff;
}
.plain {
  border-color: @xtxColor;
  color: @xtxColor;
  background-color: lighten(@xtxColor, 50%);
}
.gray {
  border-color: #ccc;
  background-color: #ccc;
  color: #fff;
}

 

3. 登录-表单校验

  1. 定义校验规则

    utils/vee-validate.js

// 定义校验规则给vee-validate组件使用
export default {
  // 校验account
  account(value) {
    // value是将来使用该规则的表单元素的值
    // 1.必填
    // 2.6~20个字符，以字母开头
    // 返回true表示校验成功，其他情况均为失败，返回失败原因
    if (!value) return '请输入用户名'
    if (!/^[a-zA-Z]\w(5,19)$/.test(value)) {
      return '字母开头且6~20个字符'
    }
    return true
  },
  password(value) {
    if (!value) return '请输入密码'
    if (!/^\w(6,24)$/.test(value)) return '密码是6~24个字符'
    return true
  },
  mobile(value) {
    if (!value) return '请输入手机号码'
    if (!/^1[3-9]\d(9)$/.test(value)) return '手机号格式错误'
    return true
  },
  code(value) {
    if (!value) return '请输入验证码'
    if (!/^\d(6)$/.test(value)) return '验证码是6位数字'
    return true
  },
  isAgree(value) {
    if (!value) return '请勾选同意用户协议'
    return true
  }
}
  2. 使用vee-validate提供的Form组件，绑定validation-schema为上述自定义校验规则
        <Form
        ref="formCom"
        class="form"
        :validation-schema="mySchema"
        autocomplete="off"
        v-slot="{errors}"
    >
            ....
  3.  使用vee-validate提供的Field组件代替input表单元素，指定name属性为自定义校验规则中的某项，比如，自定义校验中：account(){...}，这里指定name就为account
                <Field
                :class="{error: errors.account}"
                v-model="form.account"
                name="account"
                type="text"
                placeholder="请输入用户名或手机号"
            />
                    ....
  4. Form组件内部使用了默认插槽，这个插槽会返回errors错误对象，用于提示错误信息，比如errors.account就是显示自定义校验中account未通过校验返回的错误信息
              <div class="error" v-if="errors.account">
            <i class="iconfont icon-warning"></i>
            {{ errors.account }}
          </div>
            ...
  5. 切换组价时调用重置表单的方法清除校验结果
    const formCom = ref(null) // Form表单的ref对象

// 表单数据
const form = reactive({
  isAgree: true,
  account: null,
  password: null,
  mobile: null,
  code: null
})
// 表单校验规则
const mySchema = {
  account: veeSchema.account,
  password: veeSchema.password,
  mobile: veeSchema.mobile,
  code: veeSchema.code,
  isAgree: veeSchema.isAgree
}

watch(isMsgLogin, () => {
  form.account = null
  form.code = null
  form.mobile = null
  form.isAgree = true
  form.password = null
  // formCom组件提供重置表单的方法resetForm()
  formCom.value.resetForm()
})
  6. 当点击登录时，提交表单，调用Form组件的ref对象提供的统一校验方法validate()
    // 统一校验，Form组件提供统一校验方法validate()
const login = async () => {
  const valid = await formCom.value.validate()
  if (valid) {
    // 账号登录
    if (!isMsgLogin.value) {
      try {
        const {result} = await userAccountLogin({account: form.account, password: form.password})
        const {id, avatar, nickname, account, mobile, token} = result
        // 1.获取用户信息并存储到userStore中
        userStore.setUser({
          id,
          avatar,
          nickname,
          account,
          mobile,
          token
        })
        // 2.消息提醒
        Message({type: 'success', text: '登录成功'})
        // 3.跳转
        await router.push(route.query.redirectUrl || '/')
      } catch (e) {
        Message({type: 'error', text: '登录失败'})
      }
    } else {
      // 手机号登录
      try {
        if (codeSpan.value.disabled) {
          const {result} = await userMobileLogin({mobile: form.mobile, code: form.code})
          const {id, avatar, nickname, account, mobile, token} = result
          // 1.获取用户信息并存储到userStore中
          userStore.setUser({
            id,
            avatar,
            nickname,
            account,
            mobile,
            token
          })
          // 2.消息提醒
          Message({type: 'success', text: '登录成功'})
          // 3.跳转
          await router.push(route.query.redirectUrl || '/')
        } else {
          throw Error('未发送验证码')
        }
      } catch (e) {
        Message({type: 'error', text: '登录失败'})
      }
    }
  }
}

标签：03,account,01,return,鲜儿,校验,value,组件,const
来源： https://www.cnblogs.com/jzhFlash/p/16663730.html