迪丽热-BUG

起步

NO.1布局

头/侧边栏+主体/底部

<el-container>
	<el-header>header</el-header>
  <el-container>
    <el-aside>sidebar</el-aside>
    <el-main>Main</el-main>
  </el-container>
</el-container>
1
2
3
4
5
6
7

NO.2投影

基础

 box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
1

浅色

 box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
1

NO.3按钮

<el-row>
  <el-button>默认按钮</el-button>
  <el-button plain>边框内浅色背景深色字体按钮</el-button>
  <el-button round>圆角按钮</el-button>
   <el-button icon="el-icon-search" circle></el-button>
  
  <el-button type="primary">蓝色</el-button>
  <el-button type="success">绿色</el-button>
  <el-button type="info">灰色</el-button>
  <el-button type="warning">黄</el-button>
  <el-button type="danger">红</el-button>
</el-row>
1
2
3
4
5
6
7
8
9
10
11
12

NO.4输入框

基础

<el-input v-model="input" placeholder="请输入内容"></el-input>
1

可清空

<el-input
  placeholder="请输入内容"
  v-model="input"
  clearable>
</el-input>
1
2
3
4
5

密码框

<el-input placeholder="请输入密码" v-model="input" show-password></el-input>
1

限制长度的文本框

<el-input
  type="textarea"
  placeholder="请输入内容"
  v-model="textarea"
  maxlength="30"
  show-word-limit
>
</el-input>
1
2
3
4
5
6
7
8

NO.5表单

基本格式

代码框中的绑定事件和绑定规则自定义

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="密码" prop="pass">
    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="checkPass">
    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age">
    <el-input v-model.number="ruleForm.age"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

如何书写规则

rules: {
  pass: [
    { validator: [事件名称], trigger: 'blur' }
  ],
  checkPass: [
    { validator: validatePass2, trigger: 'blur' }
  ],
  age: [
    { validator: checkAge, trigger: 'blur' }
  ]
}

var validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'));
  } else if (value !== this.ruleForm.pass) {
    callback(new Error('两次输入密码不一致!'));
  } else {
    callback();
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

NO.6导航栏

<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 index="2-4">
        <template slot="title">选项4</template>
        <el-menu-item index="2-4-1">选项1</el-menu-item>
        <el-menu-item index="2-4-2">选项2</el-menu-item>
        <el-menu-item index="2-4-3">选项3</el-menu-item>
      </el-submenu>
    </el-submenu>
  </el-menu-item>
</el-menu>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

NO.7 TAB

<template>
  <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
    <el-radio-button label="top">top</el-radio-button>
    <el-radio-button label="right">right</el-radio-button>
    <el-radio-button label="bottom">bottom</el-radio-button>
    <el-radio-button label="left">left</el-radio-button>
  </el-radio-group>

  <el-tabs :tab-position="tabPosition" style="height: 200px;">
    <el-tab-pane label="用户管理">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
  </el-tabs>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

HTML 代码风格 →