第 9 章 Vue の応用編 Element Plus の基本的な使い方

プログラミング 2023-12-17 17:33:27 訪問数: null

Element Plusの基本的な使い方

element-ui 是基于vue 开发的一套ui组件库，提供丰富的网页开发组件，可用快速开发网站，降低前端开发成本
Version 要素には現在 2 つのバージョンがあります

element-ui：基于vue2
element-plus: 基于vue3

公式サイトアドレス

https://element-plus.org/zh-CN/component/button.html

エレメントプラスの基本的な使い方

1.安装
npm install element-plus
2.	在vue项目main.js引入element-plus组件，以及css文件
3.	在官方文档中找到需要的样式组件复制代码对应的.vue中使用。
elementUI を使用して Web サイトを開発するプロセス
1.页面布局
2.导航栏
3.每个页面功能开发

1.pycharm は vue プロジェクトを作成します
2.初期化、

npm install vue-router@4  #导入路由
vue add router   #安装路由
npm install element-plus  #安装插件

3.配置注册
ここに画像の説明を挿入します
4.布局
ここに画像の説明を挿入します
ここに画像の説明を挿入します
ここに画像の説明を挿入します

ナビゲーションバーを構成する
<el-container>
  <el-aside width="200px">
    <el-menu
    default-active="2"
    class="el-menu-vertical"
    @open="handleOpen"
    @close="handleClose"
  >
      <el-menu-item index="1">
      <el-icon><icon-menu /></el-icon>
      <span>仪表盘</span>
    </el-menu-item>

    <el-sub-menu index="2">
      <template #title>
        <el-icon><location /></el-icon>
        <span>一级菜单1</span>
      </template>
        <el-menu-item index="2-1">二级菜单1</el-menu-item>
        <el-menu-item index="2-2">二级菜单2</el-menu-item>
        <el-menu-item index="2-3">二级菜单3</el-menu-item>
    </el-sub-menu>

       <el-sub-menu index="3">
      <template #title>
        <el-icon><location /></el-icon>
        <span>二级菜单2</span>
      </template>
        <el-menu-item index="3-1">二级菜单1</el-menu-item>
        <el-menu-item index="3-2">二级菜单2</el-menu-item>
    </el-sub-menu>

図に示すように構成が完了します。
ここに画像の説明を挿入します

コンテンツ領域全体を埋めるように設定します

ここに画像の説明を挿入します
ナビゲーションバーの色の設定
ここに画像の説明を挿入します
ここに画像の説明を挿入します

ルーターに基づいて動的に生成

vue-router モードを有効にします。ナビゲーションをアクティブにする場合、インデックスをパスとして使用してルーティング ジャンプを実行します
1. 動的ルーティング (index.js) を構成します
完全なルーティング構成は次のとおりです。

const routes = [
  {
    path: '/',
    name: '仪表板',
    component: Layout
  },
  {
    path: '/nav1',
    name: '一级菜单1',
    component: Layout,
    children: [
        {
    path: '/a',
    name: '页面A',
    component: () => import(/* webpackChunkName: "about" */ '../views/A.vue')
  },
    {
    path: '/b',
    name: '页面B',
    component: () => import(/* webpackChunkName: "about" */ '../views/B.vue')
  },
    ]
  },
  {
    path: '/nav2',
    name: '一级菜单2',
    component: Layout,
    children: [
      {
        path: '/c',
        name: '页面C',
        component: () => import(/* webpackChunkName: "about" */ '../views/C.vue')
      }
    ]
  }
]
  1. ページ処理ナビゲーション バーのロジックを構成する
        <el-menu
        default-active="2"
        class="el-menu-vertical"
        background-color="#304156"
        text-color="#FFFFFF"
        active-text-color="#ffd04b"
        @open="handleOpen"
        @close="handleClose"
        router
      >
          <template v-for="menu in this.$router.options.routes" :key="menu">
               <!--处理没有子路由的菜单-->
              <el-menu-item v-if="!menu.children" :index="menu.path">
                <span>{
   
   {menu.name}}</span>
              </el-menu-item>
              <!--处理子路由的菜单-->
          <el-sub-menu v-else-if="menu.children" :index="menu.path">
          <template #title>
            <el-icon><location /></el-icon>
            <span>{
   
   {menu.name}}</span>
          </template>
            <!--循环二级菜单 -->
            <el-menu-item v-for="child in menu.children" :key="child" :index="child.path">{
   
   {child.name}}</el-menu-item>
        </el-sub-menu>
          </template>
      </el-menu>

ここに画像の説明を挿入します
ここに画像の説明を挿入します

ページアイコンの設定
#安装图标
npm     install  @element-plus/icons-vue

アイコンのインポートと登録
ここに画像の説明を挿入します
公式アイコン アドレス

https://element-plus.org/zh-CN/component/icon.html#%E5%9B%BE%E6%A0%87%E9%9B%86%E5%90%88

ここに画像の説明を挿入します

ナビゲーションバーアイコンを動的に構成する
  1. ルーティングを変更する
    ここに画像の説明を挿入します
    ルーティング アイコン「HelpFilled」で、ルーティング キーワードを設定します
  2. 参照ルーティング構成
    ここに画像の説明を挿入します
<el-icon><component :is="menu.icon"/></el-icon>

確認
ここに画像の説明を挿入します
ナビゲーション バーの折りたたみ機能を実装する
1. 折りたたみアイコンを設定する
ここに画像の説明を挿入します
2. 折りたたみアイコンを設定するロジック a>
ここに画像の説明を挿入します
ここに画像の説明を挿入します
ここに画像の説明を挿入します
アイコンをクリックして小さな手を表示する機能を実装します。
ここに画像の説明を挿入します
ここに画像の説明を挿入します
ナビゲーション バーのログ アイコンを設定します。
ここに画像の説明を挿入します
ロゴ スタイル
ここに画像の説明を挿入します
最後に、効果は図のようになります
大胆なスタイル

アバターとドロップダウンボックスを構成する

ドロップダウンボックスの設定

        <el-dropdown>
       <span class="el-dropdown-link">
         <img src="../assets/touxiang.png" alt="">
       </span>
       <template #dropdown>
       <el-dropdown-menu>
        <el-dropdown-item>密码修改</el-dropdown-item>
        <el-dropdown-item>退出登录</el-dropdown-item>

      </el-dropdown-menu>
    </template>
  </el-dropdown>

アバターを設定する
ここに画像の説明を挿入します
アバター スタイルを設定する
ここに画像の説明を挿入します
ここに画像の説明を挿入します

レイアウトを設定する

グリッド レイアウト: 基本的な 24 列を通じてレイアウトをすばやく簡単に作成します。
ここに画像の説明を挿入します

el-row 代表行，里面嵌套el-col
el-col  代表列，总分为24列

属性

gutter列间隔
span占据的列数

    <el-row  :gutter="10">
      <el-col :span="12">
          <div style="background: green">第一列</div>
      </el-col>
      <el-col :span="12">
          <div style="background: orange">第二列</div>
      </el-col>
    </el-row>
    <br>
     <el-row  :gutter="10">
      <el-col :span="8">
        <div style="background: green">第一列</div>
      </el-col>
      <el-col :span="8">
        <div style="background: orange">第二列</div>
      </el-col>
       <el-col :span="8">
        <div style="background: blueviolet">第三列</div>
      </el-col>
     </el-row>

      <br>
     <el-row  :gutter="10">
      <el-col :span="4">
        <div style="background: green">第一列</div>
      </el-col>
      <el-col :span="5">
        <div style="background: orange">第二列</div>
      </el-col>
       <el-col :span="8">
        <div style="background: blueviolet">第三列</div>
      </el-col>
     </el-row>

表示効果は以下の通りです
ここに画像の説明を挿入します

カード

カードの効果と同様に、データを一時停止して表示します。
コード構造:
ここに画像の説明を挿入します

形状

フォームには、ユーザー入力用の入力ボックス、ラジオ ボタン、ドロップダウン選択、複数選択ボックス、その他のコンポーネントが含まれています。フォームを使用してデータを収集、検証、送信します。
フォーム アイテムの共通コンポーネント:

el-input: 输入框
el-select: 下拉框
el-checkbox-group 多选框
el-radio-group：单选框

入力ボックス、選択ボックス、送信ボックスを実装する
ここに画像の説明を挿入します

<template>
    <h1>这是B页面</h1>
    <el-form :model="form">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age"/>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择性别">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onsubmit">提交</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>

</template>

<script>
export default {
      
      
  name: "B",
  data() {
      
      
    return {
      
      
      form: {
      
      
        name: '',
        age: '',
        sex: ''
      }
    }
  }
}
</script>

<style scoped>

</style>
フォーム: 検証ルール

フォーム コンポーネントを使用すると、ユーザーの入力が仕様に準拠しているかどうかを確認して、エラーを見つけて修正することができます。
使用プロセス

1.定义校验规则
2el-form指定“rules” 属性传入定义的校验规则
3.el-form-item指定“prop”属性与校验规则名称对应

名前、年齢、性別のルールを設定する

  1. ルールを定義する
    ここに画像の説明を挿入します
    2. el-form は「rules」属性を指定し、定義された検証ルールを渡します。el-form-item は「prop」属性を指定します。< a i= 2> 検証 検証ルールをカスタマイズして、2 つのパスワードが一致するかどうかを判断します
    ここに画像の説明を挿入します

    ここに画像の説明を挿入します

    ここに画像の説明を挿入します
フォームリセットボタン

フォーム全体をリセットし、初期値の状態に戻し、検証結果を削除します。
ここに画像の説明を挿入します
1.0 バインド フォーム
ここに画像の説明を挿入します
2.0 バインド リセット ボタン< /span>
ここに画像の説明を挿入します
3.0 リセットメソッドの書き込み
ここに画像の説明を挿入します

フォーム送信前の事前検証

送信ボタンをクリックして実行するときにフォーム全体を検証します。これにより、データの整合性が効果的に保証されます。
ここに画像の説明を挿入します
ここに画像の説明を挿入します
送信フォームをバインド
ここに画像の説明を挿入します
検証< /a >
ここに画像の説明を挿入します
ここに画像の説明を挿入します
入力が正しい場合は正常に戻ります
ここに画像の説明を挿入します

テーブル: 境界線、幅、固定列

テーブルのプロパティ:

border:是否带有纵向边框
data:表格使用的数据，自动渲染
列属性：
prop: 键名，对应数据中的字段
label:列名
width：列宽度
fixed:列是否固定在左侧或者右侧， true 表示固定在左侧
fixed= "right"

1.0 テーブル構成
ここに画像の説明を挿入します
2.0 テーブル データの書き込み
ここに画像の説明を挿入します
3.0 検証
ここに画像の説明を挿入します

テーブル コンポーネントはラジオ選択のサポートを提供します。current-change イベントは、選択されたときにトリガーされるイベントを管理します。現在のデータを渡します。

1.0 イベントのバインドバインディング
2.0 単一選択ロジックの作成
ここに画像の説明を挿入します
3.0 検証
ここに画像の説明を挿入します
3.0 複数選択ロジックの作成< /span> a> 2.0 1.0 データの削除 3.3 検証 3.2 ロジックの書き込み
3.1 バインディング
ここに画像の説明を挿入します

ここに画像の説明を挿入します

ここに画像の説明を挿入します


ここに画像の説明を挿入します

ここに画像の説明を挿入します

選別

テーブルを並べ替えてデータをすばやく検索または比較する
ここに画像の説明を挿入します
ここに画像の説明を挿入します

カスタムテンプレート

カスタマイズした表示内容は他のコンポーネントと組み合わせて使用​​できます。一般的には削除や編集などの操作バーとして使用されます。
1.0 編集削除ボタンとバインド イベントを追加します。スコープ関数の呼び出し (スコープ 現在の行の内容を取得)

ここに画像の説明を挿入します
2.0 論理関数の書き込み削除と編集ここに画像の説明を挿入します

ページネーション
background: 是否为分页按钮添加颜色
page-size  每页的条数
page-sizes 可选每页显示的条数
total 总条目数
layout  分页功能显示内容
current-page: 当前页码改变时触发
size-change 每页显示条目改变触发
current-change 当前页改变时触发

      <!-- 分页-->
          <el-pagination
            v-model:current-page="currentPage4"
            v-model:page-size="pageSize4"
            :page-sizes="[10, 20, 30, 40]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
    />

ここに画像の説明を挿入します
ここに画像の説明を挿入します
ここに画像の説明を挿入します

フィードバックコンポーネント

ここに画像の説明を挿入します
ここに画像の説明を挿入します
ここに画像の説明を挿入します

ポップアップボックスを削除する動作ロジックを実装する

1.0 削除ボタンをバインドする
ここに画像の説明を挿入します
2.0 削除関数を作成する
ここに画像の説明を挿入します
3.0 検証
ここに画像の説明を挿入します

フォームポップアップボックス

ダイアログ ボックス: ユーザーに通知し、現在のページ ステータスを保持しながら関連操作を実行します。よりカスタマイズされたシナリオに適しています。
1.0 ポップアップ ボックス ロジックを作成する

    <el-dialog v-model="dialogFormVisible" title="创建用户">
      <el-form :model="form">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age"/>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择性别">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
      </el-form>
       <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确认</el-button>
        </span>
      </template>
    </el-dialog>

  <el-button @click="dialogFormVisible = true" >弹出框</el-button>

2.0 ポップアップボックス書き込み機能

ここに画像の説明を挿入します
3.0 検証
ここに画像の説明を挿入します

おすすめ

転載: blog.csdn.net/weixin_43546282/article/details/129092416
おすすめ
ランキング
パイソンのPythonの設計哲学--zen
VUE - 1を学習の開発ブログ
エントリートラバース地図要素
コードをHuaweiCloudgitリポジトリに同期する
Mavenは地元の倉庫とアリクラウド遠隔倉庫を設定しました
Linux は、ファイルとサブディレクトリの内容をすべてのユーザーが読み取り、書き込み、実行できるように変更します。
サンプルを作成するためのK8S展開＆サービス
ailoop2内部ailoop3内部の操作で、検討します。（コストは右である）海のデバッグ本当の巨人を使用した場合HearthBuddy愛2（第ヒーローのスキルが問題のトーテムを召喚使用していない、海の巨人を使用）、以下トーテムを召喚
お金が最も多くを得ました
[P1023]羅区税補助金（説明）
アーカイブ
もっと
2024-06-04(0)
2024-06-03(1)
2024-06-02(0)
2024-06-01(1)
2024-05-31(1)
2024-05-30(0)
2024-05-29(1)
2024-05-28(0)
2024-05-27(1)
2024-05-26(0)

コードワールド

© 2018 codetd.com