养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

uniapp按钮样式怎么改

时间:2024-11-15 19:41:39

uniapp的按钮可以很方便的修改样式,那么具体的如何操作呢?下面小编就给大家详细的演示一下。

方法/步骤

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

uniapp按钮样式怎么改

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

uniapp按钮样式怎么改

3、接着我们就可以直接在vue文件中添加butt艺皱麾酪on了,通过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按钮样式怎么改

© 一点知识