Element UI使用

Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。由饿了么公司前端团队开源。跟boostrap差不多,有很多相似之处。

安装

它提供了通用的项目模板,你可以直接使用git clone到根目录下,再安装依赖包,最后直接运行即可。具体看这个连接,在此就不多说了。

Layout 布局

一响应式布局为例,在我们可以直接拉取官网代码,copy to App.vue组件中进行测试,如下:

<template>
    <div id="app">
        <el-row :gutter="10">
            <el-col :xs="8" :sm="6" :md="4" :lg="3">
                <div class="grid-content bg-purple">Agripeta de ferox torquis, captis amicitia!The unconditional world is full of faith.</div>
            </el-col>
            <el-col :xs="4" :sm="6" :md="8" :lg="9">
                <div class="grid-content bg-purple-light"><img src="./assets/logo.png">
                    <h1>{{ msg }}</h1>
                    <el-button @click.native="startHacking">Let's do it</el-button>
                </div>
            </el-col>
            <el-col :xs="4" :sm="6" :md="8" :lg="9">
                <div class="grid-content bg-purple">Everyone loves the keenness of cucumber soup jumbled with sweet sugar.</div>
            </el-col>
            <el-col :xs="8" :sm="6" :md="4" :lg="3">
                <div class="grid-content bg-purple-light">This devastation has only been invaded by a cloudy alien.</div>
            </el-col>
        </el-row>

    </div>
</template>

在浏览器中即可看到结果,在此想说的是,element UI 把 一个 row 分成24列(在bootstrap中是12列),因此在写的时候可以注意一下。

gutter——分隔栏间距——row

span——栅格占据的列数——col

offset——栅格左侧的间隔格数——col

push——栅格向右移动格数——col

pull——栅格向左移动格数——col

每一列的数据是我通过PHPstorm的一个plugin ——Dummy Text Generator ,这个插件对于测试数据非常棒。安装好之后,会添加到导航栏的Tools中,再到main menu中设计快捷键,

Button按钮

Button 组件默认提供7种主题,由type属性来定义,默认为default

<div class="grid-content bg-purple">
                    <el-button>默认按钮</el-button>
                    <el-button type="primary">主要按钮</el-button>
                    <el-button type="success" :disabled="true">文字按钮</el-button>
  </div>

总的来说element UI 设计是非常人性化的,从视觉上就给人一种凉爽感觉。

0 条评论
发表一条评论