文姐_wenjie-CSDN博客

原创 vue+vant调取数字键盘

第一步：引用vant的组件van-password-inputvan-password-input :value="value" :mask="false" :length="4" :focused="showKeyboard" :gutter="32" @focus="showKeyboard = true" />第二步监听输入框的值进行调取接口value(value) {

2021-01-16 09:43:39 2425 1

原创使用vue+vant使用vant_list实现手机端下滑懒加载

第一步使用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 in list" :key="item.lo

2021-01-16 09:30:26 1632

原创断点续传

断点续传切片上传第一步引用md5库npm install --save spark-md5第二步使用文件流的md5js// const SparkMD5 = require('@assets/js-spark-md5.js')\import SparkMD5 from 'spark-md5'export default function(uploadFile, callback) { const blobSlice = File.prototype.slice || File.proto

2021-01-14 14:27:05 211

原创 vue父组件的传值prop

使用eslint代码格式化注意事项第一步引用子组件import useRecharge from '@/views/user/usersList/recharge'第二步 components组件注册子组件 components: { useRecharge }第三步父组件传值 eslint用横杠连接 v-model类似 <el-tab-pane label="充值记录" name="second"><useRecharge v-if="activeNa

2020-12-15 19:29:28 158

原创 vue导入echarts实现图标可视化

1.第一步导入import echarts from 'echarts'2.初始化函数 initChart() { this.chart = echarts.init(this.$el, 'macarons') this.chart.setOption({ tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'sh

2020-12-07 16:27:47 329

原创 vuex数据存取

1、全局安装vuexnpm install vuex --save-dev2.在项目的入口js文件main.js中引用import store from './store/index'3.并将store挂载到vue上new Vue({ el: '#app', router, store, template: '<App/>', render: (createElement) => createElement(App)})4.store的目录结构，mo

2020-12-07 16:15:36 521

原创 h5调取微信支付

1.在微信浏览器里面打开H5网页中执行JS调起支付。接口输入输出数据格式为JSON。注意：WeixinJSBridge内置对象在其他浏览器中无效2.点击微信支付图标调取微信支付使用jq包、调取公司的接口获取网页端接口请求参数列表（参数需要重新进行签名计算，参与签名的参数为：appId、timeStamp、nonceStr、package、signType，参数区分大小写。）$('.Albumlit').on('click', function() { var url = ""; $.

2020-12-07 15:36:58 831

原创 vue使用QRCode生成二维码进行加密跳转

第一步：VUE里安装QRCode.js包npm install qrcode第二步：在组件中导入 import QRCode from 'qrcode'第三步：使用elementui自带el-dialog事件 <el-dialog :close-on-click-model="false" :visible.sync="evaluateQRCodeVis" :before-close="closeEvaluateQRCodeVis" wid

2020-12-07 15:25:36 1038

原创 vue下载pdf封装成js全部调用

1，添加两个模块html2canvas和jspdf（1）npm install --save html2canvas（将页面html转换成图片）（2）npm install --save jspdf（将图片生成pdf）2，创建一个htmlToPdf.js文件在指定位置.我个人习惯放在(‘src/components/htmlToPdf.js’),内容如下import html2canvas from 'html2canvas'import JSPDF from 'jspdf'export def

2020-12-07 15:01:26 229

原创路由的前置路由守卫和后置路由守卫

afterEach beforeEach这两个导航守卫的区别vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。beforeEach全局前置守卫当一个导航触发时，全局前置守卫按照创建顺序调用。每个守卫方法接收三个参数：to: Route: 即将要进入的目标路由对象from: Route: 当前导航正要离开的路由next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖

2020-12-07 14:50:55 3422

原创用Vue、element-ui、axios实现省市区三级联动

用Vue、element-ui、axios实现省市区三级联动第一步使用element-ui的联动组件第二步配置选项第三步使用懒加载调第二种组态的封装模块<template> <div class="area-select-main"> <el-cascader clearable v-model="areaId" :options="initOptions" :key="isResouceShow"

2020-12-07 11:55:19 480

原创自定义vue的面包屑组件封装

自定义vue的面包屑封装面包屑学完vue使用了element-ui 有没有想自己封装一个ui库不求多好看，只求学习一个技能或者一个知识点，那我可以帮到你，如果你喜欢请点个赞再走吧。1、第一步先配置路由第二步新建组件、封装组件模块第三步全局引用第四步局部可以直接拿用...

2020-12-07 11:31:27 660

li_ge_DD的博客