精华内容
下载资源
问答
  • Vant 使用之Toast Vant安装和使用

    万次阅读 2019-10-10 16:44:25
    Vant 是一个VUE 的移动端组件库,里面有很多好用的组件。 第一步,安装和配置 Vant npm i vant -S npm i babel-plugin-import -D 安装完成之后,在项目.babelrc 文件修改配置plugins "plugins": [ ["import...

    Vant 是一个VUE 的移动端组件库,里面有很多好用的组件。

    第一步,安装和配置 Vant

    npm i vant -S
    npm i babel-plugin-import -D

    安装完成之后,在项目 .babelrc 文件修改配置 plugins

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

    到这里,Vant 算是安装配置完成了,下面开始使用它的组件

    第二步,使用 Vant 的 Toast 组件 官方文档链接

     

    先看一下页面中使用 Toast 的效果图,

    附赠一个简单的验证码倒计时实现代码(限于GIF大小限制,我传了5秒的倒计时,可自行修改)

    在 main.js 里面导入 Vant ,这里我只导入了 vant 的 Toast 组件

    import { Toast } from 'vant';
    Vue.use(Toast);

    最后在页面组件里面使用它,下面贴上页面组件的完整代码

    <template>
      <div id="ca">
        <div class="bindPhone">绑定手机</div>
        <div style="height: 6.375rem;"></div>
        <img class="xxx" @click="phone_val=''" v-if="this.phone_val" src="../../../static/images/xxx.png" />
        <input v-model='phone_val' class="phone_input" type="number" maxlength="11" placeholder="输入手机号" />
        <div class="code" @click="getCode">{{code}}</div>
        <input placeholder="输入验证码" />
        <button class="btn">下一步</button>
    
      </div>
    </template>
    
    <script>
      var that;
      export default {
        data() {
          return {
            msg: '',
            phone_val: '',
            code: '获取验证码'
          }
        },
    
        methods: {
          outTime(time) {
            setTimeout(function() {
              if (time == 0) {
                that.code = '获取验证码';
                return
              }
              time--
              var mm = time >= 10 ? time : '0' + time;
              that.code = '00:' + mm;
              that.outTime(time)
            }, 1000);
          },
          getCode() {
            console.log('点击获取验证码,手机号为:', this.phone_val);
            this.outTime(30);
            if (this.phone_val.length == 11) {
    
            } else {
              // this.toToast('手机号码不正确,请重新输入')
            }
          },
          toToast(txt) {
            this.$toast({
              message: txt,
              position: 'top'
            });
          }
        },
        mounted() {
          that = this;
          console.log('asas')
        }
      }
    </script>
    
    <style>
      .xxx {
        margin-top: 5px;
        position: absolute;
        right: 2.125rem;
        width: 0.9rem;
        height: 0.9rem;
        background: #808080;
        border-radius: 50%;
        padding: 0.25rem;
      }
    
      .code {
        position: absolute;
        width: 3.8rem;
        text-align: center;
        right: 2.125rem;
        background: #F2F2F2;
        color: #9E9E9E;
        padding: 8px 16px 8px 16px;
        margin-top: -6px;
        border-radius: 50px;
        font-size: 0.75rem;
      }
    
      #ca {
        background: white;
        height: 1000px;
      }
    
      .btn {
        outline: none;
        width: 80%;
        margin-left: 10%;
        margin-top: 7rem;
        height: 3rem;
        border: none;
        border-radius: 3.125rem;
        background: #F2F2F2;
        color: #9E9E9E;
      }
    
      input::-webkit-input-placeholder {
        color: #d0d0d0;
      }
    
      .bindPhone {
        margin-top: 2.2rem;
        margin-left: 2rem;
        font-size: 1.875rem;
      }
    
      input {
        outline: none;
        /* 修改input选中的默认边框样式 */
        caret-color: #7BEDD4;
        /* 修改input的选中时的光标颜色 */
        border: none;
        /* 修改input的选中时的默认边框 */
        font-size: 1.1rem;
        margin-left: 2rem;
        padding-bottom: 0.7rem;
        border-bottom: 2px solid #f3f3f3;
        width: 82%;
      }
    
      .phone_input {
        margin-bottom: 2.5rem;
      }
    </style>
    

     

    展开全文
  • 引入Vant使用

    2020-03-04 00:15:19
    npm i vant -S 在main.js中加入 //引入Vant【安装方法】cnpm i vant -S import Vant from 'vant'; import 'vant/lib/index.css... //解决离线无网络环境中使用icon不显示的问题 Vue.use(Vant); //引入常用调...

    npm i vant -S

     在main.js中加入

     //引入Vant【安装方法】cnpm i vant -S
     import Vant from 'vant';
     import 'vant/lib/index.css';
     import 'vant/lib/icon/local.css'; //解决离线无网络环境中使用icon不显示的问题
     Vue.use(Vant);
     //引入常用调用组件
     import { Toast, Loading, Notify } from 'vant';
     Vue.prototype.$toast = Toast;
     Vue.prototype.$loading = Loading;
     Vue.prototype.$notify = Notify;

     

    展开全文
  • 主要介绍了vue+vant使用图片预览功能ImagePreview的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vant 使用picker二级级联 其实逻辑比较简单(话不多说上代码) <van-field readonly clickable name="bankId" label="机构名称" :value="bankIdValue" placeholder="选择机构" @click="bankIdShowPicker =...

    vant 使用picker二级级联

    其实逻辑比较简单(话不多说上代码)

    <van-field
              readonly
              clickable
              name="bankId"
              label="机构名称"
              :value="bankIdValue"
              placeholder="选择机构"
              @click="bankIdShowPicker = true"
            />
            <van-popup v-model="bankIdShowPicker" round position="bottom">
              <van-picker
                show-toolbar
                :columns="bankId_columns"
                @cancel="bankIdShowPicker = false"
                @confirm="bankIdShowPickerOnConfirm"
              />
            </van-popup>
    
    export default {
      data() {
      bankIdShowPicker: false,
          bankId_columns: [
            {
              text: "",
              id: "",
              children: [
                {
                  text: "",
                  id: "",
                },
                {
                  text: "",
                  id: "",
                },
              ],
            },
          ],
          bankIdMap: {},
      }
      
      mounted() {
        console.log("mounted.........");
        this.getBranchList();
      },
      methods: {
      getBranchList() {
      //此处调用的接口
          this.$get("/user/findBranchId")
            .then((res) => {
              console.log("res.data", res.data);
              if (res.data.resultCode == "0") {
                this.bankId_columns[0].text = res.data.data.branchName;
                var childrenBankList = res.data.data.childBranchList;
                let map = new Map();
                this.bankId_columns[0].children = [];
                for (let i = 0; i < childrenBankList.length; i++) {
                  let childrenBanObject = {
                    text: "",
                    id: "",
                  };
                  childrenBanObject.text = childrenBankList[i].branchName;
                  childrenBanObject.id = childrenBankList[i].id;
                  this.bankId_columns[0].children.push(childrenBanObject);//插入数据
                  map.set(childrenBankList[i].branchName, childrenBankList[i].id);
                }
                this.bankIdMap = map;
              } else {
                Toast(res.data.resultDesc);
              }
            })
            .catch((err) => {
              Toast("出了点小问题");
              throw err;
            });
        },
        //选择器确认按钮
        bankIdShowPickerOnConfirm(value) {
          console.log("value", value);
          console.log("children", this.bankId_columns[0].children);
          this.bankIdValue = value[1];
          this.childrenBankIdValue = this.bankIdMap.get(value[1]);
          console.log("childrenBankIdValue", this.childrenBankIdValue);
          this.bankIdShowPicker = false;
        },
      }
    

    这是后台返回数据
    这是后台返回数据

    来看效果!!
    在这里插入图片描述
    大佬们有更好的方法,请多指教!

    展开全文
  • Vue vant 使用 ImagePreview 预览图片

    千次阅读 2020-07-03 11:07:40
    Vue vant 使用 ImagePreview 预览图片 场景1 编列数组生成图片,点击预览图片 <div class="zoom" v-for="(item, index) in listData" v-show="item" :key="index" > <img v-if="item" class="img

    Vue vant 使用 ImagePreview 预览图片

    场景1

    编列数组生成图片,点击预览图片

        <div class="zoom"
             v-for="(item, index) in listData"
             v-show="item"
             :key="index"
             >
                  <img
                    v-if="item"
                    class="img"
                    :src="item"
                    alt="预览图片"
                    @click="getImg(listData, index)"
                  />
                </div>
    <script>
    import { ImagePreview } from "vant";
    export default {
      name: "ImagePreview ",
      data() {
        return {
          listData: ["1.jpg","2.jpg"],//图片数组
        };
      },
      methods: {
        getImg(images, index) {
          ImagePreview({
            images: this.listData,
            showIndex: true,
            loop: false,
            startPosition: index
          });
        }
      },
      computed: { },
      created() {}
    };
    </script>
    

    场景2

    一个用字符串,用,分割为数组,编列数组生成图片,点击预览图片

       <div class="zoom"
             v-for="(item, index) in imgstr && imgstr.split(',')"
             v-show="item"
             :key="index"
             >
                  <img
                    v-if="item"
                    class="img"
                    :src="item"
                    alt="预览图片"
                    @click="getImg(imgstr , index)"
                  />
                </div>
    <script>
    import { ImagePreview } from "vant";
    export default {
      name: "ImagePreview ",
      data() {
        return {
        imgstr :"1.jpg,2.jpg"
        imglist: []
        };
      },
      methods: {
       this.imglist = [];
          const imgurls = imgstr.split(",");
          for (let index = 0; index < imgurls.length; index++) {
            this.imglist.push(this.viewImgs(imgurls[index]));
          }
          ImagePreview({
            images: this.imglist,
            showIndex: true,
            loop: false,
            startPosition: index
          });
      },
      computed: { },
      created() {}
    };
    </script>
    

    效果图

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • vant使用方法

    2021-03-11 16:04:58
    说明:记载vant官网上没有提及到的或者容易忽略的用法。 1、(form)表单组件:左侧图标、右侧输入框(原官网:左侧文字、右侧输入框) 1、需求写法: <van-field v-model="phone" type="tel" name="手机号...
  • 基于移动端端vant使用ImagePreview 图片预览的使用的一些问题 关于使用vant中的ImagePreview 图片预览的使用: 使用指南 和其他组件不同,不是通过HTML结构的方式来使用,而是通过函数调用的方式。使用前需要先引入...
  • 在html引入vant使用预览图片的方法。 vant.ImagePreview 其他一样使用
  • cdn方式引入vue和vant开发,懒加载组件使用,需要先Vue.use(vant.Lazyload, { lazyComponent: true }); 图片加载: 组建加载:
  • 第一步使用vant-list <van-list v-model="loading" :finished="finished" :finished-text="title" :offset="50" :immediate-check="false" @load="onLoad" > <div class="totay_title" v-for="item...
  • 小程序Vant使用教程

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

    2020-06-19 18:22:20
    一、概述 1、官方网站:https://youzan.github.io/vant/#/zh-CN/home 2、特性 60+ 高质量组件 ...二、使用 1、下载 # 通过 npm 安装 npm i vant -S npm i babel-plugin-import -D # 通过 yarn
  • vant使用iconfont图标

    千次阅读 2019-12-26 16:09:33
    第一步、添加图标至项目 第二步、生成代码 ...第三步、将得到的地址复制到浏览器 ...第四步、将该页面所有的代码...第六步、使用文档上推荐的自定义图标(class一定要有,可以参考下面的代码) <van-icon ...
  • vant使用遇到icon图标不显示,显示为方块□□□□□现象搜索找到的方法最终找到原因:最终现象 现象 <van-icon name="chat-o" /> <van-rate v-model="value" /> 搜索找到的方法 尝试之后但是结果并...
  • 在我们使用vant的时候,有时候一些组件的默认样式并不能满足我们项目的需求,这个时候我们可以使用下面的办法,覆盖掉默认样式,亲测有效。 // vant覆盖默认样式的写法 ::v-deep .van-cell:not(:last-child)::...
  • 使用vant-tab标签时,tab切换下面的线条长短不能随文字数变化,修改样式得在全局css中修改才能生效
  • Vue使用vant上传图片给后台服务器 这几天在写项目时,遇到了基本的业务需求,上传图片给后台,我是使用vant来开发的,由于是第一次亲身体验这种情况,所以当时我也是一头雾水,不知道该如何去下手,所以就从网上找到...
  • wxml代码 <van-dialog id="van-dialog"/> json代码 "van-dialog": "@vant/weapp/dialog/index" ...js 使用 Dialog.alert({ title: '标题', message: '弹窗内容', theme: 'round-button', }).
  • Vant使用IndexBar索引栏

    2021-01-15 14:30:17
    数据类型是二维数组 <template> <div> <van-index-bar :index-list="indexList"> ...div v-for="(item,index) in peopleList" :key="index">...van-index-anchor :index="item.index" />...
  • 基于vant 使用 ImagePreview 预览图片

    千次阅读 2019-08-24 14:36:57
    1.首先引入ImagePreview和其他组件不同,不是通过...import { ImagePreview } from 'vant'; 2.在图片中添加click事件 <div class="img_box" v-for='(item2,index) of images' :key='index'> <img :sr...
  • 实际上是vant自定义组件找不到问题 我mian.js中vant组件是全部加载的,所以可以改写为下面写法: import Vant,{Lazyload} from 'vant'; import 'vant/lib/index.css' Vue.use(Vant); Vue.use(Lazyload);
  • vant使用this.$toast报错

    千次阅读 2019-09-10 11:32:20
    在main.js引入 import { Toast } from 'vant' Vue.use(Toast);
  • vant使用插槽自定义图标

    千次阅读 2020-10-27 10:00:43
    2.在组件中使用 (这里用的是阿里巴巴的icon font) <van-field v-model="user.mobile" center icon-prefix="toutiao" left-icon="shouji" placeholder="请输入手机号码" style="position:relative;"> <...
  • 在开发的过程中,所遇到的一个功能,我想用vant组件中的area地址选择器 在使用的过程中配合popup,默认popup不显示,当我点击触发时,从下方弹出popup组件 在popup组件中可以将一开始配置的省市区进行选择 将选择的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,690
精华内容 1,476
关键字:

vant使用