![](https://img-blog.csdnimg.cn/20190918140053667.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端知识 — 基础 + vue + react
主要记录一些前端知识,以及个人主用的vue、react框架
Interest1_wyt
这个作者很懒,什么都没留下…
展开
-
Linux中使用nginx发布react项目
Linux中使用nginx发布react项目原创 2022-04-16 18:49:50 · 3957 阅读 · 0 评论 -
vue技巧(九)跨域及跨域配置不生效原因探究
module.exports = { devServer: { port: 8888, //前端服务启动的端口号 host: 'localhost', //前端服务启动后的访问ip,默认为localhost, host和port组成了前端服务启动后的访问入口。 https: false, open: true, proxy: { '/k_olap_web': { //拦截上下文 .原创 2022-05-18 21:28:00 · 12047 阅读 · 0 评论 -
vue技巧(八)prop父传子emit子传父 通用弹窗组件封装
最近几个页面都用到一些通用的弹窗,为了减少重复开发,于是想做成一个通用的组件,再加上这个过程中涉及到父子之间的传参,所以这次组件封装具有参考意思,故记录该篇文章用于以后的使用参考。需求:封装一个通用的弹窗组件(非重点:弹窗中包含下拉选择框以及特定标签触发的输入框),父类传参到通用组件控制弹窗的展示与关闭,子类将用户选取的参数传递到父类。通用弹窗子组件:CubeFunTypeDialog.vue<template> <el-dialog title="自定义"原创 2021-12-28 22:01:16 · 636 阅读 · 0 评论 -
vue技巧(七)状态类展示使用红绿圆点
通常对于一些在线、离线类的展示使用图标展示比使用文字描述会更加清晰直观。项目中使用的代码如下: <el-table-column prop="status" label="状态" width="70%" > <template slot-scope="scope" > <span slot="reference" v-if="scope.row.status == 1"> <原创 2021-12-28 21:39:33 · 6600 阅读 · 1 评论 -
vue技巧(六)table column列信息太长悬浮展示
vue中使用table展示列表信息时,如果信息太长展示会很丑,table自带的溢出悬浮展示功能很不美观,而且悬浮框很难支持拷贝。这里记录下自己使用的悬浮展示代码,便于后续复制使用。<el-table-column prop="measures" label="度量"> <template slot-scope="scope"> <el-popover placement="top"原创 2021-12-12 21:18:06 · 2968 阅读 · 1 评论 -
vue技巧(五)通用loading组件
当我们调用一些耗时比较久的接口时,在页面上最好有个“锁定”的状态,防止在请求过程中用户重复发起请求或触发页面上的一些其它事件。下面是我们实际使用中的效果图:该技术的实现主要是依赖自定义组件以及vuex的全局存储功能,实现流程如下:1、首先是创建一个通用的组件Loading.vue<template> <el-dialog title="提示" :visible.sync="requesting" width="30%" > &原创 2021-12-13 08:52:13 · 4495 阅读 · 0 评论 -
vue技巧(四)element table多选框隐藏首行
element table自带多选框的功能,但是有的时候我们希望禁用表头的全选功能,这在table中是没有相关属性可以配置的。本文是通过设置CSS样式,隐藏掉全选框的按钮。原图和效果图如下:原始图:修改后效果图:修改方法:<style lang="css" scoped>.meaClass /deep/ .el-table__header-wrapper .el-checkbox { display: none;}</style>这里meaC原创 2021-12-13 08:47:11 · 715 阅读 · 0 评论 -
vue技巧(三)动态下拉框 table实现动态组件
有一个需求是每点击一次添加,就自动生成一个新的下拉框。这类的需求一般都可以通过 table+ 目标组件的方式获得,下面是要实现的效果图以及项目中使用的代码:效果图:代码:<div> <div style="text-align:left"> <span >测试:</span> <el-button @click="addHierarchy">新增</el-button>..原创 2021-12-12 09:26:12 · 2385 阅读 · 0 评论 -
vue技巧(二)通用http.js封装
无论前端后端开发时合理的模块化设计都可以达到精简代码,提高扩展性的特点。前端开发时必不可少的会和后端进行各种交互,有的交互是post请求,有的可能是get请求,有的请求头可能需要设置Content-Type。另外所有请求都需要对响应进行判断,失败了就弹出提示信息,成功了则进行后续处理。下面是本人常用的封装代码(个人习惯定义下面的文件名为http.js):import axios from 'axios'import { Message } from 'element-ui' /** 需要引入el原创 2021-12-11 22:27:55 · 1259 阅读 · 1 评论 -
vue技巧(一)深度作用选择器
vue开发中经常会使用到各种组件,如果使用的组件只有一层我们通常设置的CSS或者SCSS样式会生效,但是如果引入的组件有很多层,而我们想修改的样式在组件内部,那么就需要通过特殊的操作符来声明。网上的结论是:一般会使用 >>> 符号来传递样式到内部组件中,有些Sass之类的预处理器无法解析该操作符。这时可以尝试使用/deep/ 或 ::v-deep 替代。我测试后发现在style lang声明为scss样式后(对于样式分类不太熟悉的小伙伴可以参考这篇文章:vue基础(一)css s.原创 2021-12-11 21:55:36 · 793 阅读 · 0 评论 -
vue基础(一)css sass scss less
前端一提起样式,我们不约而同的都会想到css样式,它是页面设计中最基础的样式语言,但除了css外,还有一些其它的样式语言,比如vuestyle声明中常用的scss等。为了减少开发时这些专业名词产生的困惑影响,这里搜集了一些常见的样式语言,并简单介绍它们的区别。css(Cascading Style Sheets):层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地.原创 2021-12-11 21:34:44 · 574 阅读 · 0 评论 -
vue报错解决及感悟(一)
项目一开始正常运行,我在加了一个axios调用方法后报错:1、报错信息如下:This relative module was not found:* ./lib-cov/stylus in ./node_modules/stylus/index.js2、问题分析:该报错提示缺少关联模块,即在“index.js”中引用了“stylus”,但此时却没找到stylus。正常来说要么是模块没有安装进来,要么就是安装的模块路径不对。如果没有安装,那么根据自己实际使用的模块进行安装解决即可。如果安装了,原创 2020-12-06 22:06:31 · 1153 阅读 · 0 评论 -
谷歌浏览器下禁止浏览器自动代理http图片到https
谷歌浏览器下禁止浏览器自动代理http图片到https1、前言 所在公司目前开发了一个新的模块,但是集成到门户后。 用谷歌浏览器打开门户,访问模块内http类型的图片时,访问不了,通过debug排查,发现是http图片链接转换成了https形式。初始以为是前端代码问题,但是换个浏览器后,用360浏览器打开门户,则可以正常访问http类型图片。于是判断为谷歌浏览器自动转换了http请求。使用了网上配置域名了方式,但是没有起作用,后面经过下面的设置后,解决了问题,配置如下:2、解析及...原创 2020-11-01 10:29:45 · 1343 阅读 · 1 评论 -
java后端学前端历程
java后端学前端历程背景:本人菜鸟一枚,入行时一开始选择的道路就是java后台的开发,因为后台较复杂,比较有意思。事实证明后台确实有趣,和操作系统、数据库打交道,使用各种命令查看服务器或者项目的运行情况很让人开心。不过纯后台很难做一个完整的项目,再加上工作的一部分需要,所以本人开始学习前端。此处记录下学习前端的历程,既是想分享给想学前端朋友,也是想记录下自己脚步,激励自己再接再励。由于我不是专门的前端,如果有什么不足和错误之处,希望各位大佬多多指导。内容:学习前端,首先要了解前端有那些内容,以原创 2020-12-28 19:53:09 · 700 阅读 · 0 评论