必威体育Betway必威体育官网
当前位置：首页 > IT技术

element-ui入门

时间:2019-08-26 17:41:04来源:IT技术作者:seo实验室小编阅读:69次「手机版」
　

element-ui

简介

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

其设计原则为：

一致性 Consistency

  1. 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
  2. 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

反馈 Feedback

  1. 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
  2. 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。

效率 Efficiency

  1. 简化流程：设计简洁直观的操作流程；
  2. 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
  3. 帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

可控 Controllability

  1. 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
  2. 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

layout布局（el-row、el-col）

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

<el-row>
        <el-col :span="6"><p class="grid-content bg-purple"></p></el-col>
        <el-col :span="6"><p class="grid-content bg-purple"></p></el-col>
        <el-col :span="6"><p class="grid-content bg-purple"></p></el-col>
        <el-col :span="6"><p class="grid-content bg-purple"></p></el-col>
      </el-row>

span属性：表示col所要占领的栅格占比个数。 

offset属性：表示col相对偏移的个数。

Container布局容器

这些布局容器，一般充当p来使用。

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

el-header：顶栏容器

el-footer：底部栏容器

el-aside：侧边栏容器

el-main：页面主视图

icons的使用

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

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

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

1

按钮（el-button）

按钮是el-button来表示的

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

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

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

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

<p 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>
    </p>

级联选择（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>

Carousel 走马灯

其实就相当于一个轮播

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">
  <p>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</p>
  <p>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</p>
</el-collapse-item>

navigation 导航

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>

完整组件列表和引入方式

import Vue from 'vue';
import {
  Pagination,
  Dialog,
  Autocomplete,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Input,
  InputNumber,
  Radio,
  radiogroup,
  radiobutton,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Switch,
  Select,
  Option,
  OptionGroup,
  Button,
  ButtonGroup,
  Table,
  TableColumn,
  DatePicker,
  TimeSelect,
  TimePicker,
  Popover,
  Tooltip,
  Breadcrumb,
  BreadcrumbItem,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Tag,
  Tree,
  alert,
  Slider,
  Icon,
  Row,
  Col,
  Upload,
  progress,
  Badge,
  Card,
  Rate,
  Steps,
  Step,
  Carousel,
  CarouselItem,
  Collapse,
  CollapseItem,
  Cascader,
  colorPicker,
  Transfer,
  Container,
  Header,
  Aside,
  Main,
  Footer,
  Loading,
  messageBox,
  Message,
  notification
} from 'element-ui';

Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Autocomplete);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Checkbox);
Vue.use(CheckboxButton);
Vue.use(CheckboxGroup);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(Button);
Vue.use(ButtonGroup);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(DatePicker);
Vue.use(TimeSelect);
Vue.use(TimePicker);
Vue.use(Popover);
Vue.use(Tooltip);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Tag);
Vue.use(Tree);
Vue.use(Alert);
Vue.use(Slider);
Vue.use(Icon);
Vue.use(Row);
Vue.use(Col);
Vue.use(Upload);
Vue.use(Progress);
Vue.use(Badge);
Vue.use(Card);
Vue.use(Rate);
Vue.use(Steps);
Vue.use(Step);
Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Cascader);
Vue.use(ColorPicker);
Vue.use(Transfer);
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Footer);

Vue.use(Loading.directive);

Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;

相关阅读

element-ui中按需引入

这里写自定义目录标题element-ui中按需引入为什么选择 element-ui 而不是 iview1、按需引入1. 借助 babel-plugin-component，我们

赞()
分享到:

猜你喜欢

栏目导航

推荐阅读

热门阅读

seo实验室提供seo优化服务，有网站优化、网站建设、运营推广等需求请联系我们!
Copyright © 2001-2017 .seo实验室 版权所有 网站地图