vant
笑望灬星辰
这个作者很懒,什么都没留下…
展开
-
vue移动端项目vant组件库之cascader级联选择
vue vant 级联选择<template> <div> <van-field v-model="fieldValue" is-link readonly label="地区" placeholder="请选择所在地区" @click="show = true" /> <van-popup v-model="show" round position="bottom原创 2021-02-25 13:59:28 · 13373 阅读 · 7 评论 -
vue价格日历
vue酒店入住 vant自定义日历显示不同的价格<template> <div> <!-- 日历demo --> <van-cell title="酒店入住" :value="date" @click="show = true" is-link /> <van-calendar v-model="show" type="range" :formatter="formatter"原创 2021-02-23 13:55:51 · 933 阅读 · 1 评论 -
vue移动端项目vant组件库之calendar
vue移动端项目vant组件库之calendar<template> <div> <h3>选择单个日期</h3> <van-cell title="选择单个日期" :value="date" @click="show = true" is-link /> <van-calendar v-model="show" @confirm="onConfirm" /> <h3>选择日期区间<原创 2021-02-23 13:03:16 · 2923 阅读 · 0 评论 -
vue移动端项目vant组件库之toast
vue移动端项目vant组件库之toast具体属性<template> <div> <van-button type="primary" @click="handler1">基础提示</van-button> <van-button type="primary" @click="handler2">加载提示</van-button> <van-button type="primary" @clic原创 2021-02-23 00:09:27 · 1203 阅读 · 0 评论 -
vue移动端项目vant组件库之style内置样式
vue移动端项目vant组件库之style内置样式<template> <div> <h3>文字省略</h3> <!-- 最多显示一行 --> <div class="van-ellipsis"> nklnhkn能看出那可能nklnhkn能看出那可能nklnhkn能看出那可能nklnhkn能看出那可能nklnhkn能看出那可能nklnhkn能看出那可能nklnhkn能看出那可能nklnhkn能看原创 2021-02-22 14:06:36 · 1564 阅读 · 0 评论 -
vue移动端项目vant组件库之popup
vue移动端项目vant组件库之popup<template> <div> <van-button type="primary" @click="show = true">打开弹出层</van-button> <!-- position top bottom right left 默认中间 style 直接配置样式 一般用于配置 宽、高、阴影等 round原创 2021-02-22 01:04:25 · 7407 阅读 · 0 评论 -
vue移动端项目vant组件库之layout
vue移动端项目vant组件库之layout<template> <div> <h3>设置列元素间距</h3> <van-row :gutter="20"> <van-col :span="8" tag="div"> <!-- 这里做布局弄一个父级标签 --> <div class="bg">span: 8</div> &l原创 2021-02-22 00:20:21 · 2968 阅读 · 0 评论 -
vue移动端项目vant组件库之image
vue移动端项目vant组件库之imagemain.jsimport { Lazyload } from 'vant';Vue.use(Lazyload);页面路由组件<template> <div class="pd30"> <h3>原图 16:11</h3> <img style="width: 160px; height: 110px" src="https://img01.yzcdn.cn/原创 2021-02-21 19:09:29 · 2879 阅读 · 1 评论 -
vue移动端项目vant组件库之icon
vue移动端项目vant组件库之icon<template> <div class="pd50"> <h3>基础用法</h3> <van-icon name="chat-o" /> <h3>某一张网络图片资源</h3> <van-icon name="https://avatar.csdnimg.cn/3/7/B/0_hu1628299958.jpg" /> <原创 2021-02-21 18:27:57 · 2685 阅读 · 0 评论 -
vant组件库之tag渐变色不起作用的原因
vant组件库之tag渐变色不起作用的原因查看源码从源码部分可以看出,如果传入 plain 属性则color 为字体颜色,反之为背景颜色, 用的是 backgroundColor 并不是 backgroundImage 所以背景并不能使用渐变色作为背景色明白原理之后处理就好很多了方案一 在不影响原来功能的前提下修改源码将 var key = plain ? 'color' : 'backgroundColor';修改为 // 加入undefined 是因为color不传入时为 un原创 2021-02-21 17:36:11 · 918 阅读 · 6 评论 -
vue移动端项目vant组件库之tag
vue移动端项目vant组件库之cell直接上代码<template> <div class="pd50"> <!-- Tag标签的属性与Button按钮的大体相同 --> <!-- 基础用法 其他第三方ui库的颜色可能不一致 --> <h2>基础用法</h2> <van-tag type="primary">标签</van-tag> &l原创 2021-02-21 16:20:21 · 3294 阅读 · 0 评论 -
vue移动端项目vant组件库之cell
vue移动端项目vant组件库之cellvue移动端项目按需引入vant组件库vant组件库官网 cell单元格 .van-cell__title 样式 文字默认居中 .van-cell__value 文字默认右靠齐 is-link 右侧箭头 required 必填星号 to 路由跳转 url 跳转链接 center 垂直居中 当有label 或者title占位较多时 左右垂直居中交整齐 arrow-direction 右侧箭头的方向 left up原创 2020-05-31 23:38:18 · 30203 阅读 · 6 评论 -
vue移动端项目vant组件库之button
vue移动端项目vant组件库之buttonvue移动端项目按需引入vant组件库vant组件库官网<template> <div class="box"> <!-- button 注意要点 type 对应样式类名 如 .van-button--primary type="primary" 对应绿色 type="info" 对应蓝色 其他type 和element-ui是一样的 没原创 2020-05-31 20:49:17 · 10982 阅读 · 6 评论 -
vue项目中按需引入vant组件
[b][size=24px]vue项目使用vant组件库[/size][/b]vant组件库官网 [color=#0000FF][url=https://youzan.github.io/vant/#/zh-CN/quickstart][/url][/color]通过 npm 安装npm i vant -S 或者 cnpm ivant -S安装插件npm i babel-plugin-import -D然后在.babelrc 中添加配置 样式按需加载{ "plugins":原创 2020-05-31 00:32:46 · 3533 阅读 · 0 评论