♡鲸落♡-CSDN博客

原创配置文件.babelrc和babel.config.js

.babelrc和babel.config.js一、前言今天看ES6的知识发现了项目中.babelrc和babel.config.js 都是Babel的配置文件，之前没怎么研究过两者的区别，今天来学习记录下二、学习babel 7.x 以上开始支持两种类型的配置文件, 分别是.babelrc 和 babel.config.jsbabel.config.js是在babel第7版引入的，主要是为了解决babel6中的一些问题.babelrc会在一些情况下，莫名地应用在node_modules中.b

2021-07-08 15:37:35 4616

原创在vue中使用NProgress

NProgress1、安装npm install --save nprogress2、使用在router.js中//导入import NProgress from 'nprogress'import 'nprogress/nprogress.css'// 直接调用 start()或者done()来控制进度条。router.beforeEach((to, from, next) => { NProgress.start() // 开始 next()})router.a

2021-06-23 15:09:18 204

原创同一个元素中同时使用浮动和定位

当在同一个元素中同时使用浮动和定位时，分情况讨论：1、float 可以和 relative 混用：两个同时起作用经常用于父元素浮动，里面的子元素定位<div class="father"> <div class="son"></div></div>.father { background: #b7cffb; height: 500px; width: 500px; float: right; position: relati

2021-06-23 11:18:38 2477 1

原创 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten w

一、问题vue项目中，自定义子组件的时候，在子组件中修改了父组件传递过来的值，报错场景：父组件引入绘制图表的子组件，存在：子组件图表点击下钻重绘的功能，对于此功能我通过echarts中的点击事件重新赋值传过来的数据chartData，然后再通过对chartData的监听重绘图表父组件：<div class="echarts"> <BaseEcharts :chartData="barData"/></

2021-06-08 11:15:11 2909

原创项目中的复制问题 --- clipboard

今天总结下项目中遇到的有关复制文本的问题两种解决方法：vue-clipboard21、安装 vue-clipboard2 插件npm i vue-clipboard22、在main.js中添加import Vue from 'vue'import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)3、使用方法一<div id="app"></div> <template id="t"

2021-06-03 17:58:27 420

原创分割面板组件

一、前言项目中遇到需求：将界面，分割为可以拖拽调整宽度两部分区域，并且可以兼容到ie9+，如图：做项目的过程中学习到了几种同类的插件总结下 ????二、学习1、vue-split-panel （能兼容到ie9+）安装 npm install vue-split-panel在main.js中引用 import VueSplit from 'vue-split-panel' Vue.use(VueSplit)使用<Split style="height: 100vh" :gu

2021-06-01 16:11:36 1573

原创 Vue Cannot read property ‘xxx‘ of undefined

一、前言之前经常遇到这个问题，Vue Cannot read property ‘xxx’ of undefined 今天就总结下，剖析下原因。二、问题场景一：获取 table.content.name<template> <div>单位：{{table.content.name}}</div><template><script>export default { data() { return { tabl

2021-03-23 16:20:54 3839

原创使用 element-ui 中制作Tab切换（切换vue组件踩坑）

???? 该文章承接下文 “父组件异步获取数据传给子组件获取不到”一、问题vue项目中运用到了Tab切换，切换vue组件，如图切换封装的echarts图表组件❗ **==> 注意：此时用的自己写的死数据，图表也添加了监听事件使图表随窗口变化而变化 **代码如下： <el-tabs v-model="attributeName"> <el-tab-pane label="用户数量" name="first"> <Charts :ba

2021-03-12 18:18:36 3835

原创父组件异步获取数据传给子组件获取不到

最近封装了个echarts图表的子组件,发现父组件中数据从接口获取后，传递给子组件时，在子组件的created函数中取不到，代码是这样的父组件： <el-tabs v-model="attributeName"> <el-tab-pane label="用户数量" name="first"> <Charts v-if="attributeName === 'first'" :barData="bardatas.count" type="bar" /.

2021-03-09 17:15:48 1256

原创 caret-color

一、前言今天写input标签时想修改光标变色发现这可以用一个属性控制二、知识点caret-color 属性：用来定义插入光标（caret）的颜色，这里说的插入光标，就是那个在网页的可编辑器区域内，用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。附注：上面说的“插入光标”（insertion caret）只是光标（caret）的其中一种。比如一些浏览器有一种光标叫做“导航光标“（navigation caret），它可以在不可编辑区域内来回移动。此外，当鼠标指针移动到一

2021-03-08 11:26:47 486 2

原创绘制饼图的渐变色处理

今天遇到了饼图的渐变色处理之前都是一个饼图的渐变色处理，这次是多个饼图的渐变色处理通过一顿操作直接上代码itemStyle 加在 series 中itemStyle: { normal: { //颜色渐变 color: function(params) { var colorList = [ { c1: " #1CB4E0", c2: "#87DCF5" }, {

2021-02-02 15:35:32 777

原创 vue项目中引用echarts

遇到的问题：echarts引用不进项目中像往常一样下载echartsnpm install echarts -S 在main.js中引用echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts结果报错了，发现没引用成功，然后翻找了echarts官网发现所以引用方式是const echarts = require('echarts') // 或者 import * as echarts from .

2021-01-27 16:25:54 348 2

转载 scss中的一些用法

???? @import 命令导入外部sass、scss、css文件 < style lang = "scss" > @import './test.scss' ; // 导入外部scss文件</ style > ???? 变量声明变量的语法是：$+变量名+：+变量值；如下$color : red ; // 声明变量 $color区分

2021-01-26 15:58:56 1141

原创前端加密方式

总结下项目中用到的一些加密方式：一、RSA项目的登录页面要加密用户名和密码，前端利用RSA进行加密，后端用java实现的解密过程使用JSEncrypt.js插件（jsencrypt就是一个基于rsa加解密的js库）使用公钥加密的数据,利用私钥进行解密使用私钥加密的数据,利用公钥进行解密前端大概的加密流程前端调用后端公钥的接口获取公钥---->前端使用JSEncrypt中间件设置公钥，并加密密码---->前端将加密后的数据通过接口（如登录接口）传给后台----

2021-01-22 15:35:28 878

原创表格导出成excel格式

vue项目中遇到表格导出成excel格式的功能，纯前端处理导出问题1、首先运用到的文件：xlsx.full.min.js（下载）、util.jsutil.jsimport XLSX from './xlsx.full.min'var Utils = { openDownloadDialog: function (url, saveName) { if (typeof url == 'object' && url instanceof Blob) {

2021-01-20 16:37:58 187

原创 element UI动态生成多级表头的表格

公司项目中展示的表格要求是多级表头的，张这样????我看了下 element UI 中的表格里面的多级表头张这样????接下来说下怎么实现的：1、首先封装两个组件 MyTable.vue、MyColumn.vueMyTable.vue是对表格的封装<template> <div class="my-table"> <el-table :data="data" height="500"> <my-column v-for="(it

2021-01-20 15:47:57 1402

原创前端常用UI组件

这段时间对我了解的一些框架知识的总结：1、Element Plus ：基于 Vue 3.0 的PC 端组件库2、Ant Design Vue ：基于 Ant Design 和 Vue 的企业级 UI 组件库；支持浏览器：现代浏览器和 IE9 及以上（需要 polyfills）1、Muse-UI：基于 Vue 2.0 优雅的 Material Design UI 组件库1、什么是Material Design？在2014年的 Google I/O 上推出了 Material Design.

2021-01-06 17:35:39 1621

转载 JS代码判断IE6,IE7,IE8,IE9的函数代码

项目要兼容到ie9所以有时候会用到JS检测IE的版本，下面是检测Microsoft Internet Explorer版本的两种代码！第一种if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/7./i)=="7.") { alert("IE 7.0"); } else if(navigator.appName == "Microsoft Internet

2020-12-25 15:07:57 210

原创 vue项目中的打印问题---vue-print-nb

vue项目中的打印问题前言：最近之前的vue项目中，文章详情页面的打印功能出了问题，之前用的是vue-print-nb，现在有的客户反馈出现打印页面不完整的问题（客户用的国产的浏览器），所以想换一种写法处理这个问题，发现js原生就有打印的方法print()下面记录下之前用的和现在的方法vue-print-nb安装npm install vue-print-nb --save安装好以后在main.js文件中引入import Print from 'vue-print-nb'Vue

2020-12-25 14:55:47 2063

转载 vue路由懒加载

vue（路由懒加载）的3种方式路由懒加载的优点：首屏组件加载速度更快一些，解决白屏问题未用懒加载方式import Home from '@/components/home'import Index from '@/components/index 'import About from '@/components/about '{ path: '/about', com...

2019-09-05 16:16:55 412

鲸落