官网: https://element.eleme.io/#/zh-CN

1
{% tip bell %}官方定义{% endtip %}

网站快速成型工具桌面端组件库

element ui 就是基于 vue 的一个 ui 框架,该框架基于 vue 开发了很多相关组件,方便我们快速开发页面。

由来

饿了么前端团队 基于 vue 进行开发并且进行了开源 element ui 中提供全部都是封装好组件。


安装 Element UI

vue 脚手架2.x创建项目
1
vue init webpack element(项目名)

在 vue 脚手架 2 项目中安装 elementui

1
2
3
4
5
6
7
8
9
10
11
# 1.下载 elementui 的依赖

npm i element-ui -S

# 2.在入口文件 main.js 指定当前项目中使用 elementui

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

//在 vue 脚手架中使用 elementui(在入口文件 main.js 指定)
Vue.use(ElementUI);
vue 脚手架3.x创建项目
1
vue vue create element-users(项目名)

image-20210522150110349

router 我个人还是喜欢使用history模式,如果使用hash模式请在 router 那项选择no

这样就算构建完成了,接下来我们安装 ElementUI

首先进入对应的目录

1
cd element-users(项目名)

然后执行

1
vue add element

image-20210522150857104

image-20210522151405586

image-20210522151607592

虽然报了一大堆错误,查了下好像是 node 版本什么的,还有说淘宝镜像的问题(可我根本没用。。),还有什么 npm 缓存啊什么的,稀奇古怪的,反正能用就行 QWQ

我们来看看 package.json

image-20210522151812605

证明是没有问题的

然后我们安装一下依赖,执行以下命令

1
npm install

安装完以后我们直接启动,执行以下命令

1
npm run serve

然后我们在 App.vue 中添加以下代码,测试一下 ElementUi

1
<el-button>我是按钮</el-button>

此时按钮正常显示,说明引入成功

关于默认颜色是这种绿色可以在 element-variables.scss 文件中修改

image-20210522152807142

image-20210522152823439

改成 #409eff 就和官网一致了

按钮组件(示例)

image-20210522150219315

  1. 默认样式按钮

    1
    2
    3
    4
    5
    6
    7
    8
    <el-row>
    <el-button>默认按钮</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>
  2. 简洁按钮

    1
    2
    3
    4
    5
    6
    7
    8
    <el-row>
    <el-button plain>朴素按钮</el-button>
    <el-button type="primary" plain>主要按钮</el-button>
    <el-button type="success" plain>成功按钮</el-button>
    <el-button type="info" plain>信息按钮</el-button>
    <el-button type="warning" plain>警告按钮</el-button>
    <el-button type="danger" plain>危险按钮</el-button>
    </el-row>
  3. 圆角按钮

    1
    2
    3
    4
    5
    6
    7
    8
    <el-row>
    <el-button round>圆角按钮</el-button>
    <el-button type="primary" round>主要按钮</el-button>
    <el-button type="success" round>成功按钮</el-button>
    <el-button type="info" round>信息按钮</el-button>
    <el-button type="warning" round>警告按钮</el-button>
    <el-button type="danger" round>危险按钮</el-button>
    </el-row>
  4. 图标按钮

    1
    2
    3
    4
    5
    6
    7
    8
    <el-row>
    <el-button icon="el-icon-search" circle></el-button>
    <el-button type="primary" icon="el-icon-edit" circle></el-button>
    <el-button type="success" icon="el-icon-check" circle></el-button>
    <el-button type="info" icon="el-icon-message" circle></el-button>
    <el-button type="warning" icon="el-icon-star-off" circle></el-button>
    <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </el-row>
  5. 按钮组件的详细使用

    1
    总结:日后使用 element ui 的相关组件时需要注意的是 所有组件都是 el-组件名称开头
  6. 创建按钮

    1
    <el-button>默认按钮</el-button>
  7. 按钮属性使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <el-button type="primary" 属性名="属性值">默认按钮</el-button>
    <el-button
    type="success"
    size="medium"
    plain="true"
    round
    circle
    icon="el-icon-loading"
    ></el-button>

    总结:在elementui中所有组件的属性全部写在组件标签上

  8. 按钮组使用

    1
    2
    3
    4
    <el-button-group>
    <el-button type="primary" icon="el-icon-back">上一页</el-button>
    <el-button type="primary" icon="el-icon-right">下一页</el-button>
    </el-button-group>

注意:

  • 在 element ui 中所有组件都是 el-组件名称 方式进行命名
  • 在 element ui 中组件的属性使用都是直接将属性名=属性值方式写在对应的组件标签上

  1. 文字链接组件的创建

    1
    <el-link>默认链接</el-link>
  2. 文字链接组件的属性的使用

    1
    2
    3
    4
    5
    6
    <el-link target="_blank" href="http://www.baidu.com">默认链接</el-link>
    <el-link type="primary" :underline="false">默认链接</el-link>
    <el-link type="success" disabled>默认链接</el-link>
    <el-link type="info" icon="el-icon-platform-eleme">默认链接</el-link>
    <el-link type="warning">默认链接</el-link>
    <el-link type="danger">默认链接</el-link>

Layout (栅格)布局组件的使用

通过基础的 24 分栏,迅速简便地创建布局

在element ui中布局组件将页面划分为多个行row,每行最多分为24栏(列)

  1. 使用 Layout 组件

    1
    2
    3
    4
    5
    <el-row>
    <el-col :span="8">占用8份</el-col>
    <el-col :span="8">占用8份</el-col>
    <el-col :span="8">占用8份</el-col>
    </el-row>

    注意:

    • 在一个布局组件中 是由 rowcol 组合而成
    • 在使用时要区分 row属性col属性
  2. 属性的使用

    行属性使用

    1
    2
    3
    4
    5
    6
    <el-row :gutter="50" tag="span">
    <el-col :span="4"><div style="border: 1px red solid;">占用4份</div></el-col>
    <el-col :span="8"><div style="border: 1px red solid;">占用8份</div></el-col>
    <el-col :span="3"><div style="border: 1px red solid;">占用3份</div></el-col>
    <el-col :span="9"><div style="border: 1px red solid;">占用9份</div></el-col>
    </el-row>

    列属性的使用

    1
    2
    3
    4
    5
    6
    <el-row>
    <el-col :span="12" :offset="9" :psuh="3" xs>
    <div style="border: 1px blue solid;">我是占用12分</div>
    </el-col>
    <el-col :span="6"><div style="border: 1px blue solid;">我是占用6分</div></el-col>
    </el-row>

Container 布局容器组件

创建布局容器

1
<el-container></el-container>

容器中包含的子元素

1
2
3
4
5
6
7
8
9
10
<el-header>
:顶栏容器。
<el-aside>
:侧边栏容器。
<el-main>
:主要区域容器。
<el-footer>:底栏容器。</el-footer>
</el-main>
</el-aside>
</el-header>

容器的嵌套使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!--创建容器-->
<el-container>
<!--header-->
<el-header>
<div><h1>我是标题</h1></div>
</el-header>
<!--容器嵌套使用-->
<el-container>
<!--aside-->
<el-aside>
<div><h1>我是菜单</h1></div>
</el-aside>
<!--main-->
<el-main>
<div><h1>我是中心内容</h1></div>
</el-main>
</el-container>
<el-footer>
<div><h1>我是页脚</h1></div>
</el-footer>
</el-container>

水平容器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<el-container direction="horizontal">
<!--header-->
<el-header>
<div><h1>我是标题</h1></div>
</el-header>
<el-container>
<!--aside-->
<el-aside>
<div><h1>我是菜单</h1></div>
</el-aside>
<!--main-->
<el-main>
<div><h1>我是中心内容</h1></div>
</el-main>
</el-container>
<el-footer>
<div><h1>我是页脚</h1></div>
</el-footer>
</el-container>

注意:当子元素中没有有 el-header 或 el-footer 时容器排列为水平

垂直容器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<el-container direction="vertical">
<!--header-->
<el-header>
<div><h1>我是标题</h1></div>
</el-header>
<el-container>
<!--aside-->
<el-aside>
<div><h1>我是菜单</h1></div>
</el-aside>
<!--main-->
<el-main>
<div><h1>我是中心内容</h1></div>
</el-main>
</el-container>
<!--footer-->
<el-footer>
<div><h1>我是页脚</h1></div>
</el-footer>
</el-container>

Form 相关组件

Radio 单选按钮

  1. 创建 Radio 按钮

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!--组件创建-->
    <el-radio v-model="label" label="男"></el-radio>
    <el-radio v-model="label" label="女"></el-radio>
    <script>
    export default {
    name: 'Radio',
    data() {
    return {
    label: '男',
    }
    },
    }
    </script>

    注意:在使用radio单选按钮是至少加入v-model和label两个属性

  2. Radio 按钮属性的使用

    1
    2
    3
    4
    <el-radio v-model="label" name="sex" disabled label="男"></el-radio>
    <el-radio v-model="label" name="sex" border size="small" label="女"></el-radio>
    <el-radio v-model="label" border size="mini" label="女"></el-radio>
    <el-radio v-model="label" border size="medium" label="女"></el-radio>

    总结:属性使用还是直接卸载对应的组件标签上以 属性名=属性值 方式使用

  3. Radio 事件的使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <el-radio v-model="label" @change="aa" name="sex" label="男"></el-radio>
    <el-radio v-model="label" @change="aa" name="sex" border size="small" label="女"></el-radio>

    <script>
    export default {
    name: 'Radio',
    data() {
    return {
    label: '男',
    }
    },
    methods: {
    aa() {
    //定义的事件处理函数
    console.log(this.label)
    },
    },
    }
    </script>

总结:

  • 事件的使用也是和属性使用是一致都是直接写在对应的组件标签上
  • 事件在使用时必须使用 Vue 中绑定时间方式进行使用如 \@事件名=事件处理函数(绑在在 vue 组件中对应函数)

radio 按钮组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<el-radio-group v-model="radio">
<el-radio :label="3">备选项3</el-radio>
<el-radio :label="6">备选项6</el-radio>
<el-radio :label="9">备选项9</el-radio>
</el-radio-group>
<script>
export default {
name: 'Radio',
data() {
return {
radio: 6,
}
},
}
</script>

checkbox 组件

  1. 创建 checkbox 组件

    1
    2
    3
    <el-checkbox v-model="checked">北京</el-checkbox>
    <el-checkbox v-model="checked">上海</el-checkbox>
    <el-checkbox v-model="checked">天津</el-checkbox>
  2. 属性使用

    1
    2
    3
    <el-checkbox v-model="checked" disabled true-label="北京">北京</el-checkbox>
    <el-checkbox checked border true-label="上海">上海</el-checkbox>
    <el-checkbox v-model="checked" true-label="天津">天津</el-checkbox>
  3. 事件使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <el-checkbox @change="aa" v-model="checked" true-label="上海">上海</el-checkbox>
    <el-checkbox v-model="checked" @change="aa" true-label="天津">天津</el-checkbox>
    <script>
    export default {
    name: 'Checkbox',
    data() {
    return {
    checked: true,
    }
    },
    methods: {
    aa() {
    console.log(this.checked)
    },
    },
    }
    </script>

复选框组的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<el-checkbox-group @change="bb" :min="1" v-model="checkList">
<el-checkbox label="复选框 A"></el-checkbox>
<el-checkbox label="复选框 B"></el-checkbox>
<el-checkbox label="复选框 C"></el-checkbox>
<el-checkbox label="禁用" disabled></el-checkbox>
<el-checkbox label="选中且禁用" disabled></el-checkbox>
</el-checkbox-group>
<script>
export default {
name: 'Checkbox',
data() {
return {
checked: true,
checkList: [],
}
},
methods: {
aa() {
console.log(this.checked)
},
bb() {
console.log(this.checkList)
},
},
}
</script>

Input 输入框组件

创建 Input 组件

1
2
3
4
5
6
7
8
9
10
11
<el-input v-model="name"></el-input>
<script>
export default {
name: 'Input',
data() {
return {
name: '安知鱼',
}
},
}
</script>
  1. 常用属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <el-input v-model="name" disabled type="textarea"></el-input>
    <el-input v-model="price" :maxlength="10" show-word-limit :minlength="5"></el-input>
    <el-input
    prefix-icon="el-icon-user-solid"
    placeholder="请输入用户名"
    clearable
    v-model="username"
    ></el-input>
    <el-input
    suffix-icon="el-icon-star-off"
    placeholder="请输入密码"
    show-password
    type="password"
    clearable
    v-model="password"
    ></el-input>
    <script>
    export default {
    name: 'Input',
    data() {
    return {
    restaurants: [],
    state1: '',
    state2: '',
    name: '安知鱼',
    price: 0.0,
    username: '',
    password: '',
    }
    },
    }
    </script>
  2. 事件使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    <el-input
    v-model="username"
    @blur="aaa"
    @focus="bbb"
    @clear="clears"
    clearable
    @input="ccc"
    ></el-input>
    <script>
    export default {
    name: 'Input',
    data() {
    return {
    restaurants: [],
    state1: '',
    state2: '',
    name: '安知鱼',
    price: 0.0,
    username: '',
    password: '',
    }
    },
    methods: {
    aaa() {
    console.log('失去焦点')
    },
    bbb() {
    console.log('获取焦点')
    },
    ccc(value) {
    console.log('改变:' + value)
    },
    clears() {
    console.log('清除')
    },
    },
    }
    </script>
  3. 方法的使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <h1>方法的使用</h1>
    <el-input v-model="username" ref="inputs"></el-input>

    <el-button @click="focusInputs">focus方法</el-button>
    <el-button @click="blurInputs">blur方法</el-button>

    <script>
    export default {
    name: 'Input',
    data() {
    return {}
    },
    methods: {
    //调用focus方法
    focusInputs() {
    this.$refs.inputs.focus()
    },
    //调用失去焦点方法
    blurInputs() {
    this.$refs.inputs.blur()
    },
    },
    }
    </script>

总结

  • 在使用组件的方法时需要在对应的组件中加入 ref="组件别名"
  • 在调用方法时直接使用 this.$refs.组件别名.方法名()

注意:在elementui中所有组件 都存在 属性 事件 和方法

属性:直接写在对应的组件标签上 使用方式:属性名=属性值方式

事件: 直接使用 vue 绑定事件方式写在对应的组件标签上 使用方式:@事件名=vue中事件处理函数

方法: 1.在对应组件标签上使用ref=组件别名 2.通过使用this.$refs.组件别名.方法名()进行调用

Select 选择器组件的使用

  1. 组件创建

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    # 1.数据写死在页面上

    <el-select v-model="cityName">
    <el-option value="北京">北京</el-option>
    <el-option value="天津">天津</el-option>
    </el-select>
    注意:1.要求下拉列表中必须存在option的value属性值 2.要求select中必须使用v-model进行数据绑定

    # 2.如何动态获取数据

    <el-select>
    <el-option v-for="option in options" :label="option.name" :value="option.id" :key="option.id">
    </el-option>
    </el-select>

    <script>
    export default {
    name: "Select",
    data(){
    return{
    options:[
    {id:'1',name:"研发部"},
    {id:'2',name:"小卖部"},
    {id:'3',name:"小米部"},
    ]
    }
    },
    }
    </script>

    # 3.获取下拉列表选中数据

    <el-select v-model="cityId" multiple clearable>
    <el-option v-for="option in options" :label="option.name" :value="option.id" :key="option.id"></el-option>
    </el-select>
    <script>
    export default {
    name: "Select",
    data(){
    return{
    options:[
    {id:'1',name:"研发部"},
    {id:'2',name:"小卖部"},
    {id:'3',name:"小米部"},
    ],
    cityId:''
    }
    },
    }
    </script>
  2. 属性使用

    1
    <el-select v-model="cityId" multiple clearable>......</el-select>
  3. 事件的使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    <el-select v-model="cityId" @change="aaa" multiple clearable>
    <el-option
    v-for="option in options"
    :label="option.name"
    :value="option.id"
    :key="option.id"
    ></el-option>
    </el-select>
    <script>
    export default {
    name: 'Select',
    data() {
    return {
    options: [
    { id: '1', name: '研发部' },
    { id: '2', name: '小卖部' },
    { id: '3', name: '小米部' },
    ],
    cityId: '',
    cityName: '',
    }
    },
    methods: {
    aaa(value) {
    console.log(value)
    },
    },
    }
    </script>
  4. 方法的使用

    1
    2
    3
    1.给组件通过ref起别名并绑定到vue实例中
    <el-select ref="selects" v-model="cityId" @change="aaa" multiple clearable>....</el-select>
    2.调用方法 this.$refs.selects.focus();//方法调用

Switch 开关组件

Switch 组件的创建

1
2
3
4
5
6
7
8
9
10
11
<el-switch v-model="value"></el-switch>
<script>
export default {
name: 'Switchs',
data() {
return {
value: true,
}
},
}
</script>
  1. 属性使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <el-switch
    v-model="value"
    active-text="打开"
    active-color="#13ce66"
    inactive-color="#ff4949"
    :active-
    value="true"
    :inactive-value="false"
    inactive-text="关闭"
    :width="200"
    ></el-switch>
  2. 事件使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <el-switch v-model="value" @change="aaa"></el-switch>
    <script>
    export default {
    name: 'Switchs',
    data() {
    return {
    value: true,
    }
    },
    methods: {
    aaa(value) {
    console.log(value)
    },
    },
    }
    </script>
  3. 方法使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <el-switch
    ref="sw"
    v-model="value"
    @change="aaa"
    active-text="打开"
    active-color="#13ce66"
    inactive-color="#ff4949"
    :active-value="true"
    :inactive-value="false"
    inactive-text="关闭"
    :width="200"
    ></el-switch>
    <el-button @click="bbb">调用方法</el-button>

    <script>
    export default {
    name: 'Switchs',
    data() {
    return {
    value: true,
    }
    },
    methods: {
    aaa(value) {
    console.log(value)
    },
    bbb() {
    alert()
    this.$refs.sw.focus() //方法调用
    },
    },
    }
    </script>

DatePicker 组件

创建

1
<el-date-picker v-model="createDate"></el-date-picker>
  1. 属性的使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <el-date-picker
    v-model="createDate"
    :editable="false"
    :clearable="false"
    placeholder="请输入创建时间"
    type="daterange"
    start-placeholder="生产时间"
    end-placeholder="过期时间"
    format="yyyy/MM/dd"
    ></el-date-picker>
  2. Picker Options 和 Shortcuts 使用

    • Shortcuts: 用来增加日期组件的快捷面板
    • Picker Options: 用来对日期控件做自定义配置
  3. Shortcuts 使用

  4. ```html
    </el-date-picker>

    日期配置


    <el-date-picker

                v-model="createDate"
                type="date"
                placeholder="请输入时间"
                :picker-options="pickerOptions"
                >
    

    </el-date-picker>