vue前端
在开发前端时遇到的一些问题和解决办法记录,扩展自己的知识。走向世界的大门。
Riverse
平庸是一种失败和无奈,当所有障碍都接踵而至时,离心中的那个地方就不远了。
展开
-
ubuntu系统安装nginx部署项目
ubuntu 系统和 linux 系统上的命令不一样,ubuntu 使用的是。原创 2023-03-28 14:34:51 · 728 阅读 · 1 评论 -
vue代码打包发布时混淆加密
vue 代码混淆加密压缩 - 简书 (jianshu.com)1、安装插件:2、在 vue.config 文件中配置:3、重新打包发布:4、如果有遇到报错清空,大概率是遇到es6语法导致无法压缩。解决方法有很多,最简单的就是更改uglifyjs版本。...转载 2022-06-29 21:00:14 · 7599 阅读 · 0 评论 -
vue 结合scss实现前台主题颜色动态变化
安装scss。定义想要变化的颜色和主题。定义方法动态切换颜色。使用、一键更改主题颜色。原创 2022-06-27 22:14:25 · 1674 阅读 · 3 评论 -
vue 根页面上操作 iframe 的方式(伪造多页面):
在vue单页面程序中做类似于h5的多页面程序,使得切换页签时不会重新渲染组件而是直接切换原创 2022-06-27 21:36:20 · 1811 阅读 · 2 评论 -
前端无操作 30 分钟后进行注销等操作
思路:一次点击的时间和下次点击时间,如果差大于30分钟就调退出登录的接口,小于记录最新点击时间下次点击在比较。原创 2022-06-27 20:56:43 · 497 阅读 · 0 评论 -
vue Fuse.js 模糊搜索引擎用法
参考代码的使用原创 2022-06-27 20:27:35 · 1086 阅读 · 0 评论 -
前端开发中接收“图片乱码”的处理:
前端处理后台返回的图片控制台输出是乱码原创 2022-06-27 14:34:03 · 1635 阅读 · 0 评论 -
jenkins 自动化部署vue项目(最简版)
1、安装jenkins:参考链接:(1)centos安装jdk和jenkins_骑着骆驼去看海的博客-CSDN博客(2)centos7.3安装配置jenkins完整版_lxw的博客-CSDN博客2、CentOS安装 node.js 和 git参考链接:(1)CentOS7 安装 nodejs - klvchen - 博客园(2)CentOS 安装最新版本 Git - 江湖小小白 - 博客园 (cnblogs.com)3、打开jenkins进行配置* 任务名字按自己的需...原创 2022-02-28 23:11:42 · 6717 阅读 · 0 评论 -
(最简单版)element table tree 表格树形数据的懒加载,和点击每一行就能展开数据
1,准备工作,后台准备这样一个接口,即根据 id 能请求得到下一层的数据,没有层级关系,children字段为空。2,表格树形数据的动态加载:先设置lazy和绑定load函数 <el-table v-loading="loading" :data="deptList" row-key="deptId" lazy :load="treeLoad" :tree-props="{ children: 'children', h原创 2021-10-31 14:38:35 · 8801 阅读 · 0 评论 -
element ui实现分页选中状态,分页多选状态保持
1,在table中指定row-key,设置一个ref(用来清除选中状态) <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange" :row-style="{ height: '30px' }" :cell-style="{ padding: '0px' }" height="493" :row原创 2021-10-31 14:07:14 · 728 阅读 · 0 评论 -
Vue 前端对接第三方平台扫码登录(Oauth2)
本方式是用 Oauth2的方式实现扫码登录的,其中省略了不少不重要的代码1、编写页面样式,设置扫码链接入口1、页面样式不多说,参考一下: <el-dropdown> <span class="el-dropdown-link" style="color: #1890ff"> 第三方登录<i class="el-icon-arrow-down el-icon--right"></i> .原创 2021-09-29 14:31:13 · 2632 阅读 · 0 评论 -
Vue中结合后端实现AES加解密操作(最新)
1、安装对应的包终端执行命令安装对应的 crypto.js包npm install crypto-js --save2、添加工具类在utils 文件夹下创建secret.js 文件,放入以下内容:const CryptoJS = require('crypto-js'); //引用AES源码js// const key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF"); //十六位十六进制数作为密钥// const iv...原创 2021-09-29 14:02:51 · 535 阅读 · 0 评论 -
vue中关于定时器的使用总结:
1、定时执行 (setTimeout)在达到时间后只会执行一次,第一个参数为方法名或者方法,注意为方法名的时候不要加括号,第二个参数为时间间隔。<template> <section> <h1>hello world~</h1> </section></template><script> export default { data() { return {原创 2021-09-20 19:12:00 · 3841 阅读 · 0 评论 -
vue中请求方式总结
1、常规方式,将参数拼接到后面,或者不带参数请求。export function getTopic(id) { return request({ url: '/space/topicFavlist/getTopic/' + id, method: 'get', })}2、在body中携带参数,常用于post请求。export function addCollect(data) { return request({ url: '/space/topicFa原创 2021-09-20 18:34:08 · 4348 阅读 · 0 评论 -
vue实现页面全屏、局部全屏等多方式全屏
1、vuex创建全局变量在store/index中:import Vuex from 'vuex'Vue.use(Vuex)const user = { state: { // 全屏 fullscreen: false, }, mutations: { // 全屏 SET_FULLSCREEN: (state, fullscreen) => { state.fullscreen = fullscreen }, },原创 2021-09-21 00:03:17 · 4750 阅读 · 1 评论 -
vue 获取url里参数方法(超简单)
直接贴一段代码就懂了: //使用vue的this.$route来获取params参数 let params = this.$route.query; let datas = { topicId: params.topicId, shareEncryKey: params.shareEncryKey, operName: params.operName, };...原创 2021-09-20 22:54:13 · 904 阅读 · 0 评论 -
vue,js时间处理--通用方法
时间的处理经常要用到,现在介绍一种通用的处理方式,能解决90%的需求:注:第一个参数代表天数,0今天,1明天,-1昨天,以此类推 第二个参数代表距离当前时间的间隔,正数代表以后,负数代表以前例:// 当前时间2小时后的时间:console.log(this.getDay(0, 7200000));// 当前时间6小时后的时间:console.log(this.getDay(0, 7200000*3));<script> // 获取 时间有关函数...原创 2021-09-20 20:33:19 · 165 阅读 · 0 评论 -
VUE 实现复制内容到剪贴板的方法
VUE 复制内容至剪切板(两种使用方法)复制内容至剪切板使用的是插件'vue-clipboard2',通过官方文档会发现共有两种使用方式。第一种方式与大多数文章类似,只粘贴代码:<template> <div class="container"> <input type="text" v-model="message"> <button type="button" v-clipboard:copy="message"转载 2021-09-20 20:17:54 · 16081 阅读 · 0 评论 -
css实现文字从右向左排列
在css样式中加入:direction: rtl ,即可让文字从右向左排列,但此时符号的排列位置不正确,会显示在文本的最左边。如:hello,world! 会变成:!hello,world解决方式1、在文本的末尾加入特殊符号 “ ‎ ”<div class="container">Hello, World!‎</div>2、使用行内元素(span)包裹着文本,并且为内联元素设置样式:{ direction: ltr..转载 2021-09-20 20:44:03 · 4320 阅读 · 0 评论 -
vue 简单实现锁屏功能(不涉及路由)
本案例的原理是在原有页面上添加遮罩层进行锁屏,当解锁后遮罩层消失,回到原来的页面,而不做反反复复的路由跳转,实现起来简单。1、在Vuex中设置全局参数在store/index中:import Vuex from 'vuex'Vue.use(Vuex)import md5 from 'js-md5';const user = { state: { isCover: localStorage.getItem("HLT_lockCOver") || false, //是否覆盖原创 2021-09-21 00:26:13 · 1444 阅读 · 0 评论 -
vue,js等在页面上随意添加水印的通用方法:
1、编写水印通用工具类:创建water.js并加入以下内容:let watermark = (settings) => { debugger; //默认设置 var defaultSettings={ watermark_ids:settings.watermark_ids, watermark_txt:settings.watermark_txt, watermark_x:0,//水印起始位置x轴坐标原创 2021-09-20 22:05:53 · 274 阅读 · 0 评论 -
vue中实现滚动加载页面,监听滚动距离等
1、用element框架自带的函数监听滚动条。具体方法是在div中设置最大高度max-height=xxx,将v-infinite-scroll="loadList"放在div上,当滚轮滑到最下面时,触发loadList函数,进而实现加载下一页。<template> <div id="embedContainer" class="app-main" v-loading="loading"> <div> <div cl原创 2021-09-20 20:08:05 · 1976 阅读 · 0 评论 -
vue element ui 中实现card卡片添加多选框操作
我们有时候会用到card来进行展示数据,但是数据又要进行批量操作,所以在循环的card数据下添加一个多选框能实现相应的功能满足需求。1、卡片内添加多选框: <el-checkbox v-if="mutipleSelect" v-model="selectionList" :label="item.topicId" @change="ids(item.topicId)"原创 2021-09-21 16:54:41 · 5257 阅读 · 5 评论 -
Vue中Vuex的详解与使用
上一个比较详细的链接:Vue中Vuex的详解与使用(简洁易懂的入门小实例) - Mica - 博客园 (cnblogs.com)转载 2021-09-20 22:38:08 · 71 阅读 · 0 评论