总结58 前端设计之基于Vue的ElementUI插件应用

最新推荐文章于 2023-12-07 16:10:10 发布

君を見つけて

最新推荐文章于 2023-12-07 16:10:10 发布

阅读量588

点赞数 1

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/chinatopno1/article/details/105569763

版权

前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

概念

ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发
人员快速构建功能强大、风格统一的页面。
通俗来说,ElementUI不仅和BootStrap一样可以美化界面,它还能实现复杂的业务逻辑.

应用ElementUI

官网文档:https://element.eleme.cn/#/zh-CN/component/installation

链接: https://pan.baidu.com/s/1RBJRE96o5Y41-6387AnEmQ
提取码: uqyb

一.导入Vue插件

ElementUI需要配合Vue插件一同使用.
列如:

    <script src="js/vue.js"></script>

二.导入element的css样式

列如:

    <link rel="stylesheet" href="plugins/elementui/index.css"></link>

三.导入element组件

列如:

    <script src="plugins/elementui/index.js"></script>

表格应用(重要)

参考:https://element.eleme.cn/#/zh-CN/component/table
其中slot-scope属性值的’data’是一个形参名称,它会先获取vue对象内data键值内的键值对数据.当通过’data.row’来运行vue内的事件时,实际上是把vue数据对象内的’row’键当作参数传递给被调用的事件方法,而被调用的事件方法内的形参会接收到’data.键名’的数据.
你也可以直接传递’data’.把vue内的数据对象’tableData’整个传递给事件方法的形参处.
注意:此处的’row’同时也包含其表格列对应的数据库封装信息
在这里插入图片描述
实际应用示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <!-- 导入element的css样式 -->
    <link rel="stylesheet" href="plugins/elementui/index.css"></link>
    <!-- 导入element的组件 -->
    <script src="plugins/elementui/index.js"></script>
</head>
<body>
<!-- 表格 表格类型:固定列 -->
<div id="tabletest">
    <el-table :data="tableData" stripe>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="school" label="学校"> </el-table-column>
        <el-table-column  label="操作" align="center" >
            <template slot-scope="scope">
                 <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</div>
<script>
    var app = new Vue({
        el:"#tabletest",
        data:{
            tableData:[
                {"name":"李静",age:25,school:"北京大学"},
                {name:"王斌",age:23,school:"浙江大学"}
            ]
        },
        methods:{
            handleClick(row){
                alert(row.name+" "+row.age+" "+row.school);

            },
        }
    });
</script>

</body>
</html>

表单应用(重要//)

参考:https://element.eleme.cn/#/zh-CN/component/form
实际应用示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <!--
	rules：表单验证规则
-->
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <!--
                prop：表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
            -->
            <el-form-item label="活动名称" prop="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="活动区域" prop="region">
                <el-select v-model="form.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-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                    <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="即时配送">
                <el-switch v-model="form.delivery"></el-switch>
            </el-form-item>
            <el-form-item label="活动性质">
                <el-checkbox-group v-model="form.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="特殊资源">
                <el-radio-group v-model="form.resource">
                    <el-radio label="线上品牌商赞助"></el-radio>
                    <el-radio label="线下场地免费"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="活动形式">
                <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
            </el-form-item>
        </el-form>
        <script>
            new Vue({
                el:'#app',
                data:{
                    form: {
                        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' }
                        ]
                    }
                },
                methods:{
                    onSubmit(){
                        //进行输入校验
                        this.$refs['form'].validate((valid)=>{
                            alert(valid);
                        });
                    }
                }
            });
        </script>
    </div>
</body>
</html>

Pagination分页(重要//)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <!--
            current-change：内置的事件，当前页码改变时会触发，可以获取到改变之后的页码
        -->
        <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                layout="total, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
        <script>
            new Vue({
                el:'#app',
                data:{
                    currentPage : 5,
                    pageSize : 10,
                    total : 305
				},
                methods:{
                    handleCurrentChange(page){
                        //page:第几页 还需要每页显示几条
                        //向后端请求数据，刷新我们的数据
                        //this.currentPage
                        //this.pagSize
                        alert(page);
                        //this.total = 
                    }
                }
            });
        </script>
    </div>
</body>
</html>

layout代表组件包含：‘prev, pager, next, jumper, ->, total’
@current-change="handleCurrentChange"可以指定翻页时调用的方法，传递当前第几页到参数中去

容器应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-container>
            <el-header>
                header部分
            </el-header>
            <el-container>
                <el-aside width="200px">
                    aside部分
                </el-aside>
                <el-container>
                    <el-main>
                        main部分
                    </el-main>
                    <el-footer>
                        footer部分
                    </el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: left;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 590px;
        }
    </style>
    <script>
        new Vue({
            el:'#app'
        });
    </script>
</body>
</html>

Dropdown下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-dropdown split-button @command="handleCommand" type="info">
            默认尺寸
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a">黄金糕</el-dropdown-item>
                <el-dropdown-item command="b">狮子头</el-dropdown-item>
                <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
                <el-dropdown-item command="d">双皮奶</el-dropdown-item>
                <el-dropdown-item command="e">蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>

        <el-dropdown size="medium" split-button type="primary">
            中等尺寸
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item>双皮奶</el-dropdown-item>
                <el-dropdown-item>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>

        <el-dropdown size="small" split-button type="primary">
            小型尺寸
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item>双皮奶</el-dropdown-item>
                <el-dropdown-item>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>

        <el-dropdown size="mini" split-button type="primary" trigger="click">
            超小尺寸
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item >黄金糕</el-dropdown-item>
                <el-dropdown-item divided>狮子头</el-dropdown-item>
                <el-dropdown-item divided>螺蛳粉</el-dropdown-item>
                <el-dropdown-item divided>双皮奶</el-dropdown-item>
                <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
    <script>
        new Vue({
            el:'#app',
            methods:{
                handleCommand(command) {
                    this.$message('click on item ' + command);
                }
            }
        });

    </script>
</body>
</html>

- size可以控制大小，可选值：medium / small / mini
  - type="primary"表示样式，可选值：primary / success / warning / danger / info / text
- trigger="click"设置点击展开 hover悬浮
- <el-dropdown-item divided>设置分割线

一个下拉菜单的标准写法：

	  <el-dropdown size="medium" split-button type="primary">
            中等尺寸
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item>双皮奶</el-dropdown-item>
                <el-dropdown-item>蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>

NavMenu导航菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-menu>
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span slot="title">导航一</span>
                </template>
                <el-menu-item>选项1</el-menu-item>
                <el-menu-item>选项2</el-menu-item>
                <el-menu-item>选项3</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span slot="title">导航二</span>
                </template>
                <el-menu-item>选项1</el-menu-item>
                <el-menu-item>选项2</el-menu-item>
                <el-menu-item>选项3</el-menu-item>
            </el-submenu>
        </el-menu>
    </div>
    <script>
        new Vue({
            el:'#app'
        });
    </script>
</body>
</html>

mode显示为水平或者垂直菜单，可选值：horizontal / vertical。

Message消息提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-button :plain="true" @click="open1">消息</el-button>
        <el-button :plain="true" @click="open2">成功</el-button>
        <el-button :plain="true" @click="open3">警告</el-button>
        <el-button :plain="true" @click="open4">错误</el-button>
        <script>
            new Vue({
                el:'#app',
                methods:{
                    open1() {
                        this.$message('这是一条消息提示');
                    },
                    open2() {
                        this.$message({
                            message: '恭喜你，这是一条成功消息',
                            type: 'success'
                        });
                    },
                    open3() {
                        this.$message({
                            message: '警告哦，这是一条警告消息',
                            type: 'warning'
                        });
                    },
                    open4() {
                        this.$message.error('错了哦，这是一条错误消息');
                        this.$message.success('恭喜你，这是一条成功消息')
                    }
                }
            });
        </script>
    </div>
</body>
</html>

当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，设置type字段可以定义不同的状态，默认为info。此时正文内容以message的值传入。同时，我们也为
Message 的各种 type
注册了方法，可以在不传入type字段的情况下像open4那样直接调用。可选值：success/warning/info/error
message指定消息内容

Tabs标签页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <h3>基础的、简洁的标签页</h3>
        <!--
            通过value属性来指定当前选中的标签页
        -->
        <el-tabs value="second">
            <el-tab-pane label="用户管理" name="first">用户管理...</el-tab-pane>
            <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
            <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
            <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
        </el-tabs>
        <h3>选项卡样式的标签页</h3>
        <el-tabs value="first" type="card">
            <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
            <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
            <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
            <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
        </el-tabs>
        <h3>卡片化的标签页</h3>
        <el-tabs value="first" type="border-card">
            <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
            <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
            <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
            <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
        </el-tabs>
        <script>
            new Vue({
                el:'#app',
                methods:{

                }
            });
        </script>
    </div>
</body>
</html>

value指定当前选中的页
type指定风格类型：card/border-card

君を見つけて

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
总结58 前端设计之基于Vue的ElementUI插件应用

概念ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。通俗来说,ElementUI不仅和BootStrap一样可以美化界面,它还能实现复杂的业务逻辑.应用ElementUI官网文档:https://element.eleme.cn/#/zh-CN/component/installation链接: h...
复制链接

扫一扫

专栏目录