修改vant组件中TreeSelect左侧选项的宽度

最新推荐文章于 2024-03-12 11:01:31 发布
最新推荐文章于 2024-03-12 11:01:31 发布
阅读量2.5k 收藏 2
点赞数
分类专栏： Web 文章标签： css vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44302282/article/details/121885459
版权
  1. 打开vant组件库的TreeSelect样式文件的源代码
    在这里插入图片描述
  2. 找到样式标签.van-tree-select__nav，修改flex的值，就可以调整宽度。将flex:1改为flex:0.75，左侧的宽度就变小了
    【源代码中，左边flex为1，右边flex值为2 ，所以左右比例为1：2 】
    修改前
    在这里插入图片描述
    在这里插入图片描述
    修改后
    在这里插入图片描述
    在这里插入图片描述
星星遇坠
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在vue中使用vant TreeSelect分类选择组件操作
01-22
中文文档：TreeSelect 分类选择 效果展示： //先在你需要的页面中引入，第一个是弹出层,第二个是选择的 import { Popup } from vant; import { TreeSelect } from vant; 代码部分： <van-tree-select :items=items :active-id.sync=items.activeId :main-active-index.sync=ite
详解VUE项目中安装和使用vant组件
10-17
主要介绍了VUE安装和使用vant组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
封装vant组件库没有的tree组件(思路至上)^^_
最新发布
Gzzzzhj的博客
03-12 238
封装vant组件库没有的tree组件
vant组件中 dialog的确认按钮的回调事件操作
01-22
不知道是不是我理解有问题，看了vant的组件库，他的文档是这样说的 然后我就绑定了事件 ：confirm 结果他的触发机制是：加载页面时会触发，点击按钮打开模态框时会触发，点击确定会触发，点击取消也会触发。 经过查阅资料以后，可以绑定他一个事件：beforeClose 这个事件的回调 有两个参数， 第一个参数是来判断点击的是确认按钮还是取消按钮。第二个参数我感觉就是可以关闭模态框。 补充知识：修改 vant 弹窗Dialog 组件调用是确认按钮与取消按钮的文字 Props 有关props 两个属性 confirm-button-text 与 cancel-button-text 。 co
修改设置vue-treeSelect 的高度，宽度等
zhichaogong的博客
06-17 1万+
加粗样式## 关于修改vue-treeSelect 组件的高度与宽度 前言 有时候根据项目要求或整题风格的统一性，需要对组件原有样式进行设置，比如： 这里需要将左侧的Vue-treeSelect组建的高度设置成与右侧input输入框一样的高度。 解决方案 1. CSS中的important语法，覆盖样式 .treeselect-main { width: 204px; line-height: 28px; .vue-treeselect__placeholder { line-heig
vant表单使用TreeSelect 分类实现多选效果
weixin_45183187的博客
06-07 3184
vant表单使用TreeSelect分类实现多选效果
vue-treeselect修改样式，高度，宽度
m0_46484437的博客
11-09 666
问题描述：vue-treeselec多选后会把input 高度撑大，会影响表单整体样式。
a-tree-select 基本使用，下拉框高度和宽度设置、回显时滚动条定位解决。
是秃子总会发光
03-13 5578
a-tree-select 基本使用，下拉框高度和宽度设置、回显时滚动条定位解决。
适配滑动宽度（Vant）
weixin_59527403的博客
12-11 555
切换设备的适配问题
微信小程序页面-筛选栏固定定位，以及使用Vant中TreeSelect控件遇到的问题
slient033的博客
11-05 4424
微信小程序页面-筛选栏固定定位，以及使用Vant中TreeSelect控件遇到的问题
【vue + vant】van-tree-select在Vue项目中的使用
Gh的博客
03-23 8606
van-tree-select在Vue项目中的使用
详解如何搭建mpvue框架搭配vant组件库的小程序项目
01-03
Vant – 轻量、可靠的移动端 Vue 小程序 组件库。由 有赞 公司开发与维护。提供了一系列美观、优质的移动端组件。vant 官网 2. 在普通小程序怎么使用 vant 组件 使用之前 使用 Vant Weapp 前，请确保你已经学习过...
【Vue】vue2移动端 ，vant2使用van-tree-select分类选择实现【全选】和【取消全选】、【搜索过滤当前children】，只影响当前显示children，并且去重
qq_51055690的博客
09-01 1448
组件链接传送门 功能需求，全选和取消全选，只做简单版。 就是两个按钮，一个，一个 并且只选中 || 取消 当前显示的这个children数组 这段代码，我封装成了一个components组件，只需要丢到 2.js方法 获取返回值 二、子组件代码 1.页面 2.样式代码 代码如下（示例）： 3. js代码 它需要的是，一个对象数组，它的对象数据，就是左侧列表，children数据，就是右侧渲染的子级数据列表。 例如下列格式 这里我的写法是，获取部门列表，然后点击部门（左侧），再请求右边人员列表
微信小程序使用Vant Weapp实现三级选择
m0_69892765的博客
01-25 851
通过activeKey进行判断侧边导航是点击的那一个选项,上方的代码只写了点击到区域时的三级选择。这样就可以动态设置activeKey从而进行三级选择右边内容的选择了。三级选择功能的实现主要是结合了vant weapp组件中的。然后在js文件中给侧边导航添加了onChange事件。
【Vue】vant2使用van-tree-select实现【全选、反选、搜索】，自定义组件，拿去即用。2.0版本保姆级教程
qq_51055690的博客
11-08 2963
【Vue】vue2移动端 ，vant2使用van-tree-select分类选择实现【全选】和【取消全选】、【搜索过滤当前children】，只影响当前显示children，并且去重由于项目又多了新功能，我发现之前写的van-tree-select全选反选组件，不友好。得改进一下。 效果如下。 van-tree-select实现全选反选组件效果实战案例我直接把代码全部贴出来。你们其实只需要改接口方法就好了。 van-tree-select
移动端树形选择组件 -- 基于vant4+vue3 支持多选、单选、节点搜索
Jie0817的博客
07-24 4558
【代码】移动端树形选择组件 -- 基于vant4+vue3 支持多选、单选、节点搜索。
Vant 源码解析——TreeSelect
u011581932的博客
09-10 1985
本篇笔者来讲解一下tree-select的实现原理和细节处理，结合实际场景会对其进行拓展，以及优化用户体验问题，以便满足更多的业务场景。
vue中使用vant中TreeSelect 分类选择组件
热门推荐
月落星河
12-31 2万+
在vue中使用vant中TreeSelect的组件 中文文档：TreeSelect 分类选择 效果展示： //先在你需要的页面中引入，第一个是弹出层,第二个是选择的 import { Popup } from "vant"; import { TreeSelect } from "vant"; 代码部分： <van-popup v-model="policeShow" ...
如何修改vant中组件样式
08-20
在Vant中修改组件样式，有以下几种方法： 1. 使用全局样式覆盖：可以通过在全局样式文件中重写Vant组件的样式来修改组件的外观。你可以在项目的 `App.vue` 或者 `main.js` 文件中引入全局样式文件，并在其中修改 Vant 组件的样式。例如： ```css /* App.vue or main.js */ @import 'vant/lib/index.css'; @import './style/custom-vant.css'; ``` ```css /* custom-vant.css */ /* 修改Button组件的背景颜色为红色 */ .van-button { background-color: red; } ``` 2. 使用自定义主题：Vant 提供了自定义主题的功能，你可以通过修改主题文件来修改组件的样式。首先，在项目根目录下创建一个 `vant-variables.scss` 文件用于覆盖 Vant 的默认主题变量，然后在入口文件（如`main.js`）中引入该文件，并调用 `vant/lib/index.less` 内置的 `vant-theme` 方法，示例如下： ```scss // vant-variables.scss $green: #00ff00; // 修改主题变量，如修改按钮组件的背景颜色为绿色 // main.js import 'vant/lib/index.less'; import './vant-variables.scss'; ``` 3. 使用scoped样式：如果你只需要修改某个页面或组件内使用的 Vant 组件的样式，可以使用scoped样式。在你的页面或组件的style标签中添加 scoped 属性，这样样式就只会影响当前页面或组件的 Vant 组件，不会影响其他组件。例如： ```vue <template> <div> <van-button class="custom-button">自定义按钮</van-button> </div> </template> <style scoped> .custom-button { background-color: blue; // 修改按钮组件的背景颜色为蓝色 } </style> ``` 以上方法可以根据你的需求来选择使用，你可以根据具体情况选择采用其中的一种或多种方式来修改 Vant 组件的样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值