Button 按钮 | 您所在的位置:网站首页 › 鼠标开关哪个颜色按钮好看点 › Button 按钮 |
Button 按钮 # 常用的操作按钮。 基础用法 #禁用状态 #你可以使用 disabled 属性来定义按钮是否被禁用。 链接按钮 #WARNING type="text" 已被 废弃,将于版本 3.0.0 时 移除,请考虑切换至新的 API。 新的 API link 于 2.2.1 版本时添加,你可以使用 type API 设置链接按钮的主题样式 文字按钮 #TIP 文字按钮在现在有了全新的设计样式。 2.2.0 如果您想要使用老版样式的按钮,可以考虑使用 Link 组件。 API也已更新,由于 type 属性会同时控制按钮的样式, 因此我们通过一个新的 API text: boolean 来控制文字按钮。 没有边框和背景色的按钮。 图标按钮 #使用图标为按钮添加更多的含义。 你也可以单独使用图标不添加文字来节省显示区域占用。 按钮组 #以按钮组的方式出现,常用于多项类似操作。 加载状态按钮 #点击按钮来加载数据,并向用户反馈加载状态。 通过设置 loading 属性为 true 来显示加载中状态。 TIP 您可以使用 loading 插槽或 loadingIcon属性自定义您的loading图标 ps: loading 插槽优先级高于loadingIcon属性 调整尺寸 #除了默认的大小,按钮组件还提供了几种额外的尺寸可供选择,以便适配不同的场景。 Tag 2.3.4 #您可以自定义元素标签。例如,按钮,div,路由链接,nuxt链接。 自定义颜色 beta #您可以自定义按钮的颜色。 我们将自动计算按钮处于 hover 和 active 状态时的颜色。 Button API #Button 属性 #属性名说明类型默认值size尺寸enum—type类型enum—plain是否为朴素按钮booleanfalsetext 2.2.0是否为文字按钮booleanfalsebg 2.2.0是否显示文字按钮背景颜色booleanfalselink 2.2.1是否为链接按钮booleanfalseround是否为圆角按钮booleanfalsecircle是否为圆形按钮booleanfalseloading是否为加载中状态booleanfalseloading-icon自定义加载中状态图标组件string / ComponentLoadingdisabled按钮是否为禁用状态booleanfalseicon图标组件string / Component—autofocus原生 autofocus 属性booleanfalsenative-type原生 type 属性enumbuttonauto-insert-space自动在两个中文字符之间插入空格boolean—color自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色string—darkdark 模式, 意味着自动设置 color 为 dark 模式的颜色booleanfalsetag 2.3.4自定义元素标签string / ComponentbuttonButton 插槽 #插槽名说明default自定义默认内容loading自定义加载中组件icon自定义图标组件Button 方法 #属性名说明类型ref按钮 html 元素objectsize按钮尺寸objecttype按钮类型objectdisabled按钮已禁用objectshouldAddSpace是否在两个字符之间插入空格objectButtonGroup API #ButtonGroup 属性 #属性名说明类型默认值size用于控制该按钮组内按钮的大小enum—type用于控制该按钮组内按钮的类型enum—ButtonGroup 插槽 #插槽名说明子标签default自定义按钮组内容Button源代码 #组件 • 文档 贡献者 # |
CopyRight 2018-2019 实验室设备网 版权所有 |