运用到Element官网的组件制作的小案例—技术引用有Axios、Vue

java游学

已于 2022-07-12 11:17:59 修改

阅读量698

点赞数

文章标签： vue.js 前端 javascript

于 2022-07-12 09:56:01 首次发布

本文链接：https://blog.csdn.net/qq_59746711/article/details/125735798

版权

Element的概念

Element：是饿了么公司前端开发团队提供的一套Vue的网站组件库，用于快速构建网页。
组件：是组成网页的部件。例如：超链接、按钮、图片、表格等等。

Element官网：https://element.eleme.cn/#/zh-CNListener

首先是Element的入门学习代码：

1.引入Element的css、js文件和Vue.js
    <script src="vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
2.创建Vue核心程序
此处的el是elemnet的简写。后面的值必须谁#加div中的id值
而return中的必须是键值对对象。
 new Vue({
            el: "#app",
            data() {
                return {}
                }
          } 
3.  可直接到Element官网复制代码

接下来将以下图片为项目原型做的一个练习小案例

在这里插入图片描述

代码如下：

 各种组件的代码主要在Element官网可找到：
 注意点：Element提供了很多组件。可根据要求在其中寻找

思路分享：
首先拿到项目原型进行分析，应该分析可能用到哪些组件。接着开始在vs中创建一个html文件
正文内容：
1.导入Vue的js文件
2.[在Element的官网：](https://element.eleme.cn/#/zh-CN/component/installation)
在Element官网中，找到引入样式和引入组件库，只需地址修改成自己index.js和index.css的地址就行
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- //添加搜索栏 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="菜品名称">
                <el-input v-model="formInline.user" placeholder="菜品名称"></el-input>
            </el-form-item>
            <el-form-item label="菜品分类">
                <el-select v-model="formInline.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="售卖状态">
                <el-select v-model="formInline.status" placeholder="售卖状态">
                    <el-option label="启用" value="shanghai"></el-option>
                    <el-option label="禁用" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-button type="primary">搜索</el-button>
            <br>
            <!-- 添加批量删除按钮，新建菜品按钮 -->
            <el-button type="danger">批量删除</el-button>
            <el-button type="primary" @click="dialogFormVisible = true">新建菜品</el-button>
            <!-- 3.表数据 -->
            <template>
                <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="name" label="菜品名称" name=center>
                    </el-table-column>
                    <el-table-column label="图片">
                        <!-- 槽 格子 
                        scope.row 代表当前行数据
                    -->
                        <template slot-scope="scope">
                            <el-popover placement="top-start" title="" trigger="hover">
                                <img :src="scope.row.image" alt="" style="width: 150px;height: 150px">
                                <img slot="reference" :src="scope.row.image" style="width: 30px;height: 30px">
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop="description" label="菜品描述">
                    </el-table-column>
                    <el-table-column prop="category" label="菜品分类">
                    </el-table-column>
                    <el-table-column prop="price" label="菜品价格">
                    </el-table-column>
                    <el-table-column label="售卖状态">
                        <!-- 将1或0改成启用或禁用。但此处无法使用三元运算符,只能通过template中的slot-scope=“scope”   {{scope.row.status==1?'启用:禁用'}} -->
                        <template slot-scope="scope">
                            {{scope.row.status ==1?'启用':'禁用'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="updateTime" label="更新时间">
                    </el-table-column>
                    <el-table-column label="操作" width="420">
                        <el-row>
                            <el-button type="primary" plain>修改</el-button>
                            <el-button type="success" plain>停售</el-button>
                            <el-button type="danger" plain>删除</el-button>
                        </el-row>
                    </el-table-column>
                </el-table>
            </template>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="5"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
            <!-- 新建菜品名称对话框 -->
            <!-- 并同新建菜单按钮绑定事件 -->
            <el-dialog title="新键菜品" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="菜品名称" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="菜品分类" :label-width="formLabelWidth">
                        <el-select v-model="form.classify" placeholder="请选择菜品分类">
                            <el-option label="热菜" value="shanghai"></el-option>
                            <el-option label="凉菜" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="菜品价格" :label-width="formLabelWidth">
                        <el-input v-model="form.price" placeholder="请输入菜品价格" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="菜品图片" :label-width="formLabelWidth">
                        <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false" :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>

                    </el-form-item>

                    <el-form-item label="菜品描述" :label-width="formLabelWidth">
                        <el-input type="textarea" placeholder="请输入菜品描述..." show-word-limit maxlength="300"
                            v-model="form.desc">
                        </el-input>

                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                </div>
            </el-dialog>
    </div>


    <!-- 1.导入vue.js文件 -->
    <script src="./vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="./element-ui/lib/index.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
    <!-- 2.创建vue的核心对象 -->
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    imageUrl: '',
                    formLabelWidth: '120px',
                    dialogFormVisible: false, //控制对话框是否可见
                    form: {
                        name: '',
                        region: '',
                        date1: '',
                        date2: '',
                        delivery: false,
                        type: [],
                        resource: '',
                        desc: ''
                    },
                    total: 100,
                    currentPage: 1,
                    formInline: {
                        user: '',
                        region: ''
                    },

                    tableData: [{
                            "id": 1,
                            "name": "糖醋里脊",
                            "image": "https://tse1-mm.cn.bing.net/th/id/R-C.81bb23caf379342b46fbe504749a8b80?rik=evfxrHcBFkRtcA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50095%2f2639.jpg_wh860.jpg&ehk=%2fkgtpa0R7miVzbMiQMtWyTLvWtgk3roGF8t93LH67T4%3d&risl=&pid=ImgRaw&r=0",
                            "description": "aliqua",
                            "category": "热菜",
                            "price": 35282863,
                            "status": "1",
                            "updateTime": "1970-07-13T17:31:26.805Z",
                            "createTime": "1943-01-15T07:17:19.591Z"
                        },
                        {
                            "id": 37,
                            "name": "糖醋里脊",
                            "image": "https://tse1-mm.cn.bing.net/th/id/R-C.81bb23caf379342b46fbe504749a8b80?rik=evfxrHcBFkRtcA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50095%2f2639.jpg_wh860.jpg&ehk=%2fkgtpa0R7miVzbMiQMtWyTLvWtgk3roGF8t93LH67T4%3d&risl=&pid=ImgRaw&r=0",
                            "description": "qui consectetur",
                            "category": "凉菜",
                            "price": 75545494,
                            "status": "1",
                            "updateTime": "1984-01-21T20:59:05.255Z",
                            "createTime": "1987-01-28T14:31:11.798Z"
                        },
                        {
                            "id": 72,
                            "name": "糖醋里脊",
                            "image": "https://tse1-mm.cn.bing.net/th/id/R-C.81bb23caf379342b46fbe504749a8b80?rik=evfxrHcBFkRtcA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50095%2f2639.jpg_wh860.jpg&ehk=%2fkgtpa0R7miVzbMiQMtWyTLvWtgk3roGF8t93LH67T4%3d&risl=&pid=ImgRaw&r=0",
                            "description": "velit veniam",
                            "category": "热菜",
                            "price": 75328514,
                            "status": "0",
                            "updateTime": "2019-02-20T16:12:50.569Z",
                            "createTime": "2020-11-09T10:05:57.696Z"
                        },
                        {
                            "id": 35,
                            "name": "蒜香排骨",
                            "image": "https://tse1-mm.cn.bing.net/th/id/R-C.81bb23caf379342b46fbe504749a8b80?rik=evfxrHcBFkRtcA&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50095%2f2639.jpg_wh860.jpg&ehk=%2fkgtpa0R7miVzbMiQMtWyTLvWtgk3roGF8t93LH67T4%3d&risl=&pid=ImgRaw&r=0",
                            "description": "pariatur",
                            "category": "热菜",
                            "price": -29339719,
                            "status": "1",
                            "updateTime": "1953-12-11T14:26:26.271Z",
                            "createTime": "2001-05-30T13:59:10.475Z"
                        }
                    ],
                    multipleSelection: []
                }
            },
            methods: {
                //分页
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                },
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                },

                //搜索表单
                onSubmit() {
                    console.log('submit!');
                },
                //图片上传
                handleAvatarSuccess(res, file) {
                    this.imageUrl = URL.createObjectURL(file.raw);
                },
                beforeAvatarUpload(file) {
                    const isJPG = file.type === 'image/jpeg';
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG) {
                        this.$message.error('上传头像图片只能是 JPG 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                },
                //表格
                toggleSelection(rows) {
                    if (rows) {
                        rows.forEach(row => {
                            this.$refs.multipleTable.toggleRowSelection(row);
                        });
                    } else {
                        this.$refs.multipleTable.clearSelection();
                    }
                },
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                }
            }
        })
    </script>
</body>

</html>