element

您所在的位置：网站首页 › html注册表单登录短信和验证码登录 › element

element

2024-07-10 19:11| 来源: 网络整理| 查看: 265

文章目录前言一、实现方法1.创建 PhoneLogin 组件2.全局注册组件3.使用组件二、组件效果总结

前言

在开发 vue 项目时，我们都可能用到 element-ui，但是有时 element-ui 提供的组件太简单或不满足应用的需求，因此我们需要在其基础上再对组件进行封装。

一、实现方法

需先在项目中安装 element-ui：Vue项目使用element-ui

1.创建 PhoneLogin 组件

在 components 文件夹创建 phoneLogin 文件夹，然后在 accountLogin 文件夹中再创建PhoneLogin.vue 。

PhoneLogin.vue 代码如下：

{{btnText}} 登录 export default { name: 'PhoneLogin', components: {}, props:{ ruleForm: { type: Object, require: true }, countDown: { type: Number, default: 60 } }, data(){ let checkPhone = (rule, value, callback) =>{ if(!value){ return callback(new Error('手机号不能为空')) }else{ let reg = /^1[3|4|5|7|8][0-9]\d{8}$/ if(reg.test(value)){ callback() }else{ return callback(new Error('请输入正确的手机号')) } } } return{ rules: { phone: [ {validator: checkPhone, trigger: 'change'} ], code: [ {required: true, message: '验证码不能为空', trigger: 'blur'} ] }, disabled: false, btnText: '发送验证码' } }, methods:{ phoneLogin(){ this.$refs.ruleForm.validate((valid) => { if(valid){ this.$emit('submit') }else{ this.$emit('errHandle') } }) }, sendCode(){ this.$refs.ruleForm.validateField('phone', errorMessage =>{ if(errorMessage){ this.$message.error(errorMessage) }else{ // 1.时间开始倒数 // 2.按钮进入禁用状态 // 3.如果倒计时结束按钮恢复可用状态按钮文字变为重新发送, 时间重置 // 4.倒计时的过程中按钮文字为多少s后重新发送 let timer = setInterval(()=>{ this.time --; this.btnText = `${this.time}s后重新发送` this.disabled = true if(this.time === 0){ this.disabled = false; this.btnText = '重新发送'; this.time = this.countDown clearInterval(timer) } }, 1000) this.$emit('send') } }) } }, mounted(){ this.time = this.countDown } } 2.全局注册组件

在项目根目录下创建 globalComponents 文件夹，在其下新建 index.js，用于注册全局组件

index.js 代码如下：

//注册全局组件 import Vue from "vue" import PhoneLogin from "../components/phoneLogin/PhoneLogin" //引入 Vue.component('phoneLogin', PhoneLogin) //注册 3.使用组件

1.在 views 文件夹下一个视图：Login.vue ，使用组件 Login.vue 代码如下：

短信验证码登录组件 import PhoneLogin from '../components/phoneLogin/PhoneLogin.vue' export default { name: 'Login', components: { PhoneLogin}, props:{}, data(){ return{ phoneForm: { phone: '', code: '' } } }, methods:{ submit(){ this.$message.success('提交成功') console.log("成功") }, errHandle(){ this.$message.error('表单填写有误，请检查') console.log("失败") }, send(){ this.$message.info('发送验证码成功') } }, mounted(){ } } .login{ margin-top: 30px; margin-left: 30px; } .account{ width: 500px; }

2.配置页面路由 router 中的 index.js 代码如下：

import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/login', name: 'login', component: () => import('../views/Login') } ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router

3.在Home.vue 实现一个页面跳转按钮 Home.vue 代码如下：

去往登录页面 // @ is an alias to /src export default { name: 'Home', components: { }, methods:{ goTo(path){ //路由跳转 this.$router.push(path) } } }

在这里插入图片描述