那时给我们撷取的是采用Vue3.0、Vuex同时实现配置文件校正和第三阶段操作方式。
嘿嘿上几段效用模拟吧。
这是新一代合作开发的两个Vue3留言板工程项目中采用到的登入及注册登记机能。
Vue3.0+Vant3留言板｜vue3仿QQApp闲聊示例
模拟中的顶部Snakbar提示信息，是如前所述vue3.0构筑的自订模块v3popup来同时实现。
前几日也有过一则撷取该文，我们钟爱不然，也能去看一看。
采用Vue3.x句法来同时实现配置文件的登入/注册登记及第三阶段机能。
vue3中采用form配置文件
<template> <div> <div class=“vui__scrollview vui__scrollview-lgreg flex1”> <div class=“nt__lgregPanel”> <div class=“lgreg-header”> <div class=“slogan”> <img class=“logo” src=“@assets/v3-logo.png” /> <p class=“text ff-st”>欢迎采用Vue3-Chatroom</p> </div> <div class=“forms”> <form @submit.prevent=“handleSubmit”> <div class=“item flexbox flex_alignc”> <input class=“iptxt flex1” type=“text” v-model=“formObj.tel” placeholder=“请输入手机号” maxlength=“11” /> </div> <div class=“item flexbox flex_alignc”> <input class=“iptxt flex1” type=“password” v-model=“formObj.pwd” placeholder=“请输入密码” /> </div> <div class=“item btns”> <button class=“vui__btn vui__btn-primary” type=“submit”>登入</button> </div> <div class=“item lgreg-lk”> <router-link class=“navigator” to=“#”>忘记密码</router-link> <router-link class=“navigator” to=“/register”>注册登记账号</router-link> </div> </form> </div> </div> </div> </div> </div> </template>通过getCurrentInstance获取上下文，可用来操作方式store或router。
通过reactive来声明两个响应式配置文件对象。
<script> import{ reactive, inject, getCurrentInstance }from vue export default { setup() { const { ctx } = getCurrentInstance() const v3popup = inject(v3popup) const utils = inject(utils) const formObj = reactive({}) const Snackbar = (content) =>{ v3popup({content: `<div style=text-align:left;>${content}</div>`, popupStyle: background:#ff4848;border-radius:1px;color:#fff;, position: bottom, time: 2 }) } const handleSubmit = () => { if(!formObj.tel){ Snackbar(手机号不能为空！) }else if(!utils.checkTel(formObj.tel)){ Snackbar(手机号格式不正确！) }else if(!formObj.pwd){ Snackbar(密码不能为空！) }else{ ctx.$store.commit(SET_TOKEN, utils.setToken()); ctx.$store.commit(SET_USER, formObj.tel); v3popup({ content:恭喜，登入成功！, time: 2, shadeClose: false, onEnd() { ctx.$router.push(/) } }) } }return { formObj, handleSubmit } } } </script>这样两个简单的登入配置文件校正就完成了。
vue3同时实现60s第三阶段
声明两个reactive响应式数据。
const data = reactive({ vcodeText: , disabled: false, time: 0, })配合setTimeout定时器来同时实现。
<template> <div> // … <div class=“item flexbox flex_alignc”> <input class=“iptxt flex1” type=“text” v-model=“formObj.vcode” placeholder=“校正码” /> <button class=“btn-getcode” @click.prevent=“handleVcode” :disabled=“disabled”>{{vcodeText}}</button> </div> </div> </template> <script> import{ reactive, toRefs, inject, getCurrentInstance }from vue export default { components: {}, setup() { // … const formObj = reactive({}) const data = reactive({ vcodeText: , disabled: false, time: 0, }) // 60s第三阶段 const handleVcode = () => { if(!formObj.tel) { Snackbar(手机号不能为空！) }else if(!utils.checkTel(formObj.tel)) { Snackbar(手机号格式不正确！) }else { data.time = 60data.disabled =true countDown() } } const countDown = () => { if(data.time > 0) { data.vcodeText =+ data.time +) data.time– setTimeout(countDown, 1000) }else{ data.vcodeText = data.time = 0 data.disabled = false } } return{ formObj, …toRefs(data), handleVcode,// … } } } </script>这样，如前所述vue3的带60s第三阶段机能的注册登记机能就简单同时实现了。
整体实践下来，发现vue3合作开发也很容易上手，而且句法越来越靠拢react了。
ok，那时就撷取到这里。后续还会撷取一些vue3示例合作开发，感谢我们的支持！
