JCAL123-CSDN博客

el-select下拉列表懒加载 vue技术交流群（864583465)<template> <el-select popper-class="pat-select" v-model="selectedValue" v-el-select-loadmore="loadMore(rangeNumber)" filterable :filter-method

2022-05-19 19:45:42 1415 1

原创 vue项目配置stylelint vue技术交流群（864583465)

vue项目配置stylelint vue技术交流群（864583465)1、前端开发人员对stylelint不陌生，它的作用相信大多数开发者也清楚，不过，由于这样或那样的原因，现实中一些开发团队可能并没有使用它，这就不可避免的导致了团队css代码较乱，使得代码维护性差。因此在项目中使用stylelint是非常重要的，废话少说直接上步骤：2、安装依赖npm i -D stylelintnpm i -D stylelint-config-recess-ordernpm i -D stylelint-c

2021-09-17 15:55:49 690

原创 vant组件库-dropdownMenu组件自定义title vue技术交流群（864583465)

vant组件库-dropdownMenu组件自定义title在利用vue开发h5页面时，通常我们选择的是vant作为我们的组件库，它提供60多个高质量组件，覆盖移动端各类场景。正如大多数组件库一样，很多都有这样或那样的bug，vant也是如此，本文要说的是vant中dropdownMenu组件自定义title无法及时更新title内容的bug。1、首先看下面一段代码<template> <div class="test"> <van-dropdown-menu

2021-04-28 10:32:47 2422 2

原创 vue项目中使用html2canvas生成图片 vue技术交流群（864583465)

vue项目中使用html2canvas生成图片 vue技术交流群（864583465)1、安装html2canvas插件npm install --save html2canvas2、页面代码<template> <div id="html2canvasTest"> <button @click="createImg">下载图片</button> <div id="dom-to-img-wrapper">

2021-04-22 09:29:36 456

原创 vue项目使用wangeditor并自定义菜单 vue技术交流群（864583465)

vue项目使用wangeditor并自定义菜单 vue技术交流群（864583465)1、安装wangeditornpm install wangeditor --save 或cnpm install wangeditor --save 2、文件名.vue<template> <div class="hello"> <div id="editor"></div> </div></template>

2021-01-28 16:18:40 4538 4

原创 vue项目中导入excel表格 vue技术交流群（864583465)

vue项目中导入excel表格 vue技术交流群（864583465)1、安装xlsx插件cnpm install xlsx --save2、页面代码<template> <div class="hello"> <input type="file" ref="upload" accept=".xls,.xlsx" class="outputlist_upload" @change="fileUploaded"> <br> &lt

2020-12-18 16:34:53 199 1

原创微信小程序中引入WeUI(npm方式) vue技术交流群（864583465)

vue技术交流群（864583465) 微信小程序中引入WeUI(npm方式)1、使用命令行或微信开发者工具的终端执行以下代码npm init -y // 在init时，生成默认的package.json文件否则会构建失败npm install weui-miniprogram --save //安装WeUI对应的npm包2、点击微信开发者工具的菜单工具，选择构建npm，并点击菜单详情勾选上本地设置里的使用npm模块3、目录调整（可不调整）构建npm后，项目根目录会产生minipro

2020-12-17 14:57:52 512

原创 vue技术交流群（864583465) 基于css3中的animation和transform实现div的旋转和缩放效果

1、旋转<div id="loading">旋转起来</div><style> #loading{ width:100px; height:100px; line-height: 100px; text-align: center; border-radius: 50%; background:red; animation: rotating 2s linear infinite;}@keyframes rotating{ from{ //动

2020-12-14 10:16:44 352

原创 vue技术交流群（864583465) vue实现从详情页返回列表页时不刷新页面(即：不重新渲染，恢复列表页跳转详情页之前的状态)，实测有效！！！

1、业务需求　　不管是移动端H5页面还是web端页面，通常会有这样一个需求，当从列表页面A跳转到详情页面B后，再从详情页面B跳转到列表页面A时，需要将A页面恢复到跳转到详情页面B之前的状态，这样的需求对于非单页面来说实现起来很容易，但是对于非单页面来说并不是那么的容易，本文主要讲在vue项目中如何实现。2、主要用到的技术　　vuex和vue的keep-alive组件3、具体实现(1)首先要在项目中安装并引入vuexcnpm install --save vuex // 安装(2)在项目sr

2020-12-10 17:39:21 715

原创 vue技术交流群（864583465）vue中封装的echarts组件，直接传option即可

1、使用该组件时，需要先安装echratsnpm install echarts --save或cnpm install echarts --save2、该组件可以自适应浏览器的宽度，高度需要根据业务需求自行设置3、可根据业务需求动态import相关组件，正确import即可 import echarts from 'echarts/lib/echarts'; // 必须要引入 import 'echarts/lib/chart/line' import 'echarts/lib/

2020-10-28 11:23:45 498

原创 vue技术交流群（864583465）vue项目动态添加路由

用vue做后台管理页面，通常会涉及到权限管理，即，只有在权限允许的情况下才能查看相关页面，比较懒省事的做法通常时动态的隐藏菜单即可，但是这样会有一个问题，通过修改地址栏的相关路由信息，依然可以进入到本不应该看到的页面，这样体验很不好，会带来很多问题。因此，这就需要动态设置或修改路由的相关信息，代码如下：假设你的路由配置如下：import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/

2020-09-27 09:41:22 456

原创 vue技术交流群（864583465）vue和elementUI项目引入七牛云

1. 获取七牛云的token，每次上传图片都会用到，作为上传凭证，通常是后端生成，前端调用后端给的接口拿到token即可2. 利用elementUI组件el-upload完成图片的上传，代码示例： <el-upload action="http://upload.qiniup.com" :data="uploadData" :limit="limit" :fi

2020-09-14 16:09:42 439 3

原创 vue技术交流群（864583465）单页面拦截浏览器返回事件并自定义事件

在有可能点击浏览器返回箭头的页面，这里以vue单页面为例，在页面的钩子函数created或mounted里执行下列代码 window.history.pushState(null,'',location.href) window.addEventListener("popstate", ()=> { //执行自定义单事件 }, false);PS：欢迎加入vue技术交流群（864583465）进行更多问题的探讨，你的问题将是我们大家共同进步的关键...

2020-08-27 16:35:10 222

原创 vue技术交流群（864583465）Vue项目用webpack打包后显示文件名(魔法注释)

Vue项目用webpack打包后显示文件名(魔法注释)修改 outputoutput: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js'), chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')},在路由或组件中找到懒加载组件的component{ path: 'home', na

2020-07-24 16:41:39 948

原创 vue微信H5页面,首次进入授权之后的页面,按手机返回键导致重新授权等问题等解决办法

vue微信H5页面,首次进入授权之后的页面,按手机返回键导致重新授权等问题等解决办法问题产生的场景:vue微信h5页面,授权后通常会进入到某个指定到页面,此时若用户点击手机的返回键或浏览器的返回键时,页面会重新授权和跳转,但此时code已经失效了,获取微信的openId就会导致失败,因此需要阻止用户点击返回键,这里想到但办法是在进行微信授权前存个缓存值,例如window.sessionStorage.setItem('historyNum','1')授权后改变historyNum的值,在点击返回时判

2020-06-10 13:38:19 3708

空空如也

空空如也