使用按钮组件，让按钮组件变为自己想要的宽度

最新推荐文章于 2024-07-25 16:18:42 发布
最新推荐文章于 2024-07-25 16:18:42 发布
阅读量468 收藏
点赞数 1
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/spitfire_dinosau/article/details/134536600
版权
本文介绍了在Vue的van-button组件中嵌套div和span时遇到的宽度限制问题，提出使用div并设置宽度的方式更易调整，提供了相应的代码解决方案。
摘要由CSDN通过智能技术生成 
<div style="text-align: center;margin-top: 60px;">
   <div>
     <van-button  round type="info" ><div style="width: 140px;">查看案件</div>
     </van-button>
   </div>
   <div style="margin-top: 20px;">
     <van-button  round type="default" plain color="#000" @click="">
        <div style="width: 140px;">返回</div>
     </van-button>
    </div>     
</div>

在button组件里面嵌套div span无法使其width扩大，

使用div+width更容易解决问题

呈现代码

SpitFire_Dinosaur
关注
微信小程序:修改按钮BUTTON尺寸
m0_60643169的博客
11-15 1万+
1.微信小程序BUTTON常见属性: 2.BUTTON宽高等样式的有效调整方法： 微信小程序当中通过wxss来设置button的宽高值并不起效果，而size属性却只有两个合法值，当我们想要自定义大小时则： 在 标签中直接写 style即可： <button style="width: 90vw;height: 8vh;background-color: aqua;"> 在线客服222 </button> 3.button按钮open-type属性： ..
vant Weapp组件库中 自定义修改van-button 按钮宽高大小
zxcve的博客
05-16 1万+
原本的按钮尺寸 支持large、normal、small、mini四种尺寸，默认为normal。 <van-button type="primary" size="large">大号按钮</van-button> <van-button type="primary" size="normal">普通按钮</van-button> <van-button type="primary" size="small">小型按钮</van-butt
引入vant-weapp下如何修改 van-button的样式
克里斯蒂亚诺更新的博客
07-09 230
important 修改！
html按钮代码设置宽高,小程序按钮button自定义（宽高）样式
weixin_32256355的博客
06-05 1193
获取微信头像等信息效果：默认头像+获取到的微信头像注意，你在css(wxss)里面直接设置button的width,height是无效的！！！必须在html(wxml)里面的style进行设置！！！{{userInfo.userName}}{{userInfo.phone}}.getUserInfoBtn {/* ，button的宽高无法在wxss里面修改，必须在用style写!!!*/width...
解决微信小程序的button按钮设置宽度无效的问题
热门推荐
只会cv 的博客
03-10 1万+
方法一 （推荐使用）直接在button按钮上写行内样式 wxml代码示例 <button type="primary" style="width:100%">按钮</button> 方法二 删除app.json的配置"style": "v2" 在app.json 中配置 “style”: "v2"之后就可以启用新版的组件样式，emmm存在即有它的道理，没事咱就不动它......
小程序的button设置高宽度的办法
weixin_58689699的博客
01-13 726
直接内联样式 style="width: 20vw;
van-button根据参数改变字体颜色，实现高度自定义
lrbtony的博客
09-15 1589
有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。当我们需要覆盖 element-ui 中的样式时只能通过深度作用选择器 style 为 css 时的写法如下。建议使用第二种方式,/deep/在某些时候会报错,::v-deep更保险并且编译速度更快。但是像scss等预处理器却无法解析>>>，所以我们使用下面的方式.1 >>> 如果vue的style使用的是css，那么则。
jQuery Mobile中的button按钮组件基础使用教程
10-22
另一个有用的属性是 data-inline，使用它可以使 button 组件以内联形式展示，这种形式的按钮会根据内容宽度自动调整大小，并且能够与其他内联元素并排显示。 最后，如何为 button 组件添加交互事件？这是通过 ...
使用vue实现点击按钮滑出面板的实现代码
08-31
这里的`<el-button>`是Element UI库中的按钮组件，`@click`是Vue的事件绑定语法，表示当按钮被点击时执行`onShow`方法。 ```html 点我 ``` `onShow`方法中，我们将`formShow`属性设置为`true`，这将用于控制...
使用Bootstrap美化按钮实例代码(demo)
08-31
同时，如果你想让一个链接看起来像按钮，可以使用 `a` 标签并添加相应的按钮类： ```html 按钮链接 ``` 总的来说，Bootstrap通过简单的类名应用，使得创建具有各种风格和功能的按钮变得轻而易举。无论是颜色、尺寸...
js实现简单的获取验证码按钮效果
10-20
在本文中，我们将会详细解析如何使用JavaScript实现一个简单的获取验证码按钮效果。这个效果的主要功能是在用户点击获取验证码按钮后，按钮会被禁用，同时开始一个倒计时过程，倒计时结束后，按钮恢复可用状态，并...
vue3 - ant design vue 抽屉弹框组件 a-drawer 拖曳侧边修改宽度功能，让Drawer抽屉框可以拖拽边缘动态修改宽度效果，vue3+antd3如何让抽屉组件变成可拖动百分比宽
最新发布
高级前端工程师
07-25 2407
vue3，ant design vue，antd，抽屉弹框，a-drawer，抽屉组件Drawer，可拖动的抽屉，拖曳，拖拽，按住侧边进行左右拖动改变宽度，鼠标按下拖曳拖拽拖动，动态改变宽度，vue3+antd3如何将drawer抽屉弹框修改成可以左右拖动动态修改宽度，抽屉弹框可拖曳动态调整宽度，可调整大小的抽屉组件，可拖拉宽度抽屉，添加可拖动侧边栏宽度的功能，拖曳改变宽度，抽屉Drawer组件实现鼠标拖拽控制宽度，antd实现宽度拖拽，实现左右可拖动改变宽度的div内容显示区，并且控制拖动范围，鼠标拖拽的
van-button调整按键和文本大小
chengduxiannanjin的博客
03-16 1万+
van-button调整按键和文本大小 前言 本人在零基础学习vue+vant时发现的问题和踩的一些坑，只作为分享和记录日常，本人是菜鸡！！！！！！ 项目场景： 使用vant的按键组件van-button 问题描述： 使用van-button时会出现按键的大小无法修改和文本大小也无法修改的问题 解决方案：通过设置样式可以间接改变按键和文本的大小，修改css的参数改变按键的大小，文本也会自动改变。 <div> <van-button class="button" ro
uview 修改u-button按钮的border
树上骑个猴的博客
03-02 1435
效果1： <view class="button-layout" style="margin-top:20rpx;"> <view style="width:50%;"> <u-button class="no-border" type="success" @click="btn1()">按钮1</u-button> </view> <view style="width:50%;">
【Vant相关知识】
居然天上楼的博客
12-23 3209
Vant是一个轻量，可靠的移动端组件库，2017开源目前 Vant 官方提供了 [Vue 2 版本](3 版本](https://vant-contrib.gitee.io/vant)和[微信小程序版本](http://vant-contrib.gitee.io/vant-weapp)，并由社区团队维护[React 版本](target=https%3A%2F%2Fgithub.com%2F3lang3%2Freact-vant)和[支付宝小程序版本](本文中我们使用Vue2版本对应的Vant学习。
Vant中＜van-button＞中icon的位置设置
qq_56715703的博客
03-13 861
一般在按钮中加入icon，其位置都在左侧。我们可以用：van-position，改变图标展示位置。如：icon-position="right"
vant组件库的使用 - - - vue2篇&小程序篇
sywdebug的博客
12-07 9348
在需要使用组件的页面的 json 文件的"usingComponents" (使用组件)内加入想要使用的组件即可。点击上方导航栏 - - - 工具 - - - 构建 npm。然后右上角 - - - 详情里的使用 npm 模块勾上。在 main.js 文件中添加上。在其他 vue 文件可以直接使用。在其他 vue 文件可以直接使用。然后在 wxml 里就可以使用了。在 app.json 文件加入。然后在 wxml 直接使用即可。直接在 vue 文件里添加。在 main.js 中添加。然后就可以引入组件了。
vue手写移动端聊天室
m0_61950846的博客
04-21 2542
先随便写一下 ，websocket等会贴
小程序小知识点总结及vant weapp UI组件库的使用
官方小可爱√的博客
11-22 995
文章目录前言一、小程序是什么？二、点击方法三、传值四、自定义组件五、父子通信六、 尺寸单位 rpx七、 引入vant weapp UI组件库引入组件使用组件 前言 微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。 微信小程序是一种不用下载就能使用的应用，也是一项创新，经过将近两年的发展，已经构造了新的微信小程序开发环境和开发者生态。微信小程序也是这么多年来中国IT行业里一个真正能够影响
vue3点击按钮，让路由所在div宽度变为浏览器页面最大宽度
07-13
你可以通过使用 Vue Router 和 CSS 来实现点击按钮时将路由所在的 div 宽度设置为浏览器页面最大宽度。下面是一个简单的示例： 首先，在你的 Vue 组件中，你需要定义一个 data 属性来存储 div 的宽度，并创建一个方法来处理按钮的点击事件。例如： ```vue <template> <div> <div ref="routeDiv" :style="{ width: routeWidth }"> <!-- 这里放置你的路由内容 --> </div> <button @click="expandRoute">点击扩展</button> </div> </template> <script> export default { data() { return { routeWidth: '100%', }; }, methods: { expandRoute() { this.routeWidth = '100vw'; // 将宽度设置为浏览器页面最大宽度 }, }, }; </script> ``` 然后，在你的样式文件（如 `App.vue` 或 `style` 标签）中，你可以为路由所在的 div 设置一些基本样式，例如： ```css div { transition: width 0.3s ease; /* 添加过渡效果 */ max-width: 100vw; /* 设置最大宽度为浏览器页面宽度 */ } ``` 这样，当你点击按钮时，通过改变 `routeWidth` 数据属性的值为 `'100vw'`，div 的宽度就会从原始宽度过渡到浏览器页面最大宽度。 请注意，这只是一个简单的示例，你可能需要根据你的实际需求进行适当的调整。另外，你还需要确保已经正确安装了 Vue Router 并进行了相关配置。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值