首页 > 其他分享 >Vant

Vant

时间:2023-04-14 10:13:01浏览次数:48  
标签:Vant vant https import data 路由 name

移动端UI库

官网

https://vant-contrib.gitee.io/vant/#/zh-CN/

 

之前的旧版本

https://youzan.github.io/vant

 

创建Vue项目

 

sudo cnpm install -g @vue/cli

# 打开图形化界面 
vue ui

 

图形化项目操作真的好酷呀!

注意,选择项目预设 时,选择自定义,这样可以勾选 路由 和 vuex 等插件。

安装完后的启动操作
npm run serve

更新样式

安装依赖,并引入全部样式

cnpm i vant -S


// src/main.js 添加

import Vant from 'vant';
import 'vant/lib/vant-css/index.css';

Vue.use(Vant);

最新版样式代码更新如下:

import Vant from 'vant';

import 'vant/lib/index.css';

测试代码

    <van-tabs>
      <van-tab title="数据录入"></van-tab>
      <van-tab title="数据搜索"></van-tab>
    </van-tabs>

知识点积累

组件销毁前执行

  //组件销毁前执行的钩子函数,跟其他生命周期钩子函数的用法相同。
  beforeDestroy() {
    this.stopTick();
  },

轮播图

    <van-swipe&nbsp;:autoplay="3000">
      <van-swipe-item v-for="(image, index) in images"&nbsp;:key="index">
        <img v-lazy="image" style="width:100%" />
      </van-swipe-item>
    </van-swipe>



  data () {
    return {
      images: [
        '/static/img/1.jpg',
        '/static/img/1.jpg',
      ],
...

 

移动端的选择框

        <van-picker 
          ref="picker"
          value-key="name"     // 说明采用的是对象中 name 属性值来显示
         &nbsp;:columns="columns" 
          @change="onChange" />



// 其中 values 是 第一级 选中的值(这个值可以是对象。)
    onChange(picker, values) {
      picker.setColumnValues(1, values[0].list);
    },


// ret.data  类似于  { name: "123", list: [{name: "456"}] ...} 的形式
            this.columns = [{
              values: ret.data,
              className: 'column1'
            }, {
              values: ret.data[0].list,
              className: 'column2'
            }];

对话框

// 如果是自己组件页面中使用的话,一定要导入这行代码,不然提示找不到 Dialog 这个变量
import { Dialog } from 'vant'; 

Vue.use(Dialog);
 
   <van-dialog 
      title="请选择工种" 
      v-model="show" 
     &nbsp;:before-close="beforeDialogClose"
     &nbsp;:show-cancel-button="showCancelButton">
        <van-picker 
          ref="picker"
          value-key="name"
         &nbsp;:columns="columns" 
          @change="onChange" />
    </van-dialog>



    beforeDialogClose(action, done) {

      if (action === 'confirm') {
        var parent = this.$refs.picker.getColumnValue(0);
        var child = this.$refs.picker.getColumnValue(1);
        

        var jobtype = parent.name + "—" + child.name
        var jobtypeId = child.jobtypeId;

        this.updateJobtype(
          jobtype, 
          jobtypeId,
          () => {
            done();
            this.show = false;
          });

      } else {
        done();
        this.show = false;
      }

多选框实现

square 表明是多选框图标

<van-checkbox shape="square"

 

  computed: {
    // 多选答案 {
    mulStuAnswer:  {
      // getter
      get: function () {
        if (this.data.anwser == null) {
          this.data.anwser = "";
        }
        return this.data.anwser.split("");
      },
      // setter
      set: function (newValue) {
        this.data.anwser = newValue.join("");
      }
    }
  },

 

并排在一起的单选框

      <van-cell>
        <template slot="title">
          <van-radio-group v-model="user.sex" >
            <van-row>
              <van-col span="5">
                性别
              </van-col>
              <van-col span="4">
                <van-radio name="0">女</van-radio>
              </van-col>
              <van-col span="4">
                <van-radio name="1">男</van-radio>
              </van-col>
            </van-row>
          </van-radio-group>
        </template>
      </van-cell>

【注意】 如果 user.sex 返回值类型是 数字 类型,那么,注意 name 的匹配写法应如下所示:

<van-radio :name="0">女</van-radio>

路由跳转

this.$router.push("/practice")

 

获取路由传递的参数

     // 跳转的路由配置

     <van-cell icon="certificate" is-link&nbsp;:to="{
        path: '/question',
        query: {
          questionType: 0,
          orderNum: 1,
        }}">


    // 获取路由的参数
    // 可以在mounted 的时候获取

    getParams () {
      let routerParams = this.$route.query
      
      // 将数据放在当前组件的数据内
      this.questionType = routerParams.questionType;
      if (!routerParams.orderNum) {
        routerParams.orderNum = 1;
      }
      this.orderNum = routerParams.orderNum;
    },

如果需要传递对象等参数,就需要借助到 params 参数啦:

 

// 跳转
this.$router.push({
              // path: '/endExam',
              name:'EndExam',      // 需要注意必须采用name传递,否则 params 会失效
              params: ret.data
            });

// 接收
this.$route.params

 

https://segmentfault.com/q/1010000009877482

多层路由实现方式

https://www.cnblogs.com/IvyXia/p/7515727.htmlhttps://www.cnblogs.com/IvyXia/p/7515727.html

 

依赖库

遇到Module not found:Error:Can`t resolve 'less-loader' 问题。

npm install --save-dev less-loader less 

 

 

 

引入组件的方式

https://www.cnblogs.com/Jiangchuanwei/p/9857557.html

标签:Vant,vant,https,import,data,路由,name
From: https://www.cnblogs.com/lvye1221/p/17317417.html

相关文章

  • postrelevant
    爬虫中post相关HTTP数据传输先来看看HTTP是如何传输表单数据的。HTTP是以ASCII码传输的,建立在TCP/IP协议之上的应用层规范。规范把HTTP请求分为三个部分:状态行、请求头、消息主体。类似于下面这样:<method><url><version><headers><entity-body>#例如:#请求行......
  • vue3+vite+vant文件上传
    1:文件上传下载1//上传文件2constafterRead=()=>{3for(letfileoffileList.value){4//1:加载状......
  • 使用vscode + vite + vue3+ vant 搭建vue3脚手架
    【术栈】开发工具:VSCode代码管理:Git前端框架:Vue3构建工具:Vite路由:vue-router4x状态管理:vuex4xAJAX:axiosUI库:vant数据模拟:mockjscss预处理:sass构建vue3项目1,安装 vite......
  • vue vant rate评分组件无法点击取消归零功能处理
    //通过监听点击事件去判断是否触发change事件,如果没有则说明数据没变化<van-ratev-model="modelValue":disabled="!conf.isEditText"disabled-color="rgba(0,86,255,0.......
  • vant小程序配置使用中遇到的问题
    1.npm无法构建(1)缺少package.json包 >> npminit-y(2)npm报[email protected]@1.0.0Norepositoryfield. ......
  • Vue3 使用 vant中的swipe,添加左右箭头切换轮播
    vant中的 swipe 是带有左右箭头切换轮播方法的,只不过文档中没有相关的案例。  我这边使用的是vue3ts写的这个功能。页面部分   定义一个方法,ref="swi......
  • vue+vant项目中 rem适配配置
    vantrem适配,需要安装两个插件postcss-pxtorem 是一款postcss插件,用于将单位转化为rem  lib-flexible 用于设置rem基准值postcss-pxtorem:npminstallpostc......
  • vant上传图片时压缩图片
    afterRead(file){console.log(file,'0000')this.face=[];letcanvas=document.createElement('canvas')//创建Canvas对象(画布)......
  • vant picker多选实现
    <template> <divclass="dh-field">  <divclass="van-hairline--bottom">   <van-popupv-model="show"position="bottom"class="">    <div......
  • vant 时间范围选择器封装
    <template> <divclass="edit-time-picker">  <van-popupv-model="showPicker"roundposition="bottom">   <van-picker    v-show="step===......