uni-app 内置组件:Button

Button 组件是 uni-app 中用于创建按钮的内置组件,用于响应用户的点击事件,可以导致页面跳转或者触发某些逻辑。

API

Button 组件的 API 包括多种属性和事件,以下是一些常用的属性:

  • size:按钮的大小,例如:default, mini
  • type:按钮的样式类型,例如:primary, default, warn
  • plain:按钮是否镂空,背景色透明。
  • disabled:是否禁用按钮。
  • loading:名称前是否带 loading 图标。

属性

以下是 Button 组件的部分属性介绍:

size

定义了按钮的大小。有效值有 mini, default

html 复制代码
<button size="default">默认大小</button>
<button size="mini">迷你大小</button>

type

定义了按钮的样式类型,可以决定按钮的颜色和背景。有效值包括 primary, default, warn 等。

html 复制代码
<button type="primary">主要按钮</button>
<button type="default">默认按钮</button>
<button type="warn">警告按钮</button>

plain

将按钮设置为镂空样式(背景色透明而字体非透明)。

html 复制代码
<button plain="true">镂空按钮</button>

disabled

定义按钮是否被禁用,禁用状态下按钮不可点击。

html 复制代码
<button disabled="true">禁用按钮</button>

loading

定义按钮名称前是否带有 loading 图标。

html 复制代码
<button loading="true">加载中</button>

事件

Button 组件提供了多种事件,例如点击事件:

bind:tap

点击按钮时触发,可以在这个事件中执行相关的逻辑。

html 复制代码
<button bind:tap="handleTap">点击我</button>

在 JavaScript 中处理点击事件:

javascript 复制代码
export default {
  methods: {
    handleTap() {
      console.log('按钮被点击');
    }
  }
}

示例

html 复制代码
<template>
  <view>
    <button size="default" type="primary" bind:tap="handleTap">点击我</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleTap() {
      // 处理按钮点击事件
      console.log('按钮被点击');
    }
  }
}
</script>

以上是 button 组件的基本使用介绍,具体使用时还需要参考官方文档,以了解更多高级特性和最佳实践。

相关推荐
sunn。8 小时前
自定义组件触发饿了么表单校验
javascript·vue.js·elementui
Heidi__10 小时前
Vue 3 的响应式原理
前端·javascript·vue.js
Monly2112 小时前
Vue:Table在点击删除的时候阻止行点击事件
前端·javascript·vue.js
工业互联网专业14 小时前
基于springboot+vue的二手车交易系统
java·vue.js·spring boot·毕业设计·源码·课程设计·二手车交易系统
前端小趴菜0514 小时前
记录 vue-router访问 / 路径直接重定向到有权限的第一个菜单
前端·javascript·vue.js
Eva21566516 小时前
Flask+Vue构建图书管理系统及Echarts组件的使用
vue.js·flask·echarts
艾克马斯奎普特18 小时前
Vue.js 3 渐进式实现之响应式系统——第六节:嵌套的 effect 与 effect 栈
前端·vue.js
fayeyoko19 小时前
vue如何实现触摸板双指滑动(非长按滑动)
vue.js
醋醋19 小时前
vue2源码记录(2)
前端·vue.js
艾克马斯奎普特19 小时前
Vue.js 3 渐进式实现之响应式系统——第五节:分支切换与 cleanup
前端·vue.js