洛阳建设网站的公司,网页设计尺寸的分辨率,企业vi设计一般包括哪些内容,用html做网站的步骤文章底部有个人公众号#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。个人B站主页热爱技术的小郑 #xff0c;视频内容主要是对应文章的视频讲解形式。有兴趣的可以关注一下。为何分享#xff1f; 踩过的坑没必要让别人在再踩#xff0c;自己复盘… 文章底部有个人公众号热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。个人B站主页热爱技术的小郑 视频内容主要是对应文章的视频讲解形式。有兴趣的可以关注一下。为何分享 踩过的坑没必要让别人在再踩自己复盘也能加深记忆。利己利人、所谓双赢。 1、基础用法
基础的按钮用法
定义 Button 的样式。type 、plain 、round 、circle
按钮直接拿入到项目中就可以使用可以根据提供的样式切换按钮样式。如果不符合需求可以深层次改变按钮的样式。 按钮添加标签样式: icon“el-icon-delete”
按钮边框样式: circle 、round
el-rowel-button默认按钮/el-buttonel-button typeprimary主要按钮/el-buttonel-button typesuccess成功按钮/el-buttonel-button typeinfo信息按钮/el-buttonel-button typewarning警告按钮/el-buttonel-button typedanger危险按钮/el-button
/el-rowel-rowel-button plain朴素按钮/el-buttonel-button typeprimary plain主要按钮/el-buttonel-button typesuccess plain成功按钮/el-buttonel-button typeinfo plain信息按钮/el-buttonel-button typewarning plain警告按钮/el-buttonel-button typedanger plain危险按钮/el-button
/el-rowel-rowel-button round圆角按钮/el-buttonel-button typeprimary round主要按钮/el-buttonel-button typesuccess round成功按钮/el-buttonel-button typeinfo round信息按钮/el-buttonel-button typewarning round警告按钮/el-buttonel-button typedanger round危险按钮/el-button
/el-rowel-rowel-button iconel-icon-search circle/el-buttonel-button typeprimary iconel-icon-edit circle/el-buttonel-button typesuccess iconel-icon-check circle/el-buttonel-button typeinfo iconel-icon-message circle/el-buttonel-button typewarning iconel-icon-star-off circle/el-buttonel-button typedanger iconel-icon-delete circle/el-button
/el-row2、禁用状态
按钮不可用状态
可以使用 disabled 属性来定义按钮是否可用它接受一个值。
el-rowel-button disabled默认按钮/el-buttonel-button typeprimary disabled主要按钮/el-buttonel-button typesuccess disabled成功按钮/el-buttonel-button typeinfo disabled信息按钮/el-buttonel-button typewarning disabled警告按钮/el-buttonel-button typedanger disabled危险按钮/el-button
/el-rowel-rowel-button plain disabled朴素按钮/el-buttonel-button typeprimary plain disabled主要按钮/el-buttonel-button typesuccess plain disabled成功按钮/el-buttonel-button typeinfo plain disabled信息按钮/el-buttonel-button typewarning plain disabled警告按钮/el-buttonel-button typedanger plain disabled危险按钮/el-button
/el-row3、文字按钮
没有边框和背景色的按钮
将按钮的 type赋值为 text 不想要按钮也不想要超链接就可以用这个没有边框的按钮。通过点击这个文字触发某个方法等。 el-button typetext文字按钮/el-button
el-button typetext disabled文字按钮/el-button4、图标按钮
带图标的按钮可增强辨识度有文字或节省空间无文字
设置属性即可icon 的列表可以参考 Element 的 icon 组件也可以设置在文字右边的 icon 只要使用标签即可可以使用自定义图标。i、coni
el-button typeprimary iconel-icon-edit/el-button
el-button typeprimary iconel-icon-share/el-button
el-button typeprimary iconel-icon-delete/el-button
el-button typeprimary iconel-icon-search搜索/el-button
el-button typeprimary上传i classel-icon-upload el-icon--right/i/el-button5、按钮组
以按钮组的方式出现常用于多项类似操作
使用标签来嵌套你的按钮。el-button-group el-button-groupel-button typeprimary iconel-icon-arrow-left上一页/el-buttonel-button typeprimary下一页i classel-icon-arrow-right el-icon--right/i/el-button
/el-button-group
el-button-groupel-button typeprimary iconel-icon-edit/el-buttonel-button typeprimary iconel-icon-share/el-buttonel-button typeprimary iconel-icon-delete/el-button
/el-button-group6、加载中
点击按钮后进行数据加载操作在按钮上显示加载状态
要设置为 load 状态只要设置属性为即可。loading、true el-button typeprimary :loadingtrue加载中/el-button7、不同尺寸
Button 组件提供除了默认值以外的三种尺寸可以在不同场景下选择合适的按钮尺寸。
额外的尺寸通过设置size属性来配置它们。medium、small、mini
el-rowel-button默认按钮/el-buttonel-button sizemedium中等按钮/el-buttonel-button sizesmall小型按钮/el-buttonel-button sizemini超小按钮/el-button
/el-row
el-rowel-button round默认按钮/el-buttonel-button sizemedium round中等按钮/el-buttonel-button sizesmall round小型按钮/el-buttonel-button sizemini round超小按钮/el-button
/el-row
8、属性说明
参数说明类型可选值默认值size尺寸stringmedium / small / mini-type类型stringprimary / success / warning / danger / info / text-plain是否朴素按钮boolean-falseround是否圆角按钮boolean-falsecircle是否圆形按钮boolean-falseloading是否加载中状态boolean-falsedisabled是否禁用状态boolean-falseicon图标类名string--autofocus是否默认聚焦boolean-falsenative-type原生 type 属性stringbutton / submit / resetbutton
9、实际应用
按钮中也可以绑定方法、执行某些操作 实际效果
