vant-weapp:在mpvue写小程序中，组件说明中外部样式类的使用

最新推荐文章于 2024-04-06 23:52:38 发布
最新推荐文章于 2024-04-06 23:52:38 发布
阅读量5.4k 收藏
点赞数 1
分类专栏： 前端 爬坑 文章标签： mpvue 小程序 van-weapp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gabriel_wei/article/details/94392764
版权
前端 同时被 2 个专栏收录
183 篇文章 6 订阅
订阅专栏
爬坑
49 篇文章 1 订阅
订阅专栏

在vant-weapp的很多组件中，可以看到外部样式类,比如这个步进器
https://youzan.github.io/vant-weapp/#/stepper
在这里插入图片描述

那么在mpvue中该如何使用呢？

<van-stepper :value="item.value" :min="0" :data-index="index" @change="stepChange" input-class="c-inputclass" plus-class="c-plusclass"
  minus-class="c-minusclass" />

注意input-class前面没有:

Gabriel_wei
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
taro3-vant-sample:Taro3 中使用 vant-weapp 的示例
05-26
taro3-vant-sample Taro3 中使用 vant-weapp 的示例 React 版本 需要关注的点 引用 vant 组件 引用 vant 组件需要在页面的 config 文件中进行配置，如 export default { navigationBarTitleText: '首页', usingComponents: { 'van-button': '../../components/vant-weapp/dist/button/index' } } 值得注意的是，无论是在页面还是组件中引用 vant 组件，都是在页面的 config 中进行配置引用。 配置 copy 小程序原生文件 vant 组件中包含一些小程序原生文件的依赖，目前 Taro 没有对这些依赖进行分析，需要配置 copy 移动到 dist 目录中，例如需要 copy wxs 和样式文件，
vant-weapp：轻量，可靠的小程序UI组件库
02-12
轻量，可靠的小程序UI组件库 :fire: :rainbow: :rocket: 介绍 Vant是有赞前端团队开源的移动端组件库，于2017年开源，已持续维护4年时间。Vant对内承载了有赞所有核心业务，对外服务十多万开发者，是发展中国家主流的移动端组件库之一。 目前Vant官方提供了， 和，并由社区团队维护和。 预览 扫描下面的小程序二维码，体验组件库示例： 使用之前 使用Vant Weapp前，请确保您已经学习过微信官方的和。 安装 方式一。通过npm安装（推荐） 小程序已经支持使用npm安装第三方包，详见 # 通过 npm 安装 npm i @vant/weapp -S --production # 通过 yarn 安装 yarn add @vant/weapp --production # 安装 0.x 版本 npm i vant-weapp -S --production 方式二。下载代码 直接通过git下载Va
微信小程序开发（第五期）：npm包的使用、Vant Weapp 组件库的使用 && API Promise优化 、全局状态管理 && store 、分包、分包预下载 && 自定义配置tabBar
最新发布
Forever_Hopeful的博客
04-06 1164
微信小程序开发（第五期）：npm包的使用、Vant Weapp 组件库的使用 && API Promise优化 、全局状态管理 && store 、分包、分包预下载 && 自定义配置tabBar
参照Vant-Weapp开发的抖音原生小程序UI组件库.zip
02-25
如题，抖音小程序源码，易于运行部署，用于学习交流
vue 使用vant2的van-stepper步进器,阻止事件冒泡
qq_36618604的博客
05-30 750
在van-stepper步进器上加div 再添加@click.stop事件，即可解决问题。
【微信小程序】van-stepper购物车事件冒泡
weixin_42575720的博客
05-27 727
#####思路： 我研究最简单的方法就是外层加一个标签，用catchtap去阻止 #####关键代码 html： <view catchtap="stepper"> <van-stepper value="{{ item.amount }}" long-press="{{ false }}" data-index='{{index}}' data-item='{{item}}' input-width="30px" button-size="20px" min="1"
vantweapp使用外部样式类custom-class等
weixin_47124112的博客
08-17 6384
比如单元格cell给的外部样式类="< van-cell title = " 单元格 " value = " 内容 " title-class = " cell-title " value-class = " cell-value " />"
mpvue中引用Vant-weapp时，没有把原来的px转换成rpx问题解决办法（踩坑记录）
web小袋鼠
08-13 2797
由于node_modules不会编译到dist目录中，所以使用npm安装的vant-weapp还需要将仓库中的vant文件夹复制到你的项目目录static下，至此问题就出在放在static文件夹中的文件打包的时候不会被webpack打包进去，使用的时候还是会按照vant-weapp固有的px单位，如果每次引用一个组件都要修改的话太麻烦，所以也可以修改下webpack配置文件实现编译转换： 修改文件...
mpvue + Vant Weapp 开发小程序改变 Vant 组件样式
欲穷三千界
12-28 4164
&amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;container&amp;quot;&amp;amp;gt; &amp;amp;lt;van-button type=&amp;quot;primary&amp;quot; size=&amp;quot;large&amp;quot; custom-class=&amp;quot;login-btn&amp;quot;&amp;amp;gt;登录&amp;amp;lt
Vant-Aliapp：支付宝小程序版本Vant组件库
02-26
Vant Aliapp是移动端Vue组件库的支付宝小程序版本，两者基于相同的视觉规范，提供一致的API接口，助力开发者快速构建小程序应用。 Vant Aliapp通过小程序转换器基于转换得到，并进行了少量的兼容适配调整。 预览 ...
微信小程序引入vant-weapp
01-03
1 在桌面新建demo文件夹，然后打开微信开发者工具，选择demo文件夹新建小程序项目 2 用cmd或者powershell找到该项目目录，在该目录下进行安装vant-weapp 步骤一 通过 npm 安装 # 通过 npm 安装 npm i @vant/weapp -...
vant+vue 批量订货购车操作和布局，及删减功能等；
onlylele的博客
07-04 1834
html: <?php $this->assign('title', SITE_NAME); $this->assign('css', $this->Html->css(['css', 'wechat/typescss'])); $this->assign('js', $this->Html->script(['axios', 'wechatty...
Vant源码解析(三)van-stepper步进器
我的博客
07-18 1559
先说下自己的开发思路，然后在对照下vant组件的思路，来查找下自己的不足。这个步进器有加和减的功能，还有输入的功能，限制最小和最大的功能。
Vant 步进器 van-stepper 阻止事件冒泡
grootbaby
08-14 3914
一般情况下 Vue 阻止事件冒泡用 .stop 即可解决 Vue 阻止事件默认行为用.prevent 解决 今天这里是介绍Vant 框架里写购物车，需求是购物车中的商品点击也可以进入到商品详情，于是在 card 标签加了 click 事件，就导致点击步进器van-stepper增加减少也会触发 card 的 click ，用原生事件 event.stopPropagation()即可完美解决 <van-stepper v-model="val.quantity" ...
使用electron-vue出现Webpack ReferenceError: process is not defined
热门推荐
沧笙踏歌的博客
06-18 1万+
问题描述 在使用electron-vue时候，运行npn run dev,会出现下面的错误 解决 没有搜索到合适的答案，在GitHub的electron-vue的issue中找到了 方案一 简单粗暴，不知道会不会有什么影响，直接将这段代码去掉 方案二 根据别人在issue里面的写法,.electron-vue/webpack.web.config.js 和.electron-vue/webp...
python3操作win32com报错：raise AttributeError(“%s.%s“ % (self._username_, attr))
沧笙踏歌的博客
09-14 1万+
原始代码 from win32com.client import Dispatch app = Dispatch('Word.Application') # 新建word文档 # doc = app.Documents.Add() app.displayalerts=0 app.visible=0 # 打开已有文档 doc = app.Document.Open(r'D:\python\jieba\Win32com\1.docx') s = app.Selection s.text = '123' sty
vant-weapp:在小程序中使用van-popup 组件时候爬坑
沧笙踏歌的博客
06-28 1万+
使用van-popup的时候一定要在其内部写一个总的div，否则给其设置宽高不起作用 例如：给clearCache类设置宽高会有效果，如果将这个类直接放到van-popup不会有效果 <van-popup :show="show"> <div class="clearCache"> <div class="clearCache-title">确定清除...
vant-weapp组件得外部样式类引用说明
沧笙踏歌的博客
07-16 1万+
以时间选择插件datetime-picker为例 <van-datetime-picker type="datetime" value="currentDate" :show-toolbar="false" :visible-item-count='3' active-class="healthSet-date" /> 这里得active-class="healt...
uniapp开发微信小程序需要使用vant-weapp组件库，hbuild编译器如何安装vant-weapp组件
07-27
要在HBuilderX中安装vant-weapp组件库，你可以按照以下...完成上述步骤后，你就可以在uni-app项目中使用vant-weapp组件库了。记得按照vant-weapp的文档来引入和使用组件。希望能帮到你！如果有更多问题，请继续提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值