精华内容
下载资源
问答
  • Vue3 TS Vite Axios Vant VueRouter Vuex
  • Vant vue用Cell,Popup,DatetimePicker,Picker制作时间和性别选择 <template> <div> <div class="from_item"> <van-cell title="出生年月" input-align="right" :value="...

    Vant vue用Cell,Popup,DatetimePicker,Picker制作时间和性别选择

    <template>
      <div>
        <div class="from_item">
          <van-cell
            title="出生年月"
            input-align="right"
            :value="formData.birthDate || '请选择出生年月'"
            @click="showBirthDatePopup = true"
          />
        </div>
        <div class="from_item">
          <van-cell
            title="性别"
            input-align="right"
            :value="formData.sex || '请选择性别'"
            @click="showsexPopup = true"
          />
        </div>
        <van-popup v-model="showBirthDatePopup" position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            title="出生年月"
            type="year-month"
            :min-date="minDate"
            @confirm="checkDate()"
            @cancel="close"
          />
        </van-popup>
        <van-popup v-model="showsexPopup" position="bottom">
          <van-picker
            show-toolbar
            title="性别"
            :columns="columns"
            @cancel="onCancel"
            @confirm="onConfirm"
          />
        </van-popup>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          formData: {
            birthDate: "",
            sex: ""
          },
          columns: ["男", "女"],
          minDate: new Date(1900, 0, 1),
          currentDate: new Date(),
          showBirthDatePopup: false,
          showsexPopup: false,
          value: ""
        };
      },
    
      computed: {},
    
      methods: {
        checkDate() {
          this.formData.birthDate = this.$dateFormat(this.currentDate, "YYYY-MM");
    
          this.showBirthDatePopup = false;
        },
        close() {
          this.showBirthDatePopup = false;
        },
        onConfirm(value) {
          this.formData.sex = value;
          this.showsexPopup = false;
        },
        onCancel() {
          this.showsexPopup = false;
        }
      }
    };
    </script>
    

    效果图

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

    如果想知道更多的Vant用法

    展开全文
  • vue开发手机端网页,用到了vant 的 tabbar组件, 因为封装了tabbar代码,导致切换的时候,tabbar上来都是active的初始选中状态,每次都是默认的零, 尝试了很多方法,最后发现最原始的把当前状态存到本地存储也是...

    用vue开发手机端网页,用到了vant 的 tabbar组件,
    因为封装了tabbar代码,导致切换的时候,tabbar上来都是active的初始选中状态,每次都是默认的零,
    尝试了很多方法,最后发现最原始的把当前状态存到本地存储也是可以实现的,
    我一开始用的这个方法但是没有生效,原因是什么呢,很简单
    数据是Number类型,存到Loaclstorage之后再取出来变成了string
    在这里插入图片描述
    可以明显看到两个数据类型是不一样的,
    使用强制转换之后就可以了

    this.active = Number(localStorage.getItem('Active'))
    

    另外一个遇到的坑就是,封装之后点击tabbar需要点击两次,图标才会被选中,第一次点击时会跳转页面,但是图标并不会被选中,经过实验,有两种方法可以达到目的,
    首先我一开始封装components之后是在单个页面进行掉用的,
    需要把他放到App.vue里面进行掉用,用监听路由的方式来判断在哪个页面需要显示哪个页面不需要
    具体代码如下

     //监听器
    	watch: {
    		// 方法1
        '$route' (to, from) { //监听路由是否变化
    		 if(to.name=='Integral'||to.name=='Class'||to.name=='ShopCar'||to.name=='My'){
            this.tabType=true
            localStorage.setItem('Tab',this.tabType)
          }else {
            this.tabType=false
            localStorage.setItem('Tab',this.tabType)
          }
    		},
    	},
    
    <!-- 底部 -->
        <div v-if="tabType" class="st-bottom"><Bottoms_Two /></div> 
    

    这样之后有个问题就是如果我刷新之后就会回到初始状态,我将当前的tabbar显示隐藏的参数存到本地存储,然后在页面加载时获取,赋值
    具体代码如下
    并且要注意跟上面一样的情况,布尔型数据存储后再读取就变成了string类型,要注意类型转换

     created(){
        this.tabType = localStorage.getItem('Tab') ==="false" ? false : true
      },
    

    第二种方法是继续单个页面引用,但是在封装的底部vue文件中做判断
    具体代码如下

    created() {
        if (this.$route.name == "/") {
            this.active = 0;
          } else if (this.$route.name == "Navigation") {
            this.active = 1;
          } else if (this.$route.name == "Refuel") {
            this.active = 2;
          } else if (this.$route.name == "Me") {
            this.active = 3;
          }
      }
    
    展开全文
  • 我用的是@vue/cli 4.3. 最近调用了antd组件、element-UI组件样式最后都失败,页面没有显示任何控件。打开控制台提示:did you register the component correctly?For recursive components, make sure to provide ...

    我用的是@vue/cli 4.3.

    最近调用了antd组件、element-UI组件样式最后都失败,页面没有显示任何控件。打开控制台提示:

    did you register the component correctly?For recursive components, make sure to provide the "name" option.

    上网搜了很多解决方案,无果。现在贴一下我的解决方案。

    因为我在里面还引用了其他库,所以一开始我是这么写的

    import Vue from 'vue'
    import App from './App'
    import router from './router/router'
    import './iconfont/iconfont.css'
    import store from './store/store'
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    Vue.config.productionTip = false
    Vue.use(axios, VueAxios,ElementUI)

    这样写的错的。具体是不是cli更新了什么我还不清楚,正确写法应该是将ElementUI单独拎出来注册。

    import Vue from 'vue'
    import App from './App'
    import router from './router/router'
    import './iconfont/iconfont.css'
    import store from './store/store'
    import axios from 'axios'
    import VueAxios from 'vue-axios'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI) //注意这里
    Vue.config.productionTip = falseVue.use(axios, VueAxios) //注意别写一起

    这样改了以后就正常了。

    展开全文
  • vant vue单张图片上传

    2020-11-19 10:58:17
    上传组件 <template #input> <van-uploader accept="file" :max-count="1" v-model="photo" :after-read="afterPhoto" /> </template> data ... const tempFile = file.file

    上传组件

     <template #input>
       <van-uploader accept="file" :max-count="1" v-model="photo" :after-read="afterPhoto" />
     </template>
    

    data

    data() {
    	return {
    		photo: [],
    	}
    },
    

    事件绑定,组装成file文件

     afterPhoto(file) {
        const tempFile = file.file
        const type = tempFile.type
        const size = tempFile.size
        const newName = new Date().getTime() + tempFile.name
        let uploadFile = new File([tempFile], newName, {
          type,
          size
        })
        let formData = new FormData()
        formData.append('image', uploadFile)
        this.$axios.post(this.apiUrl + '/php/upload', formData)
          .then((res) => {
            this.photo.url = this.apiUrl + res.data.data.image
          })
          .catch((err) => {
            console.log(err);
          });
      },
    
    展开全文
  • 上一节已经教大家如何创建一个vue项目,这一节,我们就温故下vue项目的创建,顺便引入element,实现一个简答的登陆页面。老规矩,先看效果图一,快速创建vue项目二,引入element类库首先我们进入element官网:...
  • 还提供一个以jQuery插件形式实现的版本npm jquery-tagcanvas -D这样还不行,会报错,找不到jquery2:在项目 build 里的webpack.base.conf.js 里加载webpack文件,在module.exports的最后加入一个pluginsplugins: ...
  • 今天遇到一个vue诡异的数据绑定问题,下面我给大家分享一下我解决问题思路和方式,以及为什么要这样。一、问题现象使用vant的checkbox组件时无法使用v-model来双向绑定选中状态!但是重新打开checbox所在的pop弹窗,...
  • Vant 用Popup自定义选择联系人功能 <template> <div> <van-cell @click="showPopup"> <div class="serachuser" v-if="iscell"> <van-button icon="add" class="add" ...
  • vue3-vite-ts-Vant vue3 + vite + ts + Vant + vuex +路由器 项目详细介绍 项目预览
  • 基于vue 引入vant

    2020-12-08 10:31:02
    Vue 2 项目,安装 Vant 2.x 版本: npm i vant -S Vue 3 项目,安装 Vant 3.x 版本: npm i vant@next -S 引入的方式是按需引入 安装插件 npm i babel-plugin-import -D 主要看你的vuecli创建的是哪个文件有.babelrc...
  • vant uivue移动端框架

    2020-05-18 16:14:00
    vant uivue移动端框架 点击此处跳转 bilibili 视频教程 vant 官网地址 https://youzan.github.io/vant/#/zh-CN/home 即可 使用插件
  • vue使用vant UI库

    2021-01-25 20:37:45
    vue使用vant 1)下载 # Vue 2 项目,安装 Vant 2.x 版本: npm i vant -S # Vue 3 项目,安装 Vant 3.x 版本: npm i vant@next -S 2)在vue中 main.js 引入 // 引入vant库 import Vant from “vant”; // 引入样式 ...
  • vant + Vue创建项目全过程

    千次阅读 2020-10-12 14:36:36
    vant + Vue创建项目全过程vant + Vue创建项目全过程1、安装vue-cli3脚手架2、通过vue-cli3创建项目3、安装vant4、引入组件5、Rem 适配6、底部安全区适配 vant + Vue创建项目全过程 1、安装vue-cli3脚手架 npm ...
  • vant + vue 搭建项目

    2020-07-28 10:43:50
    1、安装vue-cli3脚手架 npm install -g @vue/cli 2、通过vue-cli3创建项目 vue create my-project 3、安装vant 通过 npm 安装 npm i vant -S 通过 yarn 安装 yarn add vant 4、引入组件 安装插件 npm i babel-...
  • vant/vue跨域请求问题

    2020-10-20 22:19:42
    vant/vue跨域请求问题 对于vue3来说,找到这个文件vue.config.js 添加完成后记得重新启动 npm run serve好多情况是因为没有重新启动造成的 文件【vue.config.js】 module.exports = { outputDir: 'kxy', public...
  • 购物车 {{item.proName}}{{item.proPrice}}1:price="sum()"button-text="提交订单">全选import { mapState } from 'vuex'import { Checkbox, CheckboxGroup } from 'vant';import { Card } from 'vant...
  • 前端开发:vantvue中的使用

    千次阅读 2019-07-30 11:04:42
    # 安装 Vue Cli npm install -g @vue/cli # 创建一个项目 vue create hello-world # 安装vant npm i vant -S # 完整写法:npm install vant --save # 安装插件 npm i babel-plugin-import -D # 完整写法: npm ...
  • vue vant封装全局loading加载(全局监听)vue vant封装全局loading加载(全局监听)前言:为了页面美观,请求接口的时候延迟没有数据,页面感觉狠卡顿,封装loading,请求接口成功后隐藏掉(我这是用的vant 组件根据自己...
  • 1.动态渲染的src路径在页面中不显示处理方式require("../assets/image/XX.png")2.vant 引入vue 发现在pc端touch 事件不支持解决方案:# 安装模块npm i @vant/touch-emulator -S// 引入模块后自动生效import '@vant/...
  • cd vue-vant-mobile # 安装依赖 npm i # 启动 npm start 浏览器访问 http://localhost:9538 svg 使用 直接去阿里巴巴图标库,找到自己需要的图片下载 svg 格式 如果需要改颜色, 请打开 svg 图片源码, 删除源码中...
  • vant-vue关于sku规格是说明,并不详情,从手册复制无法使用。git下载安装vant后的sku示例却很详情。我剔除了高级用法,以下是基础用法示例:sku.vue文件 <template> <div> <!-- 基础用法 --> ...
  • Vantvue+vant图片懒加载+图片预览

    千次阅读 2020-06-03 17:17:23
    import { ImagePreview } from 'vant' 2、页面布局 <div v-for="(item2, index) in albumList" :key="index" class="album-item" > <img v-lazy="item2" alt="图片未显示" class="lazy-img" @click...

空空如也

空空如也

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

vantvue

vue 订阅