草庐IT

Vant UI 中 van-collapse 下拉折叠面板如何默认展开第一项

问题重现        最近在做项目时,有一个需求是让van-collapse下拉折叠面板的第一项默认是展开状态;我使用到了VantUI组件,首先按照官网文档的写法直接引入:制定拜访计划保险保障分析制作计划书会客厅讲解修改备注修改备注exportdefault{data(){return{activeNames:['1'],};},};默认每一项都是不展开的: 需求实现先看官方文档CollapseProps:参数说明类型默认值v-model当前展开面板的name手风琴模式:number|string非手风琴模式:(number|string)[]-accordion是否开启手风琴模式boole

vant-weapp 全局主题样式

vant-weapp全局主题样式什么是VantWeappVantWeapp是有赞前端团队开源的一套小程序UI组件库,助力开发者快速搭建小程序应用。它所使用的是MIT开源许可协议,对商业使用比较友好。VantWeapp官方文档地址https://youzan.github.io/vant-weapp定制全局主题样式VantWeapp使用CSS变量来实现定制主题。关于CSS变量的基本用法,请参考MDN文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties定制全局主题样式在app.wxss中,写入

vant-weapp 全局主题样式

vant-weapp全局主题样式什么是VantWeappVantWeapp是有赞前端团队开源的一套小程序UI组件库,助力开发者快速搭建小程序应用。它所使用的是MIT开源许可协议,对商业使用比较友好。VantWeapp官方文档地址https://youzan.github.io/vant-weapp定制全局主题样式VantWeapp使用CSS变量来实现定制主题。关于CSS变量的基本用法,请参考MDN文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties定制全局主题样式在app.wxss中,写入

微信小程序集成vant

   微信小程序集成vant,大概的过程先通过npm安装vant包->微信小程序设置npm环境变量->将npm中的vant包导成miniprogram_npm   开发环境macOS,微信小程序模版【支持腾讯云】安装vant包cdminiprogram#通过npm安装npmi@vant/weapp-S--production配置微信小程序的样式,去除miniprogram/app.json中"style":"v2"配置项目config中的packageJsonPath和miniprogramNpmDistDirpackageJsonPath->npm的package.json文件的位置mini

微信小程序集成vant

   微信小程序集成vant,大概的过程先通过npm安装vant包->微信小程序设置npm环境变量->将npm中的vant包导成miniprogram_npm   开发环境macOS,微信小程序模版【支持腾讯云】安装vant包cdminiprogram#通过npm安装npmi@vant/weapp-S--production配置微信小程序的样式,去除miniprogram/app.json中"style":"v2"配置项目config中的packageJsonPath和miniprogramNpmDistDirpackageJsonPath->npm的package.json文件的位置mini

vue3+vant+vue-router+axios+pinia+vite框架搭建

vue3的官网地址:https://cn.vuejs.org/;这里要说一下,vue3不支持IE11,如果要兼容IE11及其一下,不建议使用vue3。创建vue脚手架,如果你需要使用ts,则需要node版本>=16。本文按照大于16的node版本来搭建一个vue3的脚手架。第一步:>npminitvue@latest  如果想创建指定版本,则使用  npminitvue@指定版本;“>”不要带上;  运行之后,会让你填写项目名称和选择你需要的插件,如下图     用空格键切换No/Yes;  Projiectname:项目名称;  Packagename:package.json里面name属

vue3+vant+vue-router+axios+pinia+vite框架搭建

vue3的官网地址:https://cn.vuejs.org/;这里要说一下,vue3不支持IE11,如果要兼容IE11及其一下,不建议使用vue3。创建vue脚手架,如果你需要使用ts,则需要node版本>=16。本文按照大于16的node版本来搭建一个vue3的脚手架。第一步:>npminitvue@latest  如果想创建指定版本,则使用  npminitvue@指定版本;“>”不要带上;  运行之后,会让你填写项目名称和选择你需要的插件,如下图     用空格键切换No/Yes;  Projiectname:项目名称;  Packagename:package.json里面name属

vant 的表单校验

vant的表单校验个人理解:将rules当成一个对象去理解,传参时可以是整个对象或者对象的某一属性常用两种校验方式1,正则表达式1.1自定义校验规则(校验规格也可传入多条):表单::rules="telRules"data:telRules:[{required:true,message:'手机号不能为空',trigger:blur,},{validator:value=>{return/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(value)},message:'请输入正确的

vant 的表单校验

vant的表单校验个人理解:将rules当成一个对象去理解,传参时可以是整个对象或者对象的某一属性常用两种校验方式1,正则表达式1.1自定义校验规则(校验规格也可传入多条):表单::rules="telRules"data:telRules:[{required:true,message:'手机号不能为空',trigger:blur,},{validator:value=>{return/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(value)},message:'请输入正确的

使用vscode + vite + vue3+ vant 搭建vue3脚手架

 技术栈开发工具:VSCode代码管理:Git前端框架:Vue3构建工具:Vite路由:vue-router4x状态管理:vuex4xAJAX:axiosUI库:vant数据模拟:mockjscss预处理:sass 构建vue3项目 1,安装 vite以管理员身份打开cmd命令窗口,切换到要安装项目的文件夹cd E:\code\web\myvue3安装 vitenpminitvite@latest 输入项目名称,输入包名称,选择Vue(如果上下键不能选择,就手动输入选项,再回车),选择JavaScript,创建完毕。  创建项目生成的文件:2,行vite+vue3项目打开vscode,输入两条