方式一 :rules="[{ required: true, message: '请填写用户名' }]" 方式二 :rules="[{ pattern, message: '请输入正确内容' }]" const pattern = /\d{6}/; 方式三 :rules="[{ validator, message: '请输入正确内容' }]" const validator = (val) =&…
目录 vue + vant 之 List列表组件 首次不触发 onLoad 事件 vue + vant 之 List列表组件 首次不触发 onLoad 事件 immediate-check设置为flase即可 <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> <van-list v-model="loadin…
vant 自定义遮罩层van-overlay时局部滚动，在蒙层元素中滑动的时候，滑到内容的尽头时，再继续滑动，蒙层底部的页面会开始滚动，显然这不是我们想要的效果，因此需要阻止这种行为，体验甚是不好 设置:lock-scroll="false"时，规则里面的滑块才会滚动，overflow-y才会生效---->这是个坑 上代码 1、封装一个函数 新建utils/modalHelper.js文件 …
一、vant 1、引入与使用 直接通过 CDN 引入到html页面中 <!-- 引入样式文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css"> <!-- 引入 Vue 和 Vant 的 JS 文件 --> <script src="h…
介绍 弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示 引入import Vue from 'vue'; import { Popup } from 'vant'; Vue.use(Popup); 代码演示 基础用法 通过v-model控制弹出层是否展示展示弹出层 内容export default { data() { return { show: false } }, metho…
1.在每个带图标的组件下面会有相应的v-slot name说明 2.在组件中使用 (这里用的是阿里巴巴的icon font) <van-field v-model="user.mobile" center icon-prefix="toutiao" left-icon="shouji" placeholder="请输入手机号码" style="position:relative;"> …
引入import Vue from 'vue'; import { Button } from 'vant'; Vue.use(Button); 代码演示 按钮类型 支持default、primary、info、warning、danger五种类型，默认为default默认按钮 主要按钮 信息按钮 警告按钮 危险按钮 朴素按钮 通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景…
Vant 是有赞前端团队开源的移动端vue组件库，适用于手机端h5页面。 鉴于百度搜索不到vant官方网址，分享一下vant组件库官网地址，方便新手使用 vant官网地址 https://vant-contrib.gitee.io/vant/#/zh-CN/ 通过 npm 安装 在现有项目中使用 Vant 时，可以通过 npm 或 yarn 进行安装： # Vue 2 项目，安装 Vant 2： …
需求 使用vant使用datetime-picker组件实现选择日期范围 开始时间不能大于结束时间 .时间跨度不能大于180天 问题描述 分别设置开始时间及结束时间的maxDate和minDate 点击选择了开始时间之后，在点击选择结束时间页面卡着不动了 原因 datetime-picker组件中绑定的min-date和max-date不可以是动态的，只能绑定一个固定的值，否则就会导致页面卡死 解…
之前开发都喜欢自己手敲一些组件，比如什么按钮啊，搜索框啊，相册啊等。这些东西自己敲起来，一个就要花费两三小时，敲出来其实不花时间，主要是我要调样式，调成自己喜欢看的样子，一直调，时间一下就过去了。所以现在一般会先去看看优秀的作品的按理。但大部分都用了组件。比如uni-xx开头的。这些组件的默认样式其实也有相对的参数去调。但我最近在做的项目想加入dark模式。于是很多组件没有dark的配置。要是在o…