uniapp按钮样式怎么改

 时间:2024-10-13 08:11:43

1、首先我们打开Hbuilder,新建一个项目,如下图所示

uniapp按钮样式怎么改

2、然后项目类型选择uni-app,项目名称随便起一个即可,如下图所示

uniapp按钮样式怎么改

3、接着我们就可以直接在vue文件中添加button了,通过type来声明按钮的样式,目前有的是primary,warn,default,如下图所示

uniapp按钮样式怎么改

4、运行以后我们可以看到三种不同的type对应了三种不同的颜色样式,如下图所示

uniapp按钮样式怎么改

5、另外还可以通过loding和disabled来定义按钮加载中和禁用的样式,如下图所示

uniapp按钮样式怎么改

6、在右侧我们可以看到用loading的按钮里面多了个加载动画,而用disabled的岳蘖氽颐按钮是一种不能点击的状态

uniapp按钮样式怎么改

7、接着还可以通过plain来取消按钮的背景颜色,让它只有边框,如下图所示

uniapp按钮样式怎么改

8、运行以后我们就可以看到按钮只有边框了,背景变成白色的了,如下图所示

uniapp按钮样式怎么改

9、接下来还可以通过size来定义按钮的大小,如下图所示,mini代表的就是小按钮

uniapp按钮样式怎么改

10、最后我们就可以看到按钮变小了,这是经常会使用到的大小,如下图所示

uniapp按钮样式怎么改
  • 怎么通过html+css实现导航栏
  • 灰鸽子远程控制软件教程全攻略
  • vscode 如何预览html文件
  • 前端编程-用浏览器自带的取色功能快速拾取颜色
  • VisualStudio如何配置符号选项
  • 热门搜索
    广汽传祺ga6怎么样 桐庐旅游 沙湖旅游景点介绍 旅游观光 膝盖软骨磨损怎么办 南平旅游 jar文件怎么打开 不丹旅游 北京周边旅游景点 世界旅游组织