個人データをより適切に管理するには、個人データを表示および編集するための専用インターフェイスが必要です。この記事では、Vue.js と Element UI を使用したプロファイル管理インターフェイスの書き方を紹介します。
インターフェースのプロトタイピングのアイデア
プロファイル管理インターフェイスを設計する際に考慮すべき点がいくつかあります。
1. インターフェースのレイアウト: ユーザーのプロフィールやその他の関連情報を表示するには、明確なレイアウトが必要です。
2. 機能モジュール: ユーザーが必要な機能を簡単に見つけられるように、さまざまな機能モジュールを分離する必要があります。
3. ユーザー エクスペリエンス: ユーザーがインターフェイスを簡単に使用でき、必要な情報をすぐに見つけられるようにする必要があります。
コーディングのアイデア
コードを記述する前に、Vue.js と Element UI をインストールする必要があります。
まず、Vue インスタンスを作成し、それに Element UI を追加する必要があります。次に、インターフェイスを作成するための HTML および CSS コードの記述を開始します。
HTML コードでは、Element UI コンポーネントを使用してさまざまな機能モジュールを作成する必要があります。たとえば、el-card コンポーネントを使用してプロファイル カードを作成したり、el-tabs コンポーネントを使用してさまざまなタブを作成したり、el-form コンポーネントを使用してプロファイル編集フォームを作成したりすることができます。
CSS コードでは、インターフェイスを美しくするために Element UI のスタイルを使用する必要があります。たとえば、el-button コンポーネントのスタイルを使用してボタンを美しくしたり、el-input コンポーネントのスタイルを使用して入力ボックスを美しくしたりすることができます。
特定のインターフェースコード設計
```html
<テンプレート>
<div class="profile">
<el-card class="profile-card">
<div slot="header" class="profile-header">
<el-avatar :src=" avatar" size="large"></el-avatar>
<div class="profile-name">{
{ name }}</div>
</div>
<div class="profile-body">
<el- tabs v-model="activeTab">
<el-tab-pane label="个人资料">
<el-form :model="formData" :rules="rules" ref="form" label-width="100px">
<el-form-item label="用户名" prop="username">
<el-input v-model="formData.username" 無効></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="formData.email"></el-input>
</el-form-item>
<el-form- item label="手机号" prop="phone">
<el-input v-model="formData.Phone"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('form')">保存</el- button>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="ビデオ云盘">
<el-table :data="videoList" style= "width: 100%">
<el-table-column prop="name" label="ビデオ名"></el-table-column>100%"> <el-table-column prop="name" label="ビデオ名"></el-table-column>100%"> <el-table-column prop="name" label="ビデオ名"></el-table-column>
<el-table-column prop="size" label="ビデオ大小"></el-table-column>
<el-table-column prop="date" label="上传日期"></el-table-列>
</el-table>
</el-tab-pane>
<el-tab-pane label="更改密码">
<el-form :model="passwordForm" :rules="passwordRules" ref="passwordForm" label-width="100px">
<el-form-item label="旧密码" prop="oldPassword">
<el-input type="password" v-model="passwordForm.oldPassword"></el-input>
</el-form-item>
<el-form-item label="新密码" prop="newPassword">
<el-input type="password" v-model="passwordForm .newPassword"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input type="password" v-model="passwordForm.confirmPassword"></el-input>
</el-form-item >
<el-form-item>
<el-button type="primary" @click="submitForm('passwordForm')">保存</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
</el-card>
</div>
</template>
<スクリプト>
エクスポートデフォルト { data() { return { activeTab: '1', formData: { ユーザー名: 'admin', 電子メール: '[email protected]', 電話: '1234567890' }, ルール: { 電子メール: [ { 必須: true, メッセージ: 'メール アドレスを入力してください', トリガー: 'ぼかし' }, { タイプ: 'メール', メッセージ: '正しいメール アドレスを入力してください', トリガー: ['ぼかし', '変更' ] } ]、 電話: [ { 必須: true、メッセージ: '電話番号を入力してください'、トリガー: 'ぼかし' }、 { パターン: /^1[3456789]\d{9}$/、メッセージ: 'お願いします正しい電話番号を入力してください」、トリガー:['ぼかし', '変更'] } ] },
passwordForm: { oldPassword: ''、 newPassword: ''、 confirmPassword: '' }、 passwordRules: { oldPassword: [ { required: true、message: '古いパスワードを入力してください'、トリガー: 'blur' } ]、 newPassword: [ { 必須: true、メッセージ: '新しいパスワードを入力してください'、トリガー: 'ぼかし' }、 { 最小: 6、最大: 20、メッセージ: 'パスワードの長さは 6 ～ 20 文字です'、トリガー: 'ぼかし' } ]、 confirmPassword: [ { 必須: true、メッセージ: 'パスワードを確認してください'、トリガー: 'ぼかし' }、 { バリデーター: this.validateconfirmPassword、トリガー:'ぼかし' } ] }、 ビデオリスト: [
{ 名前: 'ビデオ1'、サイズ: '100MB'、日付: '2021-10-01' }、
{ 名前: 'ビデオ2'、サイズ: '200MB'、日付: '2021-10-02' }、
{ 名前: 'video3'、サイズ: '300MB'、日付: '2021-10-03' }
]、
アバター: 'https://avatars.githubusercontent.com/u/125264?s=200&v=4'、
名前: 'admin'
}
}、
メソッド: { submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { this.$message.success('保存成功') } }) }, validateconfirmPassword(ルール, 値, コールバック) { if (値 ! == this.passwordForm.newPassword) {
callback(new Error('2 回入力されたパスワードは矛盾しています'))
} else { callback() } } } } </script>
<スタイルスコープ>
.profile { 表示: フレックス; コンテンツの位置揃え: 中央; 整列項目: 中央; 高さ: 100%; }
.profile-card { 幅: 800px; }
.profile-header { 表示: フレックス; コンテンツの位置揃え: 中央; 整列項目: 中央; マージン-ボトム: 20px; }
.profile-name { font-size: 24px; マージン左: 20px; }
.profile-body { パディング: 20px; } </style> ```
経験
プロファイル管理インターフェイスを作成することで、Vue.js と Element UI について多くのことを学びました。Vue.js と Element UI を使用すると、美しいインターフェイスを簡単に作成したり、さまざまな機能をすばやく実装したりできることがわかりました。さらに、Vue.js コンポーネントとディレクティブを使用してユーザー入力を処理し、フォーム データを検証する方法を学びました。この知識は今後の開発作業に非常に役立ちます。