德州建设公司网站,金华手机模板建站,开通微网站,google广告投放技巧基础组件
Button 按钮
一、基础用法
el-button默认按钮/el-button
el-button typeprimary主要按钮/el-button二、按钮类型 (type)
类型说明示例代码default默认按钮el-button默认/el-buttonprimary主要按钮el-button默认按钮/el-button
el-button typeprimary主要按钮/el-button二、按钮类型 (type)
类型说明示例代码default默认按钮el-button默认/el-buttonprimary主要按钮蓝色el-button typeprimarysuccess成功按钮绿色el-button typesuccesswarning警告按钮黄色el-button typewarningdanger危险按钮红色el-button typedangerinfo信息按钮灰色el-button typeinfotext文字按钮el-button typetext
三、核心属性详解 size - 按钮尺寸 el-button sizelarge大型/el-button
el-button sizedefault默认/el-button
el-button sizesmall小型/el-buttonicon - 图标按钮 el-button iconel-icon-search搜索/el-button
el-button iconel-icon-edit circle / !-- 圆形图标按钮 --disabled - 禁用状态 el-button disabled不可点击/el-buttonloading - 加载状态 el-button :loadingtrue加载中/el-buttonround - 圆角按钮 el-button round圆角按钮/el-buttonplain - 朴素样式无背景色 el-button plain朴素按钮/el-buttonlink - 链接样式 el-button typeprimary link链接按钮/el-buttoncircle - 圆形按钮 el-button iconel-icon-plus circle /autofocus - 自动聚焦 el-button autofocus自动聚焦/el-buttonnative-type - 原生按钮类型 el-button native-typesubmit提交表单/el-button
!-- 可选值: button / submit / reset --color-自定义按钮颜色 le-button typeprimary color#123456自定义颜色/el-button四、特殊按钮 文字按钮组 el-button typetext首页/el-button
el-button typetext disabled禁用文字按钮/el-button图标文字组合 el-button下载 el-iconDownload //el-icon
/el-button按钮组 (el-button-group) el-button-groupel-button iconel-icon-arrow-left上一页/el-buttonel-button下一页 i classel-icon-arrow-right/i/el-button
/el-button-group五、完整属性表
属性说明类型可选值默认值type按钮类型stringprimary/success/warning/danger/info/textdefaultsize尺寸stringlarge/default/smalldefaulticon图标组件Component / string-—native-type原生 type 属性stringbutton / submit / resetbuttonloading加载状态boolean—falsedisabled禁用状态boolean—falseplain朴素样式boolean—falseround圆角按钮boolean—falsecircle圆形按钮boolean—falselink链接按钮boolean—falseautofocus自动聚焦boolean—falseloading-icon自定义加载图标Component / string-Loading提示所有图标需先导入 element-plus/icons-vue可通过 Element Plus 图标文档 查询可用图标 Border 边框
一、基础使用
在元素上直接添加以下类名即可生效无需额外导入 CSS
类名作用el-border添加全方向1px边框el-border-top仅添加上边框el-border-left仅添加左边框el-border-bottom仅添加下边框el-border-right仅添加右边框el-border-0移除全部边框
示例代码
div classel-border全边框容器/div
div classel-border-top上边框标题/div二、边框粗细控制
通过组合类名精确控制边框粗细
类名作用el-border-base默认1px边框同.el-borderel-border-thin0.5px超细边框el-border-thick2px粗边框
使用示例
div classel-border el-border-thick粗边框容器/div
div classel-border-top el-border-base标准上边框/div三、边框样式定制
支持多种边框样式与其他属性组合使用
类名作用el-border-solid实线默认el-border-dashed虚线el-border-dotted点状线el-border-double双实线
高级组合示例
div classel-border el-border-dashed el-border-thick粗虚线边框/div
div classel-border-bottom el-border-dotted点状下划线/div四、边框颜色控制
使用语义化颜色类名需激活主题色
类名颜色说明el-border-primary主题主色默认蓝el-border-success成功绿色el-border-warning警告黄色el-border-danger危险红色el-border-info信息灰色
带颜色的边框示例
div classel-border el-border-success成功提示框/div
div classel-border-top el-border-warning警告上边框/div提示在 app.vue 中设置主题色 import { createApp } from vue
import ElementPlus from element-plusconst app createApp(App)
app.use(ElementPlus, { color: #ff4500 // 自定义主题色
})五、圆角控制
完整圆角控制解决方案
类名作用el-border-radius-base默认圆角4pxel-border-radius-small小圆角2pxel-border-radius-round大圆角20pxel-border-radius-circle圆形50%
圆角组合示例
div classel-border el-border-radius-base标准圆角卡片/div
button classel-border el-border-radius-circle圆形按钮/divContainer 布局容器
一、容器组件架构
el-container !-- 根容器管理整体布局流 --el-header/el-header !-- 顶栏页面头部 --el-aside/el-aside !-- 侧栏导航菜单区 --el-main/el-main !-- 主区核心内容容器 --el-footer/el-footer !-- 底栏页面底部信息 --
/el-container组件特性自动实现 Flex 弹性布局无需手动编写 flex 属性 二、核心组件 API 详解
1. el-container 根容器
参数类型默认值说明directionvertical/horizontalhorizontal子元素的排列方向事件说明scroll容器滚动时触发
2. el-header 顶栏
参数类型默认值说明heightstring/number60px设置高度支持任何 CSS 单位插槽说明default自定义头部内容
3. el-aside 侧边栏
参数类型默认值说明widthstring/number300px设置宽度collapsebooleanfalse折叠状态事件说明collapse-change折叠状态变化时触发
4. el-main 主内容区
特性说明自动特性自动填充剩余空间并生成垂直滚动条插槽default 区域用于放置页面核心内容
5. el-footer 底栏
参数类型默认值heightstring/number60px
三、三种经典布局方案
方案1上下布局管理后台常用
el-container directionverticalel-header系统标题/el-headerel-containerel-aside width200px菜单导航/el-asideel-main数据看板/el-main/el-container
/el-container方案2左右布局文档类页面
el-containerel-aside width240px文档目录/el-asideel-container directionverticalel-header当前章节标题/el-headerel-main文档内容/el-mainel-footer版权信息/el-footer/el-container
/el-container方案3顶部主导航二级侧栏
el-container directionverticalel-header主导航栏/el-headerel-containerel-aside width180px二级导航/el-asideel-container directionverticalel-main主体内容/el-mainel-footer操作指引/el-footer/el-container/el-container
/el-container四、高级开发技巧
1. 动态侧边栏带折叠动画
script setup
import { ref } from vue
const isCollapsed ref(false)
/scripttemplateel-aside :widthisCollapsed ? 64px : 240pxcollapse-changeisCollapsed $eventel-button clickisCollapsed !isCollapsed{{ isCollapsed ? 展开 : 折叠 }}/el-buttontransition nameel-fade-in-lineardiv v-show!isCollapsed导航内容/div/transition/el-aside
/template2. 悬浮顶栏滚动时固定
/* 全局样式 */
.el-header {position: sticky;top: 0;z-index: 1000;box-shadow: 0 2px 12px rgba(0,0,0,0.1);transition: all 0.3s;
}3. 响应式适配移动端优化
el-aside :widthwindowWidth 768 ? 220px : 0div v-ifwindowWidth 768桌面端菜单/div
/el-aside
// 监听窗口变化
import { onMounted, onUnmounted, ref } from vueconst windowWidth ref(window.innerWidth)
const handleResize () windowWidth.value window.innerWidthonMounted(() window.addEventListener(resize, handleResize))
onUnmounted(() window.removeEventListener(resize, handleResize))Layout 布局
一、基础布局示例
templatediv classlayout-demoel-rowel-col :span24div classgrid-content header24 分栏 - 头部/div/el-col/el-rowel-rowel-col :span6div classgrid-content sidebar6 分栏 - 侧边栏/div/el-colel-col :span18div classgrid-content main18 分栏 - 内容区/div/el-col/el-rowel-rowel-col :span8div classgrid-content card8 分栏 - 卡片1/div/el-colel-col :span8div classgrid-content card8 分栏 - 卡片2/div/el-colel-col :span8div classgrid-content card8 分栏 - 卡片3/div/el-col/el-rowel-rowel-col :span6div classgrid-content footer6 分栏/div/el-colel-col :span6 :offset6div classgrid-content footer偏移6列/div/el-colel-col :span6div classgrid-content footer6 分栏/div/el-col/el-row/div
/templatestyle scoped
.layout-demo {max-width: 1200px;margin: 20px auto;
}.header, .footer {background-color: #3498db;color: white;
}.sidebar {background-color: #2ecc71;color: white;
}.main {background-color: #f1c40f;
}.card {background-color: #e74c3c;color: white;
}.grid-content {border-radius: 4px;min-height: 36px;display: flex;align-items: center;justify-content: center;font-weight: bold;padding: 20px 0;margin-bottom: 10px;
}
/style二、核心概念
1. 栅格系统
总宽度分为 24 栏el-row 代表行容器el-col 代表列容器可通过 span 设置占据列数
2. 关键功能
间隔: 使用 gutter 设置列间距响应式: 适配多种屏幕尺寸偏移: 使用 offset 设置列偏移量对齐: 支持水平和垂直对齐方式
三、布局方式详解
1. 基础分栏布局
el-rowel-col :span88列(33%)/el-colel-col :span88列(33%)/el-colel-col :span88列(33%)/el-col
/el-row2. 设置间隔 (gutter)
el-row :gutter20el-col :span6div6列(间隔20px)/div/el-colel-col :span6div6列(间隔20px)/div/el-colel-col :span6div6列(间隔20px)/div/el-colel-col :span6div6列(间隔20px)/div/el-col
/el-row3. 响应式布局
el-row :gutter10!-- 超小屏幕(手机)12分栏小屏幕(平板)6分栏中屏及以上8分栏 --el-col :xs12 :sm6 :md8 :lg8 :xl8div自适应布局/div/el-col!-- 大屏应用示例 --el-col :xs24 :sm18 :md16 :lg14 :xl12div大屏内容区域/div/el-col
/el-row4. 偏移布局
el-rowel-col :span6 :offset6div偏移6列/div/el-colel-col :span6 :offset6div偏移6列/div/el-col
/el-row5. 对齐方式
!-- 水平对齐 --
el-row justifycenterel-col :span6div居中/div/el-colel-col :span6div居中/div/col
/el-rowel-row justifyendel-col :span6div右对齐/div/el-col
/el-row!-- 垂直对齐 --
el-row alignmiddle styleheight: 100px;el-col :span6div垂直居中/div/el-colel-col :span6div styleheight: 60px;高度不一致/div/el-col
/el-row四、完整API详解
Row行属性
参数说明类型可选值默认值gutter列间距单位pxnumber—0justify水平排列方式stringstart/end/center/space-around/space-betweenstartalign垂直排列方式stringtop/middle/bottomtoptag自定义HTML标签string*div
Col列属性
参数说明类型可选值默认值span栅格占位1-24number—24offset左侧偏移量列数number—0push向右移动列数DOM顺序不变number—0pull向左移动列数DOM顺序不变number—0xs768px 的响应式设置number/object——sm≥768px 的响应式设置number/object——md≥992px 的响应式设置number/object——lg≥1200px 的响应式设置number/object——xl≥1920px 的响应式设置number/object——tag自定义HTML标签string*div
响应式对象的可选值
el-col :md{ span: 8, offset: 2 }...
/el-col响应式配置对象属性
span - 栅格占位offset - 左侧偏移量push - 向右移动量pull - 向左移动量
