![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vant
大多都是公众号
刘斩仙的笔记本
业精于勤,荒于嬉;行成于思,毁于随。
展开
-
vue3+vue-router4:报错Uncaught (in promise) Error: Invalid navigation guard
解决Uncaught (in promise) Error: Invalid navigation guard报错,本地环境路由跳转失败原创 2023-07-19 10:00:26 · 5948 阅读 · 0 评论 -
vue移动端表格吸顶、行自适应高度、列左侧固定悬浮
简介1.表头吸顶效果2.左侧列固定,右侧滑动,表头跟随内容滑动3.行高自适应番外最近上海疫情,居家办公一月多了,愿阴霾散去。最近网上在正常得市民抱怨中,有很多别有用心之人,数典忘祖,造谣生事,其心可诛。如图所示源码(复制另存txt,修改.html直接运行)<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compati原创 2022-04-15 18:45:57 · 3619 阅读 · 0 评论 -
vue高仿立体卡片效果(第三版)
组件如图所示:使用方法<template> <div class="Home w100 h100"> <!-- tab切换 start --> <tab-card :data="tabArr" class="ml15 mr15 pt15" @tabClick="tabChange"> <p class="pl15 pr15 pt15 pb15" v-show="tabIndex == 0">原创 2022-03-05 11:03:50 · 931 阅读 · 0 评论 -
vue高仿立体卡片效果(第二版)
组件如图所示:下载地址:TAB组件原创 2022-03-05 10:46:24 · 641 阅读 · 0 评论 -
vue高仿立体卡片效果(第一版)
如图所示:代码如下:(复制另存txt,修改.html直接运行)<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>vue高仿立体卡片效果</title> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/i原创 2021-12-23 16:52:06 · 1498 阅读 · 0 评论 -
vue移动端中使用echart折线面积图(设置渐变色)解决ios6/11渐变色不显示bug
前言:1.折线本身渐变色2.折线阴影面积渐变色效果如图所示:1.全局引入echartmain.js// 如果全局引入就在此加上这两行代码// 如果就一个页面直接页面引入完事儿 import echarts from 'echarts';// import * as echarts from 'echarts';import echarts from 'echarts';Vue.prototype.$echarts = echarts;index.vueseries: [ {原创 2021-03-30 11:15:59 · 1314 阅读 · 0 评论 -
Vue Cli 3项目 使用融云IM实现聊天功能
介绍:前台使用vue开发的单页面,后台使用ant design pro单页面,实现手机端和后台聊天功能。效果如图(PC+移动):一、申请融云账号(token、appKey)建议先看教程:sdk使用介绍过一遍教程,接下来开始写二、引入融云IM如图:位置:public/index.html,引入&amp;amp;amp;amp;lt;script src=&amp;amp;amp;quot;https://cdn.ronghub.com/Ron...原创 2019-03-13 17:57:03 · 9943 阅读 · 22 评论 -
vue+vant 利用FormData上传图片(单张or多张)第一版
效果:代码如下://html<!-- 上传资料 start --> <p class="fw fz16 tl ml15 lh40">上传资料</p> <van-cell-group title="申请评估表" class="ml15 pt5 borderBottom0" @click="current = 0"> <div ...原创 2019-07-04 15:47:03 · 6459 阅读 · 3 评论 -
vue+vant 利用FormData上传图片(单张or多张)第二版
介绍:vant版本2.3.3流程:input选取file=>append到FormData中=>提交后台。利用FormData上传,这个流程无论换什么ui框架,或者自己写都走得通,亲测有效。(自己手写的上传就不拿出来分享了,主要是太乱,自己都看半天)效果:代码如下:html//v-if中的条件不重要<p class="txt mb10" v-if="$route....原创 2019-12-30 10:59:41 · 2928 阅读 · 0 评论 -
vue+vant 动态表单
效果如图:代码如下:<template> <div class="Question w100 pb10 bgf"> <div class="fz14 color3 pt10 borderbe0 tc pb15 mt10"> <div class="img"></div> <div class...原创 2020-04-03 09:51:46 · 4102 阅读 · 1 评论 -
vue+vant 表单
1.身份证<van-cell-group class="tl"> <van-field v-model="card" clearable :disabled='active==0' label="身份证" @input='cardRule' placeholder="请输入" /></van-...原创 2019-12-30 18:43:59 · 3635 阅读 · 0 评论 -
vue+vant 微信公众号内嵌单页面获取openid
介绍:以前做的是,直接www.baidu.com?openid=xxx,由第三方提供openid,现在需要我们包产到户,全部有我们来做。第一步:配置公众号:设置-公众号设置-功能设置,切记必须是在线域名,localhost不行把下图txt文件下载,放到前台页面服务器目录下,域名写在输入框中。至此,后台配置完事儿第二步://main.jsimport Vue from 'vue'...原创 2019-07-04 18:58:37 · 3674 阅读 · 0 评论 -
vue+vant 扫码(jssdk)
效果:第一步:后台配置js接口安全域名没了代码://安装jssdk yarn add weixin-js-sdk<template> <div class="ScanQRCode w100"> <van-button type="primary" class="submits posFix" @click="qrCode">扫一扫&l...原创 2019-07-08 18:54:58 · 8466 阅读 · 1 评论 -
Vue Cli 3项目 ,配置代理、阻止webpack://源码泄露、新建+删除node_modules
根目录新建vue.config.jsvue.config.jsmodule.exports = { devServer: { proxy: { '/api': { target: 'http://test.xxx.com.cn', ws: true, // proxy websockets ...原创 2019-03-13 18:36:20 · 1634 阅读 · 0 评论 -
vue+vue-cli 移动端单页面使用vconsole
只需修改public下的index.html即可<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta conte...原创 2019-07-08 19:02:43 · 2176 阅读 · 0 评论 -
Vue Cli 3项目 配置rem、引入公共样式、引入全局函数、自定义全局组件、main.js使用Toast
main.js//自己的css、js请存放在assets文件中import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import './assets/style.css' // 外部static样式 引入即生效import './...原创 2019-03-13 18:24:20 · 7253 阅读 · 0 评论