先上效果圖

<v3-scroll>    捲軸內容區...</v3-scroll>

圖片預覽使用到了element-plus的Image元件。

<el-image hide-on-click-modal    src="/assets/img/placeholder/xxx.jpg"     :preview-src-list="previewList"/>

如下圖：使用了vue3+vuex實現登入驗證。

vue3註冊form表單

<form @submit.prevent="handleSubmit">    <ul class="clearfix">        <li class="flexbox flex-alignc"><input class="iptxt flex1" type="text" v-model="formObj.tel" placeholder="請輸入手機號" autocomplete="off" maxLength="11" /><em class="borLine"></em></li>        <li class="flexbox flex-alignc"><input class="iptxt flex1" type="password" v-model="formObj.pwd" placeholder="請輸入密碼" autocomplete="off" /><em class="borLine"></em></li>        <li class="flexbox flex-alignc"><input class="iptxt flex1" type="text" v-model="formObj.vcode" placeholder="驗證碼" autocomplete="off" /><em class="borLine"></em><button class="btn-getcode" @click.prevent="handleVcode" :disabled="disabled">{{vcodeText}}</button></li>    </ul>    <div class="btns"><button class="vui__btn vui__btn-primary btn__login" type="submit">註冊</button></div>    <div class="lgregLink align-c clearfix">        <router-link class="navigator" to="/login">已有賬號，去登入</router-link>    </div></form>

同樣的透過getCurrentInstance來獲取上下文，透過reactive來定義響應式資料。

<script>import { reactive, toRefs, inject, getCurrentInstance } from 'vue'export default {    setup() {        const { ctx } = getCurrentInstance()        const v3layer = inject('v3layer')        const utils = inject('utils')        const formObj = reactive({})        const data = reactive({            vcodeText: '獲取驗證碼',            disabled: false,            time: 0,        })        const VTips = (content) => {            v3layer({                content: content, layerStyle: 'background:#ff5151;color:#fff;', time: 2            })        }        const handleSubmit = () => {            if(!formObj.tel){                VTips('手機號不能為空！')            }else if(!utils.checkTel(formObj.tel)){                VTips('手機號格式不正確！')            }else if(!formObj.pwd){                VTips('密碼不能為空！')            }else if(!formObj.vcode){                VTips('驗證碼不能為空！')            }else{                ctx.$store.commit('SET_TOKEN', utils.setToken());                ctx.$store.commit('SET_USER', formObj.tel);                // ...            }        }        // 60s倒計時        const handleVcode = () => {            if(!formObj.tel) {                VTips('手機號不能為空！')            }else if(!utils.checkTel(formObj.tel)) {                VTips('手機號格式不正確！')            }else {                data.time = 60                data.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),            handleSubmit,            handleVcode        }    }}</script>

以上就實現了帶60s倒計時的表單驗證功能。

總體實現起來還是比較簡單的，只是vue3和vue2寫法有些不一樣而已。