大家好，欢迎回到我们的Vue教学系列博客！在前十八篇博客中，我们学习了Vue.js的基础知识、安装Node.js与npm、使用Vue Devtools进行调试、Vue实例与生命周期钩子、数据绑定（单向与双向）、计算属性与侦听器、条件渲染和列表渲染、事件处理、组件之间的传值（props和$emit）、动态组件和异步组件、组件间的通信（provide/inject，event bus），探索并尝试安装一个基于Vue.js的UI框架------Element UI，以及学习如何使用Element UI的多种基础组件，如按钮、输入框、表格、弹窗、卡片、折叠面板、步骤条、时间线、走马灯、评分、级联选择器、树形选择器、颜色选择器和文件上传。今天，我们将继续深入探讨并学习如何使用Element UI的其他基础组件，以构建精致的Vue应用界面。无论你是Vue新手小白，还是有一定基础的开发者，掌握Element UI的基础组件都将大大提高你的开发效率。
目录
一、ElMenu：菜单组件
ElMenu组件用于创建菜单，常用于导航或选项选择。
html
<template>
<div>
<el-menu :default-active="activeIndex" mode="horizontal">
<el-menu-item index="1">首页</el-menu-item>
<el-menu-item index="2">产品</el-menu-item>
<el-menu-item index="3">关于我们</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
activeIndex: '1'
};
}
};
</script>在这个例子中，我们创建了一个简单的水平菜单，通过设置:default-active="activeIndex"属性，我们可以控制菜单的默认激活项。
二、ElSubmenu：子菜单组件
ElSubmenu组件用于创建子菜单，常用于组织菜单项或分组。
html
<template>
<div>
<el-menu :default-active="activeIndex" mode="vertical">
<el-submenu index="1">
<template slot="title">菜单1</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title">菜单2</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-submenu>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
activeIndex: '1'
};
}
};
</script>在这个例子中，我们创建了一个简单的垂直菜单，通过设置:default-active="activeIndex"属性，我们可以控制菜单的默认激活项。
三、ElInputNumber：数字输入组件
ElInputNumber组件用于创建数字输入，常用于数字输入或范围选择。
html
<template>
<div>
<el-input-number v-model="numberValue" :min="1" :max="10"></el-input-number>
</div>
</template>
<script>
export default {
data() {
return {
numberValue: 5
};
}
};
</script>在这个例子中，我们创建了一个简单的数字输入组件，通过设置v-model="numberValue"属性，我们可以控制数字输入的值。
四、ElRadio：单选按钮组件
ElRadio组件用于创建单选按钮，常用于单选或多选选择。
html
<template>
<div>
<el-radio-group v-model="radioValue">
<el-radio :label="1">选项1</el-radio>
<el-radio :label="2">选项2</el-radio>
<el-radio :label="3">选项3</el-radio>
</el-radio-group>
</div>
</template>
<script>
export default {
data() {
return {
radioValue: 1
};
}
};
</script>在这个例子中，我们创建了一个简单的单选按钮组，通过设置v-model="radioValue"属性，我们可以控制单选按钮的选中状态。
五、ElCheckbox：复选框组件
ElCheckbox组件用于创建复选框，常用于多选或多选选择。
html
<template>
<div>
<el-checkbox-group v-model="checkboxValue">
<el-checkbox label="选项1"></el-checkbox>
<el-checkbox label="选项2"></el-checkbox>
<el-checkbox label="选项3"></el-checkbox>
</el-checkbox-group>
</div>
</template>
<script>
export default {
data() {
return {
checkboxValue: ['选项1', '选项2']
};
}
};
</script>在这个例子中，我们创建了一个简单的复选框组，通过设置v-model="checkboxValue"属性，我们可以控制复选框的选中状态。
六、ElSwitch：开关组件
ElSwitch组件用于创建开关，常用于开启或关闭某些功能。
html
<template>
<div>
<el-switch v-model="switchValue"></el-switch>
</div>
</template>
<script>
export default {
data() {
return {
switchValue: true
};
}
};
</script>在这个例子中，我们创建了一个简单的开关组件，通过设置v-model="switchValue"属性，我们可以控制开关的状态。
七、ElSelect：选择器组件
ElSelect组件用于创建选择器，常用于下拉列表选择。
html
<template>
<div>
<el-select v-model="selectValue" placeholder="请选择">
<el-option label="选项1" value="选项1"></el-option>
<el-option label="选项2" value="选项2"></el-option>
<el-option label="选项3" value="选项3"></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
selectValue: '选项1'
};
}
};
</script>在这个例子中，我们创建了一个简单的下拉选择器，通过设置v-model="selectValue"属性，我们可以控制下拉列表的选择状态。
八、ElCascader：级联选择器组件
ElCascader组件用于创建级联选择器，常用于地区选择或分类选择。
html
<template>
<div>
<el-cascader v-model="cascaderValue" :options="cascaderOptions">
</el-cascader>
</div>
</template>
<script>
export default {
data() {
return {
cascaderValue: [],
cascaderOptions: [
{
value: 'zhejiang',
label: '浙江',
children: [
{
value: 'hangzhou',
label: '杭州'
},
{
value: 'nanjing',
label: '南京'
}
]
},
{
value: 'jiangsu',
label: '江苏',
children: [
{
value: 'shanghai',
label: '上海'
}
]
}
]
};
}
};
</script>在这个例子中，我们创建了一个简单的级联选择器，通过设置v-model="cascaderValue"属性，我们可以控制级联选择器的值。
九、ElSlider：滑块组件
ElSlider组件用于创建滑块，常用于调整数值或范围选择。
html
<template>
<div>
<el-slider v-model="sliderValue" :max="10" :min="0"></el-slider>
</div>
</template>
<script>
export default {
data() {
return {
sliderValue: 5
};
}
};
</script>在这个例子中，我们创建了一个简单的滑块组件，通过设置v-model="sliderValue"属性，我们可以控制滑块的值。滑块的:max和:min属性用于设置滑块的最大值和最小值。
十、ElRate：评分组件
ElRate组件用于创建评分组件，常用于商品评价或用户反馈。
html
<template>
<div>
<el-rate v-model="rateValue"></el-rate>
</div>
</template>
<script>
export default {
data() {
return {
rateValue: 4
};
}
};
</script>在这个例子中，我们创建了一个简单的评分组件，通过设置v-model="rateValue"属性，我们可以控制评分组件的值。
十一、ElCalendar：日历组件
ElCalendar组件用于创建日历，常用于日期选择或日期范围选择。
html
<template>
<div>
<el-calendar v-model="calendarValue"></el-calendar>
</div>
</template>
<script>
export default {
data() {
return {
calendarValue: new Date()
};
}
};
</script>在这个例子中，我们创建了一个简单的日历组件，通过设置v-model="calendarValue"属性，我们可以控制日历的选择状态。
十二、ElCarousel：走马灯组件
ElCarousel组件用于创建走马灯轮播图，常用于展示图片或广告。
html
<template>
<div>
<el-carousel interval="5000" arrow="always">
<el-carousel-item>
<h3>第一张</h3>
<p>描述信息</p>
</el-carousel-item>
<el-carousel-item>
<h3>第二张</h3>
<p>描述信息</p>
</el-carousel-item>
<!-- ... 省略其他轮播图项 -->
</el-carousel>
</div>
</template>在这个例子中，我们创建了一个简单的走马灯轮播图，通过设置interval属性，我们可以控制轮播图的切换间隔时间。
十三、ElTabs：标签页组件
ElTabs组件用于创建标签页，常用于分组内容或选项切换。
html
<template>
<div>
<el-tabs v-model="activeTab">
<el-tab-pane label="选项1" name="选项1">选项1的内容</el-tab-pane>
<el-tab-pane label="选项2" name="选项2">选项2的内容</el-tab-pane>
<el-tab-pane label="选项3" name="选项3">选项3的内容</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
data() {
return {
activeTab: '选项1'
};
}
};
</script>在这个例子中，我们创建了一个简单的标签页组件，通过设置v-model="activeTab"属性，我们可以控制标签页的激活状态。
十四、ElProgress：进度条组件
ElProgress组件用于创建进度条，常用于展示任务进度或加载状态。
html
<template>
<div>
<el-progress :percentage="progressValue"></el-progress>
</div>
</template>
<script>
export default {
data() {
return {
progressValue: 60
};
}
};
</script>在这个例子中，我们创建了一个简单的进度条组件，通过设置:percentage="progressValue"属性，我们可以控制进度条的完成百分比。
十五、ElBadge：徽章组件
ElBadge组件用于在元素上显示一个徽章，常用于标记未读消息或数量。
html
<template>
<div>
<el-button type="primary" :badge="unreadCount">消息</el-button>
<el-badge is-dot :value="unreadCount" class="item">
<el-button type="primary">消息</el-button>
</el-badge>
</div>
</template>
<script>
export default {
data() {
return {
unreadCount: 99
};
}
};
</script>在这个例子中，我们创建了一个带有徽章的按钮，徽章显示了未读消息的数量。通过设置:value="unreadCount"属性，我们可以控制徽章的显示值。
十六、ElTooltip：文字提示组件
ElTooltip组件用于在元素上显示文字提示，常用于显示提示信息或说明。
html
<template>
<div>
<el-button type="primary" plain>鼠标悬停我</el-button>
<el-tooltip class="item" effect="dark" :content="tooltipContent" placement="top">
<el-button type="primary" plain>鼠标悬停我</el-button>
</el-tooltip>
</div>
</template>
<script>
export default {
data() {
return {
tooltipContent: '这是一个文字提示'
};
}
};
</script>在这个例子中，我们创建了一个带有文字提示的按钮，当鼠标悬停在按钮上时，会显示提示信息。通过设置:content="tooltipContent"属性，我们可以控制文字提示的内容。
十七、ElPopover：弹出框组件
ElPopover组件用于在元素上显示一个弹出框，常用于显示详细信息或操作菜单。
html
<template>
<div>
<el-button type="primary" @click="popoverVisible = true">点击显示弹出框</el-button>
<el-popover
:visible.sync="popoverVisible"
placement="top"
title="弹出框标题"
width="200"
trigger="click">
<p>这是一段信息</p>
<el-button type="primary" size="mini" @click="popoverVisible = false">关闭弹出框</el-button>
</el-popover>
</div>
</template>
<script>
export default {
data() {
return {
popoverVisible: false
};
}
};
</script>在这个例子中，我们创建了一个简单的弹出框，通过设置:visible.sync="popoverVisible"属性，我们可以控制弹出框的显示和隐藏。弹出框的placement属性用于设置弹出框的位置，title属性用于设置弹出框的标题，width属性用于设置弹出框的宽度。
十八、ElDrawer：抽屉组件
ElDrawer组件用于在页面的一侧创建一个可滑出的抽屉，常用于显示侧边菜单或设置选项。
html
<template>
<div>
<el-button type="primary" @click="drawerVisible = true">打开抽屉</el-button>
<el-drawer
:visible.sync="drawerVisible"
:direction="direction"
:before-close="handleClose">
<span>这是一段信息</span>
<el-button type="primary" @click="drawerVisible = false">关闭抽屉</el-button>
</el-drawer>
</div>
</template>
<script>
export default {
data() {
return {
drawerVisible: false,
direction: 'rtl'
};
},
methods: {
handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
done();
})
.catch(_ => {});
}
}
};
</script>在这个例子中，我们创建了一个简单的抽屉组件，通过设置:visible.sync="drawerVisible"属性，我们可以控制抽屉的显示和隐藏。抽屉的direction属性用于设置抽屉的打开方向，before-close属性用于设置抽屉关闭前的钩子函数。
十九、ElBacktop：回到顶部组件
ElBacktop组件用于创建一个回到顶部的按钮，常用于长页面的滚动。
html
<template>
<div>
<div style="height: 500px;">
<el-backtop :bottom="100"></el-backtop>
</div>
</div>
</template>
<script>
export default {
data() {
return {
// 数据部分
};
}
};
</script>在这个例子中，我们创建了一个简单的回到顶部按钮，通过设置:bottom="100"属性，我们可以控制回到顶部按钮的距离底部的高度。
二十、总结
通过本博客的学习，我们深入了解了Element UI的多种基础组件，包括菜单、数字输入、单选按钮、复选框、开关、选择器、级联选择器、滑块、评分、日历、走马灯、标签页、进度条、徽章、文字提示、弹出框、抽屉和回到顶部组件。这些组件为Vue应用提供了丰富的交互方式和专业的外观，有助于提升应用的专业性和用户体验。
掌握Element UI的基础组件对于提高Vue.js应用的开发效率非常重要。它们不仅可以帮助我们节省时间，还能确保我们的应用拥有高质量的UI和交互性。希望这篇博客能帮助你深入理解Element UI的基础组件，并在实际项目中灵活运用。
如有任何疑问，欢迎在评论区留言讨论。让我们一起学习，共同进步！
感谢大家一直以来的支持和关注，我们下期博客再见！