element-ui框架使用

element-ui框架使用

介绍

可以类似bootstrap，但是是基于vue的，饿了么团队开发。

element官方文档（点我）

安装：前端项目目录下的终端

>: cnpm i element-ui -S	

配置：main.js

// 配置element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

使用：任何组件的模板中都可以使用 - 详细使用见官方文档

<template>
    <div class="e-ui">
        <Nav></Nav>
        <h1>element-ui</h1>
        <hr>

        <el-row :gutter="10">
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="10" :offset="2">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>

        <el-container>
            <el-main>
                <el-row :gutter="10">
                    <el-col :sm="18" :md="12" :lg="6">
                        <div class="grid-content bg-purple"></div>
                    </el-col>
                    <el-col :sm="6" :md="12" :lg="18">
                        <div class="grid-content bg-purple"></div>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>

        <el-row>
            <i class="el-icon-platform-eleme"></i>
            <el-button type="primary" @click="alertAction1">信息框</el-button>
            <el-button type="success" @click="alertAction2">弹出框</el-button>
        </el-row>
    </div>
</template>

<script>
    import Nav from '@/components/Nav'

    export default {
        name: "EUI",
        components: {
            Nav
        },
        methods: {
            alertAction1() {
                this.$message({
                    type: 'success',
                    message: 'message信息',
                })
            },
            alertAction2() {
                this.$alert('内容...', '标题')
            },
        }
    }
</script>

<style scoped>
    .e-ui {
        width: 100%;
        height: 800px;
        background: pink;
    }

    h1 {
        text-align: center;
    }

    .grid-content {
        height: 40px;
        background-color: brown;
        margin-bottom: 10px;
    }

    i {
        font-size: 30px;
    }
</style>