vue+vant

使用VUE+Vant组件库实现小米商城app

1cd到某个文件夹，在命令窗口输入vuecreatexiaomi创建vue项目2在vscode中打开项目xaomi，可以看到以下项目结构node_modules包与依赖存放位置public根模板文件src项目源文件.gitigonore当文件用git方式上传（git忽略文件）babel.config.jsES6转es5配置文件package.json项目配置文件README.md项目说明文件yar
祈心无尘·2020-08-08 19:19

Vue+vant移动端页面的开发流程

1、开发前该准备的工具和库一、创建项目流程下载node.js和git工具在码云网站上创建仓库，在桌面上打开gitbash运行gitclone（加上ssh的编码）npminstall-g@vue/cli安装vue脚手架工具vuecreatemy-project(或者winptyvue.cmdcreate)创建项目运行gitinit(此命令初始化一个新本地仓库)、gitadd.和gitcommit-m
dell_wu_gao_jian·2020-08-08 15:30

单页面开发PC端（Vue+Element）和移动端（Vue+Vant的H5）项目踩坑记录

遇到的问题（一）由于这个项目是和我们的一个PC端的项目是放在一个服务器上的，并且这个PC端的项目框架之前一个人做的有一些问题，导致我没能实现多页面开发，H5页面和PC的页面共用一个index.html，在实现H5的rem布局时，费了老大劲。各位都知道，rem单位是基于html标签的font-size为基准，但是PC项目和H5项目共用一个.html势必会产生影响。开始我用的Vant文档中建议使用的R
竹谷子·2020-08-08 10:44

使用vue+vant实现移动端开发，页面跳转后再回退到原来页面的浏览位置

场景：使用vue+vant做移动端开发，当打开a页面浏览到某个位置，点击跳转到b页面，然后再后退回a页面浏览的那个位置。解决办法：使用store存储滚动条的位置。
崔lc·2020-08-07 20:03

vue+vant省市区选择组件

Area省市区选择+Popup弹出层,效果如下：在main.js中引入Area+Popuphtml:选择日期{{province}}-{{city}}-{{area}}js:exportdefault{data(){return{show:false,itemCount:3,areaList:AreaJson,province:’’,city:’’,area:’’}},methods:{showP
LTayS13·2020-08-07 16:33

vue+vant 实现列表上下排序

vue+vant实现列表上下排序{{item.name}}0">上移下移importVuefrom'vue'import{Cell,CellGroup,Button}from'vant'Vue.use(
Coninsi"·2020-08-01 05:17

vue+vant的Indexbar索引栏的内容加载问题

vant的IndexBar使用问题按照官方的写法引入前端渣渣第一次使用vant的IndexBar时遇到的问题；根据公司的业务需求，需要做一个移动端的H5demo,技术选型使用了vue+vant按照官方的写法引入
weixin_41060844·2020-08-01 05:34

vue+vant商品列表批量倒计时

最近因为一个项目需要用到商品批量倒计时，当时使用vant封装好的组件CountDown编写起初不知道“timeData”这个对象只需要传time的时间戳就可以自动生成，走了一大波弯路，现在想想也是醉了最开始写这个倒计时的时候没有考虑到使用当前服务器时间问题，只获取了本地时间newDate().getTime()，然后发现这个不行,只要用户修改下手机本地时间，这个倒计时就不行了，有安全隐患，在网上也
余温无痕·2020-08-01 02:19

vue+vant动态生成

v-for=（item,index）in4只渲染最后一条:::::::::将字符串4转为NUMBER格式；methods：{confirmTest(value,name){//console.log(value,name)this.$set(this.unit,name,value)//this.unit[name]=value//console.log(this.unit)},}
沐风系大佬·2020-07-31 23:00

vue+vant Dialog弹出框异步关闭

vue+vantDialog弹出框在使用Dialog组件时，因为官方文档说明不够详细，导致踩坑。使用场景：点击删除时友好提示（如图）：下面整理出两种使用方式：第一种：（可以在回调函数中使用方法中的参数）methods:{del(id){this.$dialog.confirm({message:'确认删除？',beforeClose:((action,done)=>{if(action==='co
卖女孩的小火柴~·2020-07-31 23:31

VUE+Vant 实现图片上传

https://blog.csdn.net/weixin_34049948/article/details/91388526methods:{onRead2(file){letcontent=file.file;letdata=newFormData();data.append('img',content);this.axios.post('图片上传地址',data).then((res)=>{l
大海无量波涛凶·2020-07-31 22:35

vue+vant 按需引用控件，没有vant样式解决办法

前言：最近分离一个vue项目，把代码分离后，所需要的包均已安装。最后发现运行后，没有vant的样式。一度以为是版本问题，重新安装原来版本后还是无法解决。于是再去看了下官网的文档，成功解决问题，vant样式出来了。解决办法如下：这里看好了按需引入组件，需要安装一个包npmibabel-plugin-import-D安装后，需要去.babelrc文件添加如下代码["import",{"libraryN
欲掩不从心·2020-07-31 21:17

vue+vant 扫码（jssdk）

效果：第一步：后台配置js接口安全域名域名规则：例:https://admin.serve.com.cn；填写：serve.com.cn；微信jssdkconfig:invalidsignature签名错误,就是域名没配置好；没了代码：//安装jssdkyarnaddweixin-js-sdk扫一扫importVuefrom"vue";import{Button,Toast,Dialog}from
刘白超·2020-07-31 21:04

vue+vant 微信公众号内嵌单页面获取openid

介绍：以前做的是，直接www.baidu.com?openid=xxx,由第三方提供openid，现在需要我们包产到户，全部有我们来做。2019-12-16：由于vuex刷新会重置，所以导致在一个有路由守卫的页面刷新，会出现空白，后台报错：[获取openid的results:{"errcode":40163,"errmsg":"codebeenused,hints:[req_id:PHHFbxXI
刘白超·2020-07-31 21:04

vue+vant 动态表单

效果如图：代码如下：平台满意度问卷{{item.title}}{{n.title}}提交importVuefrom"vue";importaxiosfrom"axios";importwxfrom'weixin-js-sdk'exportdefault{data(){return{type:'',form:{},questionArr:[],};},name:"Question",created(
刘白超·2020-07-31 21:33

vue+vant webApp图片上传和编辑时图片回显

import{CellGroup,Cell,Uploader}from"vant";components:{[CellGroup.name]:CellGroup,[Cell.name]:Cell,[Uploader.name]:Uploader},data(){return{show:{classCode:"",userName:"",honorsName:"",issuingUnit:"",ob
晓未苏·2020-07-31 17:21

Vue+Vant实现文件上传

文章目录引入Vant组件定义绑定的初始数据、引入axios调用接口引入Vant组件定义绑定的初始数据、引入axios调用接口methods:{afterRead(file){//此时可以自行将文件上传至服务器console.log(file);constformData=newFormData();//声明一个FormData对象formData.append("file",file.file);
TiAmo_907·2020-07-31 15:12

小猿圈web前端之移动端Vue+Vant实现上传压缩旋转图片功能

小猿圈web前端讲师为了大家更好的学习前端知识决定每天分享一个web前端案例，希望对你与学习前端的你有所帮助，今天分享的是移动端Vue+Vant的Uploader实现上传、压缩、旋转图片等功能的详细介绍
weixin_34357436·2020-07-29 06:22

vue + vant 移动端 手机端时间插件点击自带键盘和选择时间表同时弹出问题。

最新在写一个新项目，就是用vue+vant做的一个app,之前没用过vant来写过。
qq_36165747·2020-07-16 06:56

vue+vant 购物车的全选和反选

这是效果图:话不多少,直接上代码:{{item.shopTitle}}//这是商品组件全选不含运费exportdefault{data(){return{cartInfoList:[{id:1,shopTitle:'苹果旗舰店',//商店名checked:false,//商店选择的状态checkedCount:0,//此商店被选择的商品数量productList:[{isChecked:false
wangjinsheng593·2020-07-15 09:54

Vue+Vant制作单选全选全不选以及删除按钮van-checkbox

在官网上看到vant组件特别好用，就尝试使用checkbox制作单选全选，由于是下午头脑不清楚所以没想通思路，导致了一部分的错误，经过我的老大指点，才想通如此简单的思路，就是都亮和都不亮的区别。全选全不选1.引入组件importVuefrom‘vue’;import{Checkbox,CheckboxGroup}from‘vant’;Vue.use(Checkbox).use(CheckboxGr
海参李·2020-07-15 06:05

vue+vant公众号项目踩的坑

vant–List组件在页面初始化后连续触发多次的问题，如下图：代码：html代码：内容data数据category:{//分类twoCate:[],//二级分类twoCate_id:'all',//二级分类选中iddemoTab:null,//落地案例三级tabkownStoreTab:null,//知识库三级tabdropLoading:true,//上拉加载finished:false,//
code.Man·2020-07-13 21:52

vue+vant 组件图片上传自定义删除组件

使用vant组件中的图片上传功能，删除不完善，如何自己定义vant中图片上传功能的删除功能；1、html模板文件：css:.van-doc-demo-block__title{margin:0;font-weight:400;font-size:.14rem;color:rgba(69,90,100,.6);padding:.35rem.15rem.15rem;}.upfile-img.weui-
onlylele·2020-07-13 08:34

vue+vant列表上拉刷新、加载跟多

{{item.photoList.length}}{{item.honorsName}}班级：{{item.className}}颁发机构：{{item.issuingUnit}}姓名：{{item.userName}}发布人：{{item.createMan}}获取日期：{{item.obtainDate}}奖项说明：{{item.explainMes}}编辑删除{{item.getDate}}
晓未苏·2020-07-13 04:58

vue+vant项目中 rem适配配置

vantrem适配，需要安装两个插件postcss-pxtorem是一款postcss插件，用于将单位转化为remlib-flexible用于设置rem基准值postcss-pxtorem：npminstallpostcss-pxtorem--save-devlib-flexible：npmi-Samfe-flexiblemain.js引入amfe-flexibleimport'amfe-flex
陨石猎人·2020-07-10 00:29

使用vue+vant搭建商城

前几天看到有赞的vant，顿时对做一个商城项目产生了兴趣。说干就干，让我们来一步步实现。预览地址：http://zy.whaoot.com/dmodel/i...已实现购物车逻辑，商城首页等功能。商城首页：使用vuex搭建的购物车，将加入购物车的商品存储到vuex，实现购物车的预览与购物车里对商品的数量的选择（包括左滑删除商品），附上购物车图片：商城的一个重点的功能，就在于购物车的实现。vuex可
weixin_34192732·2020-07-08 17:10

有赞前端 UI框架「Vant」在离线无网络环境中使用 icon 无法显示的问题

Vant官网在内网中部署Vue+Vant的项目时，发现所有的icon图标全部是小方块无法正常显示。查看网络请求，发现图标字体引用的在线文件。
ianly梁炎·2020-07-04 18:45

vue+vant 表单

1.身份证data(){return{card:'',cardIdTime:false,//验证身份证}}cardRule(val){//验证身份证letregIdCard=/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-
刘白超·2020-07-02 17:24

Vant—vue+vant图片懒加载+图片预览

1、引入图片预览的组件import{ImagePreview}from'vant'2、页面布局3、jsdata(){return{albumList:[]}},created(){this.albumList=photoList[this.id].list//需要展示的数组},methods:{getImg(index){//点击图片的时候传入数组进行预览，并且传递index，显示是当前点击的图片
Poppy_LYT·2020-07-01 12:58

vue+vant上拉刷新下拉加载

exportdefault{data(){return{list:[],loading:false,//是否处于加载状态finished:false,//是否已加载完所有数据isLoading:false,//是否处于下拉刷新状态}},methods:{onLoad(){//上拉加载setTimeout(()=>{for(leti=0;i{this.list=[];this.finished=fa
weixin_44209220·2020-06-29 12:24

vue前端开发使用vant遇到的坑

需求：vue+Vant项目实现一个计时功能，显示时分秒并且周围圆环变化，选用了VantCircle组件，版本是^1.6.15。bug：Circle组件在移动设备上的显示出现偏移。
weixin_42383047·2020-06-29 04:04

vue+vant移动端遇到的那些问题

1、项目引用了lib-flexible跟px2rem-loader做适配，然后真机测试的时候发现字体在手机上显示的很小。【推荐去看下px2rem-loader的文档】原因+解决：百度说应该在后面加上/*px*/（font-size:14px;/*px*/），这里这么设置时，字体的大小要为两倍，如你想让字体显示为14px,css代码则为【font-size:28px;/*px*/】，对于border
贼猫子·2020-06-29 02:20

vue+vant使用图片预览功能ImagePreview的问题

如果您搜到这篇文章的话，那员外估计您遇到跟我一样的问题了，即在打开图片预览功能后，如果不关闭预览的图片，同时改变路由的话，会发现即使路由改变了，预览的图片还在文档的最顶层显示，如图：着实让员外百思不其解，在调用vant的ImagePreview)图片预览组件中，没有html，有的只是引入ImagePreview和js的调用。在这种情况下，员外是想自己添加任何方法都没法实现的，同时想在离开路由时的b
weixin_34413103·2020-06-28 19:31

VUE+Vant 实现图片上传

页面代码：复制代码使用v-for循环数组hallImg，hallImg中存放的是数据库返回的图片URL地址data(){return{hallImg:[],}}复制代码使用vant-uploader组件，:after-read="onRead2"触发onRead2方法：methods:{onRead2(file){letcontent=file.file;letdata=newFormData()
weixin_34049948·2020-06-28 10:32

vue 图片上传，图片预览

因为项目是vue+vant，这里图片预览直接使用vant的组件，不做多余的封装html结构主要选择图片按钮，图片预览区，选择图片的inputimagePreviewShow=true">添加图片css样式样式文件有些冗余
Corner1990·2020-06-28 05:50

vue+vant实现上拉刷新，下拉加载

vue+vant下拉刷新，上拉加载这是前段HTML代码：{{item.integralType==1?'注册积分':item.integralType==2?'
chantel186·2020-06-25 15:17

VUE+Vant实现下拉刷新和上拉加载

使用Vant的PullRefresh组件和List组件{{item.title}}{{item.content}}{{item.create_time}}vant-pill-refresh实现下拉刷新，vant-list实现上拉加载exportdefault{name:"newsManage",data(){return{data:[],data1:'',total:1,//总条数page:1,/
marsur·2020-06-24 13:22

使用vscode开发vue项目

前端vue+vant学习1、开发工具选用VisualStudioCode，地址：https://code.visualstudio.com/Download插件安装AutoCloseTagAutoRenameTagBeautifyChineseCSSpeekDocumentThisESlintfilesizeGitlens-GitsuperchargedHTMLCSSsupportHTMLsnip
testover·2020-06-24 03:50

vue 轮播写考试题和提交答案

1.最近一直忙着做项目都没时间来总结了，最近的手里的三个项目，我都采用的用vue+vant在适当的用原生javascrpipt来做一些特效和功能的实现。2.按照我的惯例先上效果图，有图有真相嘛。
新叶之扉之丹儿·2020-06-22 09:01

解决 用vue+vant 写顶部tab栏 做排班表的bug

主要的更改是解决了日期能到31/32的问题，实现了到月底自动切换到下一月的1号这里博主自己封了一个新的函数主要用到了setDate（）这个时间函数//获取几天后日期dateCount(arg,date){vardate1=arg;vardate2=newDate(date1);date2.setDate(date2.getDate()+parseInt(date));vartimes=date2.
斯昂·2020-06-22 00:09

记录springboot+vue多前端在NGINX上面的配置

两天的时间爬坑，做一个记录，其中的关键点：1、采用前后端分离，前端是vue+vant,后端是springboot；2、前端部署在nginx服务器，采用端口代理指向后端端口；3、前端采用HTTPS，后端采用
weixin_42372595·2020-06-21 12:18

vue+vant使用图片预览功能ImagePreview的问题解决

如果您搜到这篇文章的话，那员外估计您遇到跟我一样的问题了，即在打开图片预览功能后，如果不关闭预览的图片，同时改变路由的话，会发现即使路由改变了，预览的图片还在文档的最顶层显示，如图：着实让员外百思不其解，在调用vant的ImagePreview图片预览组件中，没有html，有的只是引入ImagePreview和js的调用。在这种情况下，员外是想自己添加任何方法都没法实现的，同时想在离开路由时的be
刘员外·2020-04-10 11:24

Vue+Vant ui实现日期时间选择

Vue+Vantui实现日期时间选择VantDatetimePicker时间选择1、安装Vantuinpmivant-S2、在main.js中引入Vantui//引入vantimportVantfrom'vant'import'vant/lib/index.css'Vue.use(Vant)3、具体使用VantDatetimePicker组件详解exportdefault{data(){retur
Eddie·2020-04-10 02:19

Vue+Vant ui实现图片预览

Vue+Vantui实现图片预览Vant图片预览1、在所需要使用的组件里面引用import{ImagePreview}from'vant';2、具体使用详解//通过函数传参的方式把图片数组和位置索引放入到ImagePreview配置对象里面import{ImagePreview}from"vant";//引入Vant图片预览组件exportdefault{data(){return{};},met
Eddie·2020-04-09 17:02

2020-03-25

庚子鼠年己卯月丁卯日描述vue+vant开发随笔Vant开发Q：路由菜单空白问题？
chang1024·2020-03-25 23:00

Vue 图片压缩并上传至服务器功能

本文主要讲解基于Vue+Vant，实现移动端图片选择，并用Canvas压缩图片，最后上传至服务器。还会封装一个工具类，方便直接调用。
solocoder·2020-01-15 11:04

vue+vant实现商品列表批量倒计时功能

最近因为一个项目需要用到商品批量倒计时，当时使用vant封装好的组件CountDown编写起初不知道“timeData”这个对象只需要传time的时间戳就可以自动生成，走了一大波弯路，现在想想也是醉了最开始写这个倒计时的时候没有考虑到使用当前服务器时间问题，只获取了本地时间newDate().getTime()，然后发现这个不行,只要用户修改下手机本地时间，这个倒计时就不行了，有安全隐患，在网上也
余温无痕·2020-01-13 09:56

【免费课程】《vue+vant实现网易严选移动端app》网易云课堂直播

适用人群1、前端零基础，只会html、css即可；2、会vue、node，但是想要提高自己的；3、网易云课堂-在线直播；课程概述1、面向零基础人群；2、全面讲解vue项目的开发与实现；3、掌握项目开发流程；4、积累求职经验；5、每节直播课程，网易云课堂提供视频回放；6、实时观看我的开发过程；课程规划：大概70节左右，涵盖以下知识点：vue使用；vant优雅安装；网易移动端适配方案-代码讲解；rem
我是老尚·2019-08-28 12:51

移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能

面向百度开发htmljsdata(){return{files:{name:"",type:""},headerImage:null,picValue:null,upImgUrl,}},//组件方法获取流asynconRead(file){//console.log(file);//console.log(file.file);this.files.name=file.file.name;//获取
我想当个土老板·2019-06-10 11:39

车牌号自定义虚拟键盘(vue+vant)

第一次写这种自定义键盘，当时想当然的想了想，以为很简单，没有上网查demo和方法，就直接去写了。事实上这个东西是很简单的，只不过是我想复杂了，然后绕了一圈，最后才找到目前这个比较好的方法。心路历程开始我以为上面的输入框就是一个个input拼接起来的，或者是一个input用了letter-spacing属性让输入框中的文字分开，然后在输入内容的时候，判断一下输入了几个值，让当前input失去焦点，让
刘员外__·2019-04-12 14:07
上一页 1 2 3 4 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他