第二周、1.button组件

最新推荐文章于 2025-02-11 17:35:12 发布

原创最新推荐文章于 2025-02-11 17:35:12 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

本文详细介绍了Button组件的四种类型：普通、胶囊、圆形和文本按钮，以及特殊的弧形和下载按钮。每个类型都有其特定的样式和属性，例如type用于设定按钮样式，value设置按钮文本，icon添加图标等。此外，还提到了不同类型的按钮对样式的特殊支持，如胶囊按钮不支持border样式，圆形按钮不支持文本样式，文本按钮不支持尺寸设置。对于弧形按钮，还特别指定了额外的样式属性。文章最后详细列举了各类型按钮的样式属性和通用样式，帮助开发者更好地理解和使用Button组件。

Button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。

<div class="div-button">
    <text class="title">普通按钮</text>
    <div class="circleall">
        <button class="buttons">确认按钮</button>
    </div>
    <text class="title">胶囊按钮</text>
    <div class="circleall">
        <button class="buttons" type="capsule">确认按钮</button>
    </div>
    <text class="title">圆形按钮</text>
    <div class="circlealls">
        <button class="circle" type="circle" >icon按钮</button>
    </div>
    <text class="title">文本按钮</text>
    <div class="circleall">
        <button class="text" type="text">文本按钮1</button>
        <button class="text text1" type="text">文本按钮2</button>
        <button class="text text2" type="text">文本按钮3</button>
    </div>
    <text class="title">长胶囊按钮</text>
    <div class="al">
        <button class="download" type="download">下载按钮</button>
    </div>
</div>

属性：

除支持通用属性外，还支持如下属性：

名称	类型	默认值	必填	描述
type	string	-	否	不支持动态修改。如果该属性缺省，展示类胶囊型按钮，不同于胶囊类型，四边圆角可以通过border-radius分别指定，如果需要设置该属性，则可选值包括如下： capsule：胶囊型按钮，带圆角按钮，有背景色和文本； circle：圆形按钮，支持放置图标； text：文本按钮，仅包含文本显示； arc：弧形按钮，仅支持智能穿戴； download：下载按钮，额外增加下载进度条功能，仅支持手机和智慧屏。
value	string	-	否	button的文本值。
icon	string	-	否	button的图标路径，图标格式为jpg，png和svg。
placement5+	string	end	否	仅在type属性为缺省时生效，设置图标位于文本的位置，可选值为： start：图标位于文本起始处； end：图标位于文本结束处； top：图标位于文本上方； bottom：图标位于文本下方。
waiting	boolean	false	否	waiting状态，waiting为true时展现等待中转圈效果，位于文本左侧。类型为download时不生效，不支持智能穿戴。

样式：

除支持通用样式外，还支持如下样式：

名称	类型	默认值	必填	描述
text-color	<color>	手机：#ff007dff 智慧屏：#e5ffffff 智能穿戴：#ff45a5ff	否	按钮的文本颜色。
font-size	<length>	手机：16px 智慧屏：18px 智能穿戴：16px	否	按钮的文本尺寸。
allow-scale	boolean	true	否	按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。说明如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。
font-style	string	normal	否	按钮的字体样式。
font-weight	number \| string	normal	否	按钮的字体粗细。见text组件font-weight的样式属性。
font-family	<string>	sans-serif	否	按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。
icon-width	<length>	-	否	设置圆形按钮内部图标的宽，默认填满整个圆形按钮。说明 icon使用svg图源时必须设置该样式。
icon-height	<length>	-	否	设置圆形按钮内部图标的高，默认填满整个圆形按钮。说明 icon使用svg图源时必须设置该样式。
radius	<length>	-	否	按钮圆角半径。在圆形按钮类型下该样式优先于通用样式的width和height样式。

胶囊按钮（type=capsule）时，不支持border相关样式；
圆形按钮（type=circle）时，不支持文本相关样式；

文本按钮（type=text）时，自适应文本大小，不支持尺寸设置（radius，width，height），背景透明不支持background-color样式。

type设置为arc

除支持通用样式中background-color、opacity、display、visibility、position、[left|top|right|bottom外，还支持如下样式：

名称	类型	默认值	必填	描述
text-color	<color>	#de0000	否	弧形按钮的文本颜色。
font-size	<length>	37.5px	否	弧形按钮的文本尺寸。
allow-scale	boolean	true	否	弧形按钮的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
font-style	string	normal	否	弧形按钮的字体样式。
font-weight	number \| string	normal	否	弧形按钮的字体粗细。见text组件font-weight的样式属性。
font-family	<string>	sans-serif	否	按钮的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过自定义字体指定的字体，会被选中作为文本的字体。