コードテンプレート - フロントエンド Vue が「Remember me」チェックボックス機能を実現します

依存関係を導入する

vue-cookies、element-plus の依存関係を導入し、ElementPlus が src/main.js で使用されていることを確認する必要があります。これについては、前のチュートリアルで説明しています。

ログインコンポーネントにhtmlを記述して、私を覚えておいてください

要素とスタイルを使用する

<el-form :model="formData" label-width="90px">
    <!--...-->
    <el-form-item>
        <el-checkbox v-model="formData.rememberMe" :true-label="true">记住我</el-checkbox>
    </el-form-item>
</el-form>

ログインコンポーネントにjsを記述して、remember meを実現します

ここでの JS 実装の効果は、[記憶する] チェックボックスをオンにすると、次回このインターフェイスを開いたときに、最後のユーザー パスワード (実際には Cookie) がフォームに保存されていることを確認できることです。

[Remember me] がチェックされていない場合、次回このログイン ページを開いたときに、ユーザー パスワード フォームがまだ空であることがわかり、再度入力する必要があります。

// formData 初始化声明等各种变量初始化，表单中进行了 v-model 绑定

// init 函数，并这里执行
const init = () => {
    
    
    // 这里如果 cookies 中有数据就赋给 formData，于是在界面表单中能显示
}
init()

// 登录函数，点击登录触发

if (formData.rememberMe) {
    
    
    // 如果勾选了记住我
    const loginInfo = {
    
    
        account: formData.account,
        password: formData.password,
        rememberMe: formData.rememberMe,
    }
     // cookie 设置保留 7 天
    VueCookies.set("loginInfo", loginInfo, "7d")
}