elementUi——适合于Vue的UI框架_elmentui-程序员宅基地

简介

element-ui是一个ui库,它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。

Layout布局(el-row、el-col)

element-ui借用了bootstrap框架的思想,使用了栅格布局。它把单一的分栏分为24列。基本的使用方式如下

<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"></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"></div></el-col>
      </el-row>

span属性:表示col所要占领的栅格占比个数。
offset属性:表示col相对偏移的个数。

Container布局容器

这些布局容器,一般充当div来使用。

el-container:外层容器。当子元素中包含 el-header 或 el-footer 时,全部子元素会垂直上下排列,否则会水平左右排列。

el-header:顶栏容器

el-footer:底部栏容器

el-aside:侧边栏容器

el-main:页面主视图

icons的使用

在element-ui 中,图标是用class就可以搞定的。

比如一个编辑的图标就可以如下表示:

<i class="el-icon-edit"></i>

按钮(el-button)

按钮是el-button来表示的

按钮是分类的,每一种类型就对应不同的button。

按钮的类型type可取值:’primary’、’success’、’warning’、’info’、’danger’

plain:决定了按钮是否使用素色系列。

round:决定了按钮是不是圆角展示。

<div class="flex-box">
      <h2>各种button</h2>
      <el-row class="flex1 margin-left10">
        <el-col :span="3"><el-button>默认按钮</el-button></el-col>
        <el-col :span="3"><el-button type="primary">主要按钮</el-button></el-col>
        <el-col :span="3"><el-button type="success">成功按钮</el-button></el-col>
        <el-col :span="3"><el-button type="warning">警告按钮</el-button></el-col>
        <el-col :span="3"><el-button plain>默认按钮</el-button></el-col>
        <el-col :span="3"><el-button round>默认按钮</el-button></el-col>
      </el-row>
    </div>

级联选择(el-cascader)

这里写图片描述

//组件
<el-cascader
 :options="options"
  v-model="selectedOptions"
  @change="handleChange">
</el-cascader>
//data数据
options: [{
  value:'1',
  label:'components',
  children: [{
    label:'input'
  },{
    label:'swiper'
  }]
},{
  value:'1',
  label:'views'
},{
  value:'1',
  label:'actions'
}]

TimePicker 时间选择器

picker-options是一个对象。

这个对象的属性有start、step、end、selectableRange等。

当设置selectableRange属性时,它提供了一个时间选择的点。

<el-time-select
  v-model="value1"
  :picker-options="{
      start:'08:30',
      step:'00:15',
      end:'18:30'
  }"
  placeholder="选择时间"
></el-time-select>

日期选择器

日期选择器的type属性,决定选择的类型,这个type可以是date、week、month、year。

<el-date-picker
  v-model="valueDate"
  type="date"
  placeholder="选择日期">
</el-date-picker>
<el-date-picker
    type='week'
    v-model='value'
    placeholder='选择周'
>
</el-date-picker>

DateTimePicker 日期时间选择器

本质就是把type改为datetime。

<el-date-picker
 v-model="value1"
  type="datetime"
  placeholder="选择日期时间">
</el-date-picker>

form表单

element-ui的form表单组件:el-form

element-ui的formItem组件:el-form-item

一个简单的form表单的实现如下:

<el-form :model=''>
    <el-form-item label='用户名'>
        <el-input></el-input>
    </el-form-item>
    <el-form-item label='密码'>
        <el-input></el-input>
    </el-form-item>
</el-form>

form表单还有验证:form的rules就是用来验证使用。

Table 表格

el-table:element-ui的表格。

el-table-column:element-ui的表格所对应的列。

table属性中:stripe属性可以创建带斑马纹的表格。

table属性中:border属性可以创建带斑马纹的表格。

table属性中:height属性可实现固定表头的表格。

<el-table
   :data="tableData"
   style="width: 100%"
   height="200"
 >
   <el-table-column fixed width="120" label="日期" prop="date"></el-table-column>
   <el-table-column width="120" label="姓名" prop="name"></el-table-column>
   <el-table-column width="360" label="地址" prop="address"></el-table-column>
 </el-table>

其实就相当于一个轮播

type属性:可以让轮播卡片化

interval属性:定义轮播切换的周期

<el-carousel height="150px">
 <el-carousel-item v-for="item in 4" :key="item">
    <h3>{
    { item }}</h3>
  </el-carousel-item>
</el-carousel>

Collapse 折叠面板

折叠面板的el-collapse-item需要title属性。

<el-collapse-item title="一致性 Consistency" name="1">
  <div>与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;</div>
  <div>在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。</div>
</el-collapse-item>
el-menu

el-menu:表示导航菜单的盒子。
el-submenu:表示导航菜单的子盒子选项。
el-menu-item:表示导航菜单的每一项。

其中submenu和munuitem都是用于属性index。

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <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>
  <el-menu-item index="3">订单管理</el-menu-item>
</el-menu>
el-tabs
<el-tabs v-model="activeName">
    <el-tab-pane label="用户管理" name="first">
        用户管理
    </el-tab-pane>
</el-tabs>

Tree 树形控件

data属性:代表着树形组件的渲染。

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

Vue学习示例demo

在Vue的学习中,这个体系非常大,包括Vue生命周期、Vue的指令和事件、Vue的组件传值、Vuex、Vue-router等的使用。

一个Vue学习的基础示例的笔记:https://github.com/liwudi/Vue.git

Vue学习的项目演练

一个基于Vue、vuex、axios、vue-router的电商项目模板:
https://github.com/liwudi/VueProject.git

https://github.com/liwudi/manage-platform.git

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/mapbar_front/article/details/79102167

智能推荐

【caffe】Layer解读之:Reshape-程序员宅基地

文章浏览阅读5.9k次。Layer type: Reshape头文件位置:./include/caffe/layers/reshape_layer.hppCPU 执行源文件位置: ./src/caffe/layers/reshape_layer.cppReshape层的功能:根据给定参数改变输入blob的维度,仅仅改变数据的维度,但内容不变。参数解读 layer { name: &quot;resh...

xmpp协议分析-程序员宅基地

文章浏览阅读66次。连接服务器:SENT: &lt;stream:stream to="jabber.cn" xmlns="jabber:client" xmlns:stream="http://etherx.jabber.org/streams" version="1.0" &gt;RECV: &lt;?xml version='1.0'?&gt;&lt;stream:stream xmlns:strea

自动部署开源AI模型到生产环境:Sklearn、XGBoost、LightGBM、和PySpark_离线 开源ai模型 报表-程序员宅基地

文章浏览阅读3.2k次,点赞2次,收藏24次。介绍了如何通过DaaS-Client Python客户端自动部署开源AI模型到生产环境中:Sklearn、XGBoost、LightGBM和PySpark,并且在DaaS网络客户端管理这些模型和部署_离线 开源ai模型 报表

BloomFilter应用与D-Lelft BloomFilter实现_dleft hash bloomfilter-程序员宅基地

文章浏览阅读812次。此篇文章是开发过程中对BloomFilter应用场景的一些介绍,另外项目中实现了D-Left BloomFilter,相关实现时一些注意的地方,简单介绍下!首先看一些应用场景:1.海量的黑白名单。2.爬虫抓取时重复的URL处理。3.数据key是否存在检测4.(一些面试题几十亿不重复整数中判断其中一个整数是否存在的问题,BitMap/BloomFilter能很好的解决)。。。_dleft hash bloomfilter

利用递归函数调用方式,将所输入的五个字符,以相反顺序打印出来-程序员宅基地

文章浏览阅读1k次。递归void palin(int n);int main(){ int i=5; printf("please input 5 numbers:"); palin(i); printf("\n"); } void palin(int n){ char next; if(n<=1) { next=getchar(); printf("\n"); putchar(nex..._要求利 递归函数调 的 式,将获取到所输 的5个字符,以相反顺序分别输

工作中常用的Git命令整理_工作中常用git命令-程序员宅基地

文章浏览阅读384次。背景码农10年,git命令还是经常使用的,这里整理下常用的git命令,用于新人上手。常用git命令一览:从远端拉一个分支:git checkout -b accuse origin/accusegit push origin HEAD -u 【将新建分支推送到远端服务器】从当前分支拉一个分支:git checkout -b accuse创建分支 git checkout -b new_branch 注意,new_branch的代码来自于当前分支切换分_工作中常用git命令

随便推点

【数据结构 AOE网 求关键路径和关键活动】_求aoe网的关键路径和关键活动-程序员宅基地

文章浏览阅读1.5k次,点赞2次,收藏7次。数据结构 关键路径_求aoe网的关键路径和关键活动

dockerfile的COPY命令执行失败,source file must be relative to_dcokerfile 中 copy没有生效-程序员宅基地

文章浏览阅读6.3k次。dockerfile的COPY命令执行失败,source file must be relative to在我的dockerfile文件中COPY /tmp/pre.sh /tmp/pre.sh,我的dockerfile文件放到了/home目录下,执行docker build命令,就报错Source file /tmp/pre.sh must be relative to /home。这是什么_dcokerfile 中 copy没有生效

吴宗宪经典暴笑语录(笑不死你肯定是个异类) _吴宗宪我猜搞笑语录-程序员宅基地

文章浏览阅读2.3k次。吴宗宪经典暴笑语录(笑不死你肯定是个异类) 宪哥:下面请嘉宾们猜猜是什么东西嘉宾:何首乌宪哥:何首乌是一种乐器吗?一个几岁的小男孩反串花旦宪哥:唱歌仔戏都是女生,别人会不会以为你是女生?小孩:不会宪哥:你有弟弟吗?小孩:没有宪哥:你没有弟弟啊?没有弟弟是女生,男生有弟弟,小弟弟,有没有?小孩:没有宪哥:哦!是没带来吧宪哥:我宁愿要在我爱的人身边,我做牛做马都没有关系,只要我是爱她的阿雅_吴宗宪我猜搞笑语录

macbook 开发推荐_macbook 开发必备-程序员宅基地

文章浏览阅读447次。1. IDEPhpStorm,收费的但绝对物有所值,世界上有家公司叫JetBrains,他们开发的IDE都炒鸡好使,谁用谁知道 JetBrains IDEs to create a better Web: IntelliJ IDEA, ReSharper, RubyMine, WebStorm, PhpStorm, PyCharm2. 数据库ClientSequel Pro ,可以..._macbook 开发必备

一文概览主要语义分割网络,FCN、UNet、SegNet、DeepLab 等等等等应有尽有_语义分割网络有哪些-程序员宅基地

文章浏览阅读2.4k次。文章目录介绍 网络架构 Fully Convolution Networks (FCNs) 全卷积网络 SegNet U-Net DeepLab v1 DeepLab v2 DeepLab v3 Fully Convolutional DenseNet E-Net 和 Link-Net Mask R-CNN PSPNet RefineNet G-..._语义分割网络有哪些

PAT 1151 LCA in a Binary Tree(30 分)- 甲级_lca in a binary tree 柳婼-程序员宅基地

文章浏览阅读8.3k次,点赞47次,收藏17次。The lowest common ancestor (LCA) of two nodes U and V in a tree is the deepest node that has both U and V as descendants.Given any two nodes in a binary tree, you are supposed to find their LCA.In..._lca in a binary tree 柳婼

推荐文章

热门文章

相关标签