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如何配置符号选项
  • 热门搜索
    纳豆的做法 人参怎么吃效果最好 鲶鱼炖茄子的做法 中国电信怎么查话费 辣椒酱的做法 皿怎么读 溜肉段的做法视频 凉菜的做法 砾怎么读 皮蛋豆腐的家常做法