vant 带关闭按钮div_Vant Button 按钮

最新推荐文章于 2024-07-10 09:29:55 发布
最新推荐文章于 2024-07-10 09:29:55 发布
阅读量1.2k 收藏
点赞数
文章标签： vant 带关闭按钮div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39791322/article/details/111857732
版权
本文介绍了Vant框架中的Button按钮组件的使用，包括不同类型的按钮（如主要、信息、警告、危险和朴素按钮）、细边框、禁用状态、加载状态、按钮形状、图标按钮、尺寸调整、块级元素、页面导航以及自定义颜色等功能。同时提供了详细的API参数说明和事件监听示例。
摘要由CSDN通过智能技术生成

引入import Vue from 'vue';

import { Button } from 'vant';

Vue.use(Button);

代码演示

按钮类型

支持default、primary、info、warning、danger五种类型，默认为default默认按钮

主要按钮

信息按钮

警告按钮

危险按钮

朴素按钮

通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。朴素按钮

朴素按钮

细边框

设置hairline属性可以开启 0.5px 边框，基于伪类实现细边框按钮

细边框按钮

禁用状态

通过disabled属性来禁用按钮，禁用状态下按钮不可点击禁用状态

禁用状态

加载状态

通过loading属性设置按钮为加载状态，加载状态下默认会隐藏按钮文字，可以通过loading-text设置加载状态下的文字

按钮形状

通过square设置方形按钮，通过round设置圆形按钮方形按钮

圆形按钮

图标按钮

通过icon属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL

按钮

按钮

按钮尺寸

支持large、normal、small、mini四种尺寸，默认为normal大号按钮

普通按钮

小型按钮

迷你按钮

块级元素

按钮在默认情况下为行内块级元素，通过

最低0.47元/天 解锁文章
weixin_39791322
关注
vant 表单按钮置灰_Vant Switch 开关
weixin_33973572的博客
12-29 2239
引入import Vue from 'vue';import { Switch } from 'vant';Vue.use(Switch);代码演示基础用法通过v-model绑定开关的选中状态，true表示开，false表示关export default {data() {return {checked: true};}};禁用状态通过disabled属性来禁用开关，禁用状态下开关不可点击加载状态...
ABAP-GUI的导出到excel的系统自带按钮
weixin_42559610的博客
09-11 935
按钮&XXL
五分钟带你学会Vant 4的使用
最新发布
舜意的博客
07-10 1572
本章将从零开始讲解vant组件库的使用方法对小白极其友好，主打的就是一个读者就是上帝，你只管张嘴，我把饭嚼碎了喂给你（坏笑）那我们就直接开始吧！！！本文讲解了如何去使用vant组件库去快速构建你的移动端项目对小白极其友好，主打的就是一个读者就是上帝，你只管张嘴，我把饭嚼碎了喂给你（坏笑）希望看到这里的你能够有所收获！！！！！！
QButtonGroup
友善啊，朋友的博客
01-06 2062
一、描述 QButtonGroup 提供了一个抽象容器，可以在其中放置按钮小部件。它不提供此容器的可视化表示，而是管理组中每个按钮的状态。 独占按钮组会关闭所有可切换状态的按钮，已单击的按钮除外。默认情况下，按钮组是独占的。如果创建独占按钮组，则应确保该组中的按钮之一被初始选中；否则，该组最初将处于未选中任何按钮的状态。 QButtonGroup 可以在整数和按钮之间进行映射。可以使用 setId() 为按钮分配一个整数 id，并使用 id() 检索它。 二、属性成员 1、exclusive :
32.QButtonGroup
potato123232的博客
07-16 7483
1创建和添加按钮 QButtonGroup名为按钮组，作用为按钮的容器，在其中可以添加按钮，它本身不具备可视化的效果 QButtonGroup的父类为QObject 首先我们创建四个按钮 1.1创建按钮组 1.2添加按钮 addButton() 此处注意addButton()方法只能由一个参数，添加按钮时需要一个一个添加 现在我们添加完按钮组，已经能达到两组互斥的效果了 2查看按钮 2.1查看按钮组中所有的按钮 buttons() 我们...
Qt中QButtonGroup使用
心向阳光，斗志昂扬！
02-20 1076
QButtonGroup只是对逻辑控制，不对显示控制，默认单项，可选多项，效果如下： 代码如下： #ifndef TESTWGT_H #define TESTWGT_H #include <QWidget> #include <QButtonGroup> class TestWgt : public QWidget { Q_OBJECT public: explicit TestWgt(QWidget *parent = 0); ~TestWgt();
vant 带关闭按钮div_[已解决]vant-ui源码vant-button的几个疑问
weixin_33622085的博客
01-13 607
业务背景用了uni-app一年啦,但是没有通用的ui框架,就想着自己仿vant-weapp,适配一下uni-app,能够在各个端上用这两天把button仿下来,但是里面有几个地方还存在疑问,关于css为什么要使用新的css变量?在package/common/style/theme.less文件下面好多css属性值都被替换成了原生变量了var(--$1, @{$1})可实际上,我在vant小程序示...
vant 带关闭按钮div_vant-area不显示标题栏以及确认和取消按钮
weixin_29614791的博客
12-31 1768
area-list="{{ areaList }}":columns-num="3"confirm-button-text="确定"cancel-button-text="取消"title="选择地址":value="area"bind:confirm="getArea"bind:cancel="colseArea"bind:change="showArea">代码应该没问题，数据源area...
vue悬浮可拖拽悬浮按钮的实例代码
10-16
在现代Web开发中，尤其是在移动设备上，悬浮按钮（Floating Action Button，FAB）是一种常见的用户界面元素，用于提供主要或相关动作的快速访问。本文将介绍如何在Vue项目中实现一个可拖拽的悬浮按钮，并通过实例...
修改vant 弹窗Dialog组件调用是确认按钮与取消按钮的文字
草巾冒小子的博客
01-25 6293
修改vant 弹窗Dialog组件调用是确认按钮与取消按钮的文字
窗体部件之QButtonGroup
Y673582465的专栏
06-22 502
类似QActionGroup，可以用QButtonGroup的addButton的使得pushbutton按钮组互斥。
Qt之QButtonGroup简单使用
热门推荐
后知后觉
11-29 3万+
在项目中遇到一个需求，根据外部条件来确定你的界面上显示多少个按钮。于是，写一个小程序测试了下，效果还可以。 主要用到QButtonGroup类，需要包含头文件，接着申请一个按钮数组对象QButtonGroup *buttonGroup，所有的按钮在ui中定义好了。 下面贴代码: .h文件：#include <QWidget> #include <QButtonGroup> #include <
QButtonGroup的使用
琅嬛福地
03-02 5342
当有一组按钮时，可以共用一个槽函数，在该槽函数中在做处理，那么此时就需要用到QButtonGroup类了，例如有如下界面 可以把这四个按钮全部放到按钮组里，根据按钮的序号分别进行调用。 1 QButtonGroup类常用方法简介 （1）addButton，声明如下 void QButtonGroup::addButton(QAbstractButton ...
[Qt基础-06] QButtonGroup
qq_44723937的博客
07-23 4496
QButtonGroup基础介绍
用vant的单选按钮实现点击全选反选操作
07-28
可以使用 Vant UI 中的单选按钮（Radio）组件来实现点击全选和反选操作。 首先，你需要在页面中引入 Vant 组件库。 ```html <template> <div> <van-radio v-model="selectAll" shape="square" @click="toggleSelectAll">全选</van-radio> <van-radio-group v-model="selectedList" @change="updateSelectedList"> <van-cell v-for="(item, index) in list" :key="index" :title="item.label"> <van-radio :name="item.value">{{ item.label }}</van-radio> </van-cell> </van-radio-group> <van-button type="primary" @click="toggleInverseSelection">反选</van-button> </div> </template> <script> export default { data() { return { list: [ { value: '1', label: '选项1' }, { value: '2', label: '选项2' }, { value: '3', label: '选项3' }, // 其他选项... ], selectAll: false, selectedList: [], }; }, methods: { toggleSelectAll() { this.selectedList = this.selectAll ? this.list.map(item => item.value) : []; }, updateSelectedList(value) { this.selectedList = value; this.selectAll = this.selectedList.length === this.list.length; }, toggleInverseSelection() { this.selectedList = this.list .filter(item => !this.selectedList.includes(item.value)) .map(item => item.value); this.selectAll = this.selectedList.length === this.list.length; }, }, }; </script> ``` 在上述代码中，我们使用了 `van-radio` 组件来表示每个选项，使用 `van-radio-group` 组件来管理选中的选项。通过 `v-model` 双向绑定 `selectAll` 和 `selectedList` 数据，来控制全选和选中状态。 点击全选按钮时，通过 `toggleSelectAll` 方法来控制 `selectedList` 的值，如果 `selectAll` 为 true，则将 `selectedList` 设置为所有选项的值，否则清空 `selectedList`。 点击反选按钮时，通过 `toggleInverseSelection` 方法来控制 `selectedList` 的值，首先获取未被选中的选项，并将其值添加到 `selectedList` 中，同时更新全选按钮的状态。 当选择某个单选按钮时，通过 `updateSelectedList` 方法来更新 `selectedList` 的值，并根据 `selectedList` 的长度判断是否全选。 希望以上代码能够帮助到你实现点击全选和反选操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值