碼上快樂

相關內容    簡體    繁體

Vue 組件庫：Element

本文轉載自   查看原文   2022-02-14 17:47   1734    前端

目錄


Element 介紹

什么是 Element ？

  • Element 是網站快速成型工具，是餓了么公司前端開發團隊提供的一套基於 Vue 的網站組件庫。

  • 組件：組成網頁的部件，例如超鏈接、按鈕、圖片、表格等等。

  • 使用 Element 的前提是必須要有 Vue。

  • Element 官網

樣式示例：

  • 自己完成的按鈕：
    image

  • Element 提供的按鈕：
    image


Element 快速入門

開發步驟：

  1. 下載 Element 核心庫。
  2. 引入 Element 樣式文件。
  3. 引入 Vue 核心 js 文件。
  4. 引入 Element 核心 js 文件。
  5. 編寫按鈕標簽。
  6. 通過 Vue 核心對象加載元素。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element</title>
    <!-- 引入 Element 樣式文件 -->
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 Vue 核心 js 文件 -->
    <script src="../node_modules/vue/dist/vue.js"></script>
    <!-- 引入 Element 核心 js 文件 -->
    <script src="../node_modules/element-ui/lib/index.js"></script>
</head>
<body>
    <button>我是按鈕</button>
    <hr>
    <div id="app">
        <el-row>
            <el-button>默認按鈕</el-button>
            <el-button type="primary">主要按鈕</el-button>
            <el-button type="success">成功按鈕</el-button>
            <el-button type="info">信息按鈕</el-button>
            <el-button type="warning">警告按鈕</el-button>
            <el-button type="danger">危險按鈕</el-button>
        </el-row>
        <br>
        <el-row>
            <el-button plain>朴素按鈕</el-button>
            <el-button type="primary" plain>主要按鈕</el-button>
            <el-button type="success" plain>成功按鈕</el-button>
            <el-button type="info" plain>信息按鈕</el-button>
            <el-button type="warning" plain>警告按鈕</el-button>
            <el-button type="danger" plain>危險按鈕</el-button>
        </el-row>
        <br>
        <el-row>
            <el-button round>圓角按鈕</el-button>
            <el-button type="primary" round>主要按鈕</el-button>
            <el-button type="success" round>成功按鈕</el-button>
            <el-button type="info" round>信息按鈕</el-button>
            <el-button type="warning" round>警告按鈕</el-button>
            <el-button type="danger" round>危險按鈕</el-button>
        </el-row>
        <br>
        <el-row>
            <el-button icon="el-icon-search" circle></el-button>
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
            <el-button type="success" icon="el-icon-check" circle></el-button>
            <el-button type="info" icon="el-icon-message" circle></el-button>
            <el-button type="warning" icon="el-icon-star-off" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
        </el-row>
    </div>
</body>
<script>
    new Vue({
        el:"#app"
    });
</script>
</html>

頁面效果：

image


Element 常用組件

基礎布局

Element 基礎布局可以將頁面分成最多 24 個部分（列），且可以自由切分。

image

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element</title>
    <!-- 引入 Element 樣式文件 -->
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 Vue 核心 js 文件 -->
    <script src="../node_modules/vue/dist/vue.js"></script>
    <!-- 引入 Element 核心 js 文件 -->
    <script src="../node_modules/element-ui/lib/index.js"></script>
    <!-- 定義樣式 -->
    <style>
        .el-row {
            /* 行距為20px */
            margin-bottom: 20px;
        }
        .bg-purple-dark {
            background: red;
        }
        .bg-purple {
            background: blue;
        }
        .bg-purple-light {
            background: green;
        }
        .grid-content {
            /* 邊框圓潤度 */
            border-radius: 4px;
            /* 行高為36px */
            min-height: 36px;
        }
    </style>
</head>
<body>
    <button>我是按鈕</button>
    <hr>
    <div id="app">
        <el-row>
            <!-- span值最大為24，超過則元素不顯示 -->
            <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
        </el-row>
        <el-row>
            <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
        </el-row>
        <el-row>
            <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
        <el-row>
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        </el-row>
        <el-row>
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        </el-row>
    </div>
</body>
<script>
    new Vue({
        el:"#app"
    });
</script>
</html>

頁面效果：

image


容器布局

容器布局：將頁面分成頭部區域、側邊欄區域、主區域、底部區域。

image

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element</title>
    <!-- 引入 Element 樣式文件 -->
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 Vue 核心 js 文件 -->
    <script src="../node_modules/vue/dist/vue.js"></script>
    <!-- 引入 Element 核心 js 文件 -->
    <script src="../node_modules/element-ui/lib/index.js"></script>
    <!-- 定義樣式 -->
    <style>
        .el-header, .el-footer {
            background-color: #d18e66;
            color: #333;
            text-align: center;
            height: 100px;
        }
        .el-aside {
            background-color: #55e658;
            color: #333;
            text-align: center;
            height: 580px;
        }
        .el-main {
            background-color: #5fb1f3;
            color: #333;
            text-align: center;
            height: 520px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 
            多個contatiner嵌套時，是多行分布的關系
        -->
        <el-container>
            <el-header>頭部區域</el-header>
            <el-container>
                <el-aside width="200px">側邊欄區域</el-aside>
                <el-container>
                    <el-main>主區域</el-main>
                    <el-footer>底部區域</el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
</body>
<script>
    new Vue({
        el:"#app"
    });
</script>
</html>

頁面效果：

image


表單組件

表單：由輸入框、下拉列表、單選框、多選框等控件組成，用以收集、校驗、提交數據。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element</title>
    <!-- 引入 Element 樣式文件 -->
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 Vue 核心 js 文件 -->
    <script src="../node_modules/vue/dist/vue.js"></script>
    <!-- 引入 Element 核心 js 文件 -->
    <script src="../node_modules/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

            <el-form-item label="活動名稱" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>

            <el-form-item label="活動區域" prop="region">
                <el-select v-model="ruleForm.region" placeholder="請選擇活動區域">
                    <el-option label="區域一" value="shanghai"></el-option>
                    <el-option label="區域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="活動時間" required>
                <el-col :span="11">
                    <el-form-item prop="date1">
                        <el-date-picker type="date" placeholder="選擇日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                    <el-form-item prop="date2">
                        <el-time-picker placeholder="選擇時間" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>

            <el-form-item label="即時配送" prop="delivery">
                <el-switch v-model="ruleForm.delivery"></el-switch>
            </el-form-item>

            <el-form-item label="活動性質" prop="type">
                <el-checkbox-group v-model="ruleForm.type">
                    <el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox>
                    <el-checkbox label="地推活動" name="type"></el-checkbox>
                    <el-checkbox label="線下主題活動" name="type"></el-checkbox>
                    <el-checkbox label="單純品牌曝光" name="type"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item label="特殊資源" prop="resource">
                <el-radio-group v-model="ruleForm.resource">
                    <el-radio label="線上品牌商贊助"></el-radio>
                    <el-radio label="線下場地免費"></el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="活動形式" prop="desc">
                <el-input type="textarea" v-model="ruleForm.desc"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即創建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>

        </el-form>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            ruleForm: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            rules: {
                name: [
                    { required: true, message: '請輸入活動名稱', trigger: 'blur' },
                    { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '請選擇活動區域', trigger: 'change' }
                ],
                date1: [
                    { type: 'date', required: true, message: '請選擇日期', trigger: 'change' }
                ],
                date2: [
                    { type: 'date', required: true, message: '請選擇時間', trigger: 'change' }
                ],
                type: [
                    { type: 'array', required: true, message: '請至少選擇一個活動性質', trigger: 'change' }
                ],
                resource: [
                    { required: true, message: '請選擇活動資源', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '請填寫活動形式', trigger: 'blur' }
                ]
            }
        },
        methods:{
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    });
</script>
</html>

頁面效果：

image


表格組件

表格：用於展示多條結構類似的數據，可對數據進行編輯、刪除或其他自定義操作。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element</title>
    <!-- 引入 Element 樣式文件 -->
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 Vue 核心 js 文件 -->
    <script src="../node_modules/vue/dist/vue.js"></script>
    <!-- 引入 Element 核心 js 文件 -->
    <script src="../node_modules/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <template>
            <el-table
                    :data="tableData"
                    style="width: 100%">

                <el-table-column
                        prop="date"
                        label="日期"
                        width="180">
                </el-table-column>

                <el-table-column
                        prop="name"
                        label="姓名"
                        width="180">
                </el-table-column>

                <el-table-column
                        prop="address"
                        label="地址">
                </el-table-column>

                <el-table-column
                        label="操作"
                        width="180">
                    <el-button type="warning">編輯</el-button>
                    <el-button type="danger">刪除</el-button>
                </el-table-column>

            </el-table>
        </template>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            tableData: [{
                date: '2016-05-02',
                name: '王小龍',
                address: '上海市普陀區金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀區金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '石黑豹',
                address: '上海市普陀區金沙江路 1519 弄'
            }]
        }
    });
</script>
</html>

頁面效果：

image


頂部導航欄組件

image

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element</title>
    <!-- 引入 Element 樣式文件 -->
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 Vue 核心 js 文件 -->
    <script src="../node_modules/vue/dist/vue.js"></script>
    <!-- 引入 Element 核心 js 文件 -->
    <script src="../node_modules/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-menu
                :default-active="activeIndex2"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item index="1">處理中心</el-menu-item>

            <el-submenu index="2">
                <template slot="title">我的工作台</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-submenu index="2-4">
                    <template slot="title">選項4</template>
                    <el-menu-item index="2-4-1">選項1</el-menu-item>
                    <el-menu-item index="2-4-2">選項2</el-menu-item>
                    <el-menu-item index="2-4-3">選項3</el-menu-item>
                </el-submenu>
            </el-submenu>

            <el-menu-item index="3" disabled>消息中心</el-menu-item>

            <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">訂單管理</a></el-menu-item>

        </el-menu>
    </div>
</body>
<script>
    new Vue({
        el:"#app"
    });
</script>
</html>

側邊導航欄組件

image

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Element</title>
    <!-- 引入 Element 樣式文件 -->
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 Vue 核心 js 文件 -->
    <script src="../node_modules/vue/dist/vue.js"></script>
    <!-- 引入 Element 核心 js 文件 -->
    <script src="../node_modules/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-col :span="6">  <!-- 側邊導航欄寬度 -->
            <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">

                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>導航一</span>
                    </template>
                    <el-menu-item-group>
                        <template slot="title">分組一</template>
                        <el-menu-item index="1-1">選項1</el-menu-item>
                        <el-menu-item index="1-2">選項2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分組2">
                        <el-menu-item index="1-3">選項3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="1-4">
                        <template slot="title">選項4</template>
                        <el-menu-item index="1-4-1">選項1</el-menu-item>
                    </el-submenu>
                </el-submenu>

                <el-menu-item index="2">
                    <i class="el-icon-menu"></i>
                    <span slot="title">導航二</span>
                </el-menu-item>

                <el-menu-item index="3" disabled>
                    <i class="el-icon-document"></i>
                    <span slot="title">導航三</span>
                </el-menu-item>

                <el-menu-item index="4">
                    <i class="el-icon-setting"></i>
                    <span slot="title">導航四</span>
                </el-menu-item>
            </el-menu>
        </el-col>
    </div>
</body>
<script>
    new Vue({
        el:"#app"
    });
</script>
</html>


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 vue組件庫-vant、element 造個自己的Vue的UI組件庫類似Element 七、Vue組件庫：Element、Swiper（輪播專用組件） vue組件庫element-ui 的Table內容顯示不更新 基於vue的element樹形組件 使用vue與element組件 vue Element-UI組件 VUE 如何覆蓋element組件樣式 vue，基於element的tree組件封裝 vue-cli element 二次封裝組件，在npm上發布自己的vue組件庫，使用npm install 或 script的方式引用
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM