精华内容
下载资源
问答
  • vant使用方法

    2021-03-11 16:04:58
    说明:记载vant官网上没有提及到的或者容易忽略的用法。 1、(form)表单组件:左侧图标、右侧输入框(原官网:左侧文字、右侧输入框) 1、需求写法: <van-field v-model="phone" type="tel" name="手机号...

    说明:记载vant官网上没有提及到的或者容易忽略的用法。

    1、(form)表单组件:左侧图标、右侧输入框(原官网:左侧文字、右侧输入框)

    1、需求写法:
    <van-field
        v-model="phone"
        type="tel"
        name="手机号"
        left-icon="phone"
        placeholder="请输入手机号" />
    2、官网:
    <!-- 输入手机号,调起手机号键盘 -->
    <van-field v-model="tel" type="tel" label="手机号" placeholder="请输入手机号" />
    3、如果是自定义的图标,一般是从iconfont下载的图标,这样的写法:(这里除了可以用左图标也可以用右图标,多写一个right-icon即可)
    <van-field
        v-model="phone"
        type="tel"
        name="手机号"
        left-icon="phone"
        placeholder="请输入手机号">
        <van-icon class="iconfont" class-prefix="my-icon" slot="left-icon" name="phone"></van-icon>
    </van-field>
    4、使用外部图标
    <van-field
      v-model="phone"
      type="tel"
      name="手机号"
      :left-icon="require('@/assets/images/icon.png')"
      placeholder="请输入手机号" />

    /* 引入第三方或自定义的字体图标样式 */

    @font-face { font-family: 'my-icon'; src: url('./my-icon.ttf') format('truetype'); }

    .my-icon { font-family: 'my-icon'; }

    .my-icon-extra::before { content: '\e626'; }

    2、关于项目中引入iconfont字体图标

     

    3、获取验证码展示倒计时的写法:

    首先把验证码写出来:

    <van-field
        v-model="sms"
        type="digit"
        center clearable
        name="短信验证码"
        left-icon="comment"
        placeholder="请输入短信验证码" >
        <template #button>
                <van-button size="small" color="#BE1E38">发送验证码</van-button>
        </template>
    </van-field>

    然后绑定点击事件:

    4、图示单元格的实现

    <van-cell-group>
              <van-cell title="单元格" icon="location-o" is-link/>
              <van-cell title="单元格" icon="location-o" is-link />
              <van-cell title="单元格" is-link>
                <template #icon>
                  <van-icon name="search" class="search-icon" />
                </template>
              </van-cell>
    </van-cell-group>
    
    .search-icon {
        font-size: 16px;
        line-height: inherit;
      }

    上面用的是自带的icon,如果需要自定义的img图标呢?

    <van-cell title="单元格" is-link>
                <template #icon>
                  <van-icon name="./static/usr/icon1.png" class="search-icon" />
                </template>
    </van-cell>

    5、定制主题(版本:"vant": "^2.12.8","vue": "^2.5.2")

    (1)main.js引入less文件。

    import 'vant/lib/index.css'
    import 'vant/lib/index.less'

    ⚠️这一步可能会报错,

    in ./node_modules/vant/lib/index.less

    Module build failed: TypeError: this.getOptions is not a function

    我上网查出是因为less和less-loader版本太高导致的,

    "less": "^4.1.1",

    "less-loader": "^8.0.0",

    改成了

    "less": "^3.1.1",

    "less-loader": "^5.0.0",

    (2)创建resetui.less,在里面写好自定义的一些颜色变量。

    (3)在build/utils.js中引入resetui.less。(这里可以直接覆盖,也可以外引less文件覆盖)

    (4)重启项目即可起效。

    <van-button type="primary">主要按钮</van-button>(只改了边框颜色红色,然后安按钮背景颜色🍊色,绿色边框是按钮自带的)

    完美😏😁😉😌😋

    6、表单中的数据重置

    当用户填写完全部的请求数据后点击提交,这时候可能会需要重置表单中数据到初始状态,如何实现呢?

    this.$data 获取当前状态下的data
    this.$options.data() 获取该组件初始状态下的data

    this.form = this.$options.data().form
    
    this.$data = this.$options.data()

    7、单元格cell右侧显示按钮

    <van-cell title="说明">
         <div slot="extra">
             <van-button color="#BE1E38" size="small">立即转拍</van-button>
         </div>
     </van-cell>

    8、表单中如果含有一个button,则点击这个button会默认触发submit

    解决:设置native-type="button"

    <van-button native-type="button" @click="showCountDown(1)">发送验证码</van-button>

     

     

     

     

     

     

     

    展开全文
  • 主要介绍了在微信小程序中使用vant方法,文中通过示例代码介绍的非常详细,对大家学习或者使用小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • Vant Weapp使用方法

    2020-09-27 11:14:34
    Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用 两大参考神兽: 文档:https://youzan.github.io/vant-weapp/#/intro 开源:...

    Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用

    两大参考:

    文档:https://youzan.github.io/vant-weapp/#/intro
    开源:https://github.com/youzan/vant-weapp

    1:桌面新建一个vant文件夹

    2:打开微信开发者工具,在这个文件里新建项目

    3:从github上面下载源码文件:开源:https://github.com/youzan/vant-weapp

    4:打开文件,复制dist文件

    5:将dist文件黏贴在项目目录里面

    6:打开Vant Weapp的使用文档:文档:https://youzan.github.io/vant-weapp/#/button
    现在来在index界面来使用一个按钮的样式:

    7:在 json 文件中配置button组件,修改路径

    {
     "usingComponents": {
      "van-button": "../../dist/button/index"
    }
    }
    
    
    
    8:wxml界面写一点文档里面的代码
    
    ```r
    <van-button type="default">默认按钮</van-button>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
    

    9:引入成功:然后你就可以依靠文档来进行复制黏贴了,因为自己写css的日子真的又烦人又浪费时间呐。

    最后,为啥推荐这个组件库,因为实在是省力气,拿这个步骤条时间戳来说,前两天写了好一会

    现在只需要三步即可完成,30秒中不到全部搞定,当然了,不推荐新手使用这个复制黏贴的方法,毕竟代码功夫还是需要一笔一画来提升境界的。

    wxml

    json:
    
    {
    "usingComponents": {
      "van-steps": "../../dist/steps/index"
    }
    }
    js
    
    Page({
      data: {
        steps: [
          {
            text: '步骤一',
            desc: '描述信息'
          },
          {
            text: '步骤二',
            desc: '描述信息'
          },
          {
            text: '步骤三',
            desc: '描述信息'
          },
          {
            text: '步骤四',
            desc: '描述信息'
          }
        ]
      }
    });
    
    展开全文
  • vant安装使用方法

    2020-11-04 21:55:34
    安装完vant后,引入组件,才能使用。这里我选择自动按需引入组件,这也是官方推荐的一种引入方式。 babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式。 安装插件 ...

    Vant 是轻量、可靠的移动端 Vue 组件库,是有赞前端团队开发的产品。

    通过vue-cli3创建项目,用vue ui 命令打开图形化界面,点击安装依赖按钮,然后搜索vant,安装。

    安装完vant后,引入组件,才能使用。这里我选择自动按需引入组件,这也是官方推荐的一种引入方式。

    babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式。

    安装插件

    npm:  npm i babel-plugin-import -D
    
    yarn:  yarn add babel-plugin-import --dev
    
    

    然后,在 babel.config.js 中配置

    plugins: [
    
        ['import', {
    
          libraryName: 'vant',
    
          libraryDirectory: 'es',
    
          style: true    }, 'vant']
    
      ]
    

    最后,就可以再组件中直接引入,使用vant组件了:

    展开全文
  • vant使用方法

    千次阅读 2019-10-18 14:13:42
    以时间插件为例子: template的代码: v-model="currentDate" type="date" @confirm="confirmDate" @change="changeDate" @cancel="cancelDate" ...方法,可以根据自己的应用选择方法

    以时间插件为例子:
    template的代码:

            <van-datetime-picker
              v-model="currentDate"
              type="date"
              @confirm="confirmDate"
              @change="changeDate"
              @cancel="cancelDate"
            />
    

    js代码:

      methods: {
        confirmDate(data){
          console.log(data);
        },
        cancelDate(){
    
        },
        changeDate(picker){
          console.log('pick',picker.getValues());
        }
      }
    

    介绍:
    在这里插入图片描述
    Events的事件处理,是需要在html里使用@来触发的。

    change事件的事件处理,是通过change绑定一个函数,然后函数传一个picker的参数,然后所有封装的函数都是这个picker的一个对象方法,可以根据自己的应用选择方法。

    展开全文
  • 引入Vant使用

    千次阅读 2020-03-04 00:15:19
    //引入Vant【安装方法】cnpm i vant -S import Vant from 'vant'; import 'vant/lib/index.css'; import 'vant/lib/icon/local.css'; //解决离线无网络环境中使用icon不显示的问题 Vue.use(Vant); //引入常用...
  • Vant 选择器 使用插槽方法 官方提供样式满足不了自己需要的样式时可以使用插槽可以自定义布局样式: 我这里配合了popup弹窗层使用,具体看自己的需求 <van-popup v-model="sexShow" position="bottom" :style=...
  • 二、使用方法 目前vant已经支持了npm的方式,但是由于node_modules目录下的代码是不会被编进dist目录下的,所以暂时只能用git方式使用。 克隆vant仓库 将dist目录下的所有文件复制到你项目的/static/vant/目录下...
  • 安装Vant Weapp,使用npm *先简单介绍一下什么是npm吧,在这以前,本人也不知道npm是什么,所以这里也是巩固一下知识。 1.为什么要使用npm init初始化项目 在node开发中使用npm init会生成一个pakeage.json文件,这...
  • vant area地区选择组件使用方法

    千次阅读 2021-01-03 16:42:37
    目录一、介绍二、引入1、安装vant2、安装vant 一、介绍 ...  地区层级选择组件属于比较复杂的业务组件,使用vant地区选择组件同时,可以对组件样式进行修改,以满足个人业务要求。 二、引入 1、安装vant
  • 1.安装postcss-pxtorem npm install postcss-pxtorem --save-dev 2.安装amfe-flexible npm i -S amfe-flexible 3. main.js 中引入 amfe-flexible import'amfe-flexible'; 4.vue.config.js 中配置 ......
  • Taro(V2.0.5)中引入Vant Weapp,(需下载资源到项目中:大小约322KB) 需如下几步: 1.在/src/components下新建文件夹vant-weapp 2.在github上找到Vant-weapp下载文件包,将对应的dist文件夹下内容复制到新建的vant-...
  • Vant 组件中event中事件的使用方法

    千次阅读 2020-05-19 10:01:53
    Vant 组件中event中事件的使用方法Vant组件中的NoticeBar 通知栏组件来说它有三个Event事件方法使用其中的close事件,点击关闭图标时,出现弹框 <van-notice-bar wrapable :scrollable="false" @close...
  • import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 根据实际情况引入组件 <template> <div> <van-cell title="选择多个日期" :value="text" @click="show = true" /> &...
  • vant使用

    2020-03-31 17:46:59
    官网:https://youzan.github.io/vant/#/zh-CN/ 一:安装 ... 方法一:使用babel-plugin-import(推荐)  1、安装 babel-plugin-import 插件 npm i babel-plugin-import -D 2、在 .babelrc 或 ...
  • 引入Vant组件库 1.首先运行 npm init 就会生成 package.json 2.运行 npm i vant-weapp -S --production     3.安装成功后 点击 工具 => 构建npm 之后点击 详情 => 使用构建npm 渲染 二.使用组件库 首先在...
  • 小程序Vant使用教程

    千次阅读 2019-06-20 17:09:09
    Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用 两大参考神兽: 文档:https://youzan.github.io/vant-weapp/#/intro 开源:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,824
精华内容 2,729
关键字:

vant使用方法