本文目录
- vant如何使用步进器组件的外部样式类
- 详解mpvue中使用vant时需要注意的onChange事件的坑
- vant折叠面板怎么切换按钮
- vant 日历 部分只读
- 使用vant里面的Popup的同时,怎么修改遮罩层的样式
- vant 步进器 里面的input 在哪里取值
- vant中动作面板的关闭图标怎么显示
- vant评论功能如何实现
- 小程序如何让vant按钮不可用
vant如何使用步进器组件的外部样式类
方法/步骤
方式一. 使用 babel-plugin-import (推荐)
babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式
接着你可以在代码中直接引入 Vant 组件，插件会自动将代码转化为方式二中的按需引入形式
import { Button, Cell } from ’vant’;
如果你在使用 TypeScript，可以使用 ts-import-plugin 实现按需引入
方式二. 按需引入组件
在不使用插件的情况下，可以手动引入需要的组件
方式三. 导入所有组件
以上就是本期的介绍，你学会了吗！？
详解mpvue中使用vant时需要注意的onChange事件的坑
最近用了一下VantWeapp组件库，但是由于我是用mpvue写的，所以自然跟小程序引用不一样，比如我最近引用了vant里面的collapse折叠面板，官网文档里面介绍的使用方法是这样的1.在app.json或index.json中引入组件“usingComponents“:{“van-collapse“:“path/to/vant-weapp/dist/collapse/index“,“van-collapse-item“:“path/to/vant-weapp/dist/collapse-item/index“}2.通过value控制展开的面板列表，activeNames为数组格式《van-collapsevalue=“{{activeNames}}“》《van-collapse-itemtitle=“有赞微商城“name=“1“》提供多样店铺模板，快速搭建网上商城《/van-collapse-item》《van-collapse-itemtitle=“有赞零售“name=“2“》网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失《/van-collapse-item》《van-collapse-itemtitle=“有赞美业“name=“3“disabled》线上拓客，随时预约，贴心顺手的开单收银《/van-collapse-item》《/van-collapse》Page({data:{activeNames:[’1’]},onChange(event){this.setData({activeNames:event.detail});}});但是在mpvue里面不能直接这样引入下面是我的代码《van-collapse:value=“activeNames“@change=“onChange($event)“》《van-collapse-itemtitle=“有赞微商城“name=“1“》提供多样店铺模板，快速搭建网上商城《/van-collapse-item》《van-collapse-itemtitle=“有赞零售“name=“2“》网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失《/van-collapse-item》《van-collapse-itemtitle=“有赞美业“name=“3“disabled》线上拓客，随时预约，贴心顺手的开单收银《/van-collapse-item》《/van-collapse》exportdefault{data(){return{activeName:’1’}},methods:{onChange(event){console.log(event)this.activeName=event.mp.detail}}}得把原生小程序使用方式为改为mpvue使用方式首先是数据绑定方式value=“{{activeNames}}“改为v-bind:value=“activeNames“//或者:value=“activeNames“然后是事件监听在van-collapse组件里加个监听事件@change=“onChange($event)“mpvue中获取event值也与原生小程序有所不同：onChange(event){//获取表单组件filed的值console.log(event.mp.detail)//注意加入mp}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。您可能感兴趣的文章:详解如何搭建mpvue框架搭配vant组件库的小程序项目mpvue+vantapp搭建微信小程序的方法步骤
vant折叠面板怎么切换按钮
点击某个折叠，其他折叠也展开，v-for写在van-collapse 里 name不起作用。点击某个折叠，只展示单个折叠其他不受影响，v-for写在van-collapse-item里。默认折叠可以有很多种形式，这里采用name绑定的变量。只要title值和name值不一致，那么所有的面板就默认折叠了。这里title绑定的是index字符串，而name绑定的是一个索引。
vant 日历 部分只读
摘要1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
openCalendar () {
// 解决bug 部分机型刚打开白屏，滑动后才可
this.$nextTick(() =》 {
const dom = document.querySelector(’.van-calendar__body’)
if (dom) {
let back = dom.scrollTop
// 模拟滑动，避免白屏
setTimeout(() =》 {
back = dom.scrollTop
dom.scrollTop = back - 4
console.log(’scroll-start’, back)
}, 10)
setTimeout(() =》 {
dom.scrollTop = back
console.log(’scroll-end’)
}, 100)
}
})
咨询记录 · 回答于2021-12-13
vant 日历 部分只读
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
openCalendar () {
// 解决bug 部分机型刚打开白屏，滑动后才可
this.$nextTick(() =》 {
const dom = document.querySelector(’.van-calendar__body’)
if (dom) {
let back = dom.scrollTop
// 模拟滑动，避免白屏
setTimeout(() =》 {
back = dom.scrollTop
dom.scrollTop = back - 4
console.log(’scroll-start’, back)
}, 10)
setTimeout(() =》 {
dom.scrollTop = back
console.log(’scroll-end’)
}, 100)
}
})
如何让vant日历组件中日期下面没有文案的变成禁用状态
在Vant 的日历组件中想要禁用某些指定的日期，但是Vant 并没有提供类似disabledDate这样的的选项给我们配置。
通过阅读Vant 的 calendar组件源码，可以发现当这个日期的 type 属性值为 disabled时，就会禁用当前日期。
我们可以通过formatter这个属性来重新定义每一个日期的数据。从而改变 type的属性值。
使用vant里面的Popup的同时,怎么修改遮罩层的样式
样式覆盖啊。1、单独写一个css文件专门用来覆盖vant，放在vant样式后面引入。2、增加独有类名，在Popup的class上多加一个样式名。3、css路径上多加几层。比如.a .b .Popup {}4、用!important增加权重。比如{height:100px !important;}5、使用css属性deep。比如.a /deep/ .b {} 或者.a 》》》 .b {}，据说后者兼容性好一点
vant 步进器 里面的input 在哪里取值
vant是基于vue框架的一套移动端UI库，直接用v-model指令绑定变量即可获得，例：《van-stepper v-model=“value“ /》 value即是其取值
vant中动作面板的关闭图标怎么显示
设置 closeable 属性后，会在弹出层的右上角显示关闭图标。可以通过 close-icon 属性自定义图标，使用 close-icon-position 属性可以自定义图标位置。
vant评论功能如何实现
class不用传，你在《van-component class=“scroll“ /》写的class直接作用在组件内的顶层标签，其他地方要用的话就单独定义一个prop
小程序如何让vant按钮不可用
vant的disabled属性可以使按钮可用不可用 此按钮可用 此按钮不可用 通过JavaScript改变 vant 的disabled属性 document.getElementById(“abc“).disabled = true; //使不可用 document.getElementById(“ABC“).disabled = false;//使可用