前端李小白-CSDN博客

原创 window.close() 在 iOS/MAC不起作用的解决办法

直接加一个定时器大于300ms就可以了setTimeout(window.close, 301);

2021-08-18 11:05:21 1377

转载九种跨域方式实现原理

前言前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。一、什么是跨域？1.什么是同源策略及其限制内容？同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。同源策略限制内容有：Cookie、LocalStorage、IndexedDB 等存储性内容DOM 节点AJAX 请求发送后，结果被浏览器拦截了

2021-08-12 21:26:08 372

原创 React Hooks 入门教程

阮一峰老师教程官方文档使用 State HookHook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。一、组件类的缺点React 的核心是组件。v16.8 版本之前，组件的标准写法是类（class）。下面是一个简单的组件类。import React, { Component } from "react";export default class Button extends Component { cons

2021-08-11 11:52:52 348

原创 Vue iframe之间通讯

1、主应用通过在iframe的onload事件中，使用postMessage向子应用进行数据交互2、子应用在mounted阶段通过监听onmessage事件进行接收事件主应用<template> <div v-tip="loading" :style="'height:' + (isQiankun ? qiankunHeight : height)"> <iframe ref="iframe" :src="src" fram

2021-08-10 17:47:04 3531

原创在vue项目上使用阿里qiankun ——项目部署篇（三）

qiankun官方文档部署教程官方文档写的也挺详细的，这里我主要以统一身份认证与盐田综管部署举例说明，我部署的服务器地址http://192.168.8.27:8077首先要注意的是，我们主应用和子应用都是使用history模式，路由记得设置base，vue.config.js也要记得设置publicPath。引用文档的原话：部署之后注意三点：1、activeRule不能和微应用的真实访问路径一样，否则在主应用页面刷新会直接变成微应用页面。2、微应用的真实访问路径就是微应用的entry，entr

2021-08-08 20:11:40 1407

原创在vue项目上使用阿里qiankun ——项目通讯篇（二）

通讯方式主要运用的qiankun提供的通讯api initGlobalState 以及vuex动态添加模块的方法registerModule1、在qiankun文件夹下创建share.js/* * @Author: Hzh * @Date: 2021-05-07 16:02:48 * @LastEditTime: 2021-07-22 14:52:57 * @LastEditors: Hzh * @Description: */import Vue from 'vue'import

2021-08-08 20:03:16 1894

原创 http常用缓存策略及vue-cli单页面应用、服务器端(nginx)如何设置缓存或者禁用

问题描述vue 项目打包上线之后，每一次都会有浏览器缓存问题，需要手动的清除缓存。这样用户体验非常不好，所以我们在打包部署的时候需要尽量避免浏览器的缓存。需要解决的问题1、程序每次升级后，用户都不会因为缓存问题而执行的仍然是老的程序。2、若程序没升级，用户对静态资源的请求则能用到缓存。关于http或者是浏览器缓存策略，可以分为这三种：不使用缓存强制使用缓存协商使用缓存不使用缓存有时，我们希望浏览器永远都不要使用缓存，全部到服务器拉取数据，此时即为不使用缓存，我们可以在服务

2021-08-04 16:42:49 1350

原创关于webpack优化的几个插件介绍

以下都是我在vue项目中使用过关于webpack的几个插件1、hard-source-webpack-pluginHardSourceWebpackPlugin是webpack的插件，为模块提供中间缓存步骤。为了查看结果，您需要使用此插件运行webpack两次：第一次构建将花费正常的时间。第二次构建将显着加快（大概提升90%的构建速度）安装：npm install --save-dev hard-source-webpack-plugin配置：const HardSourceWebpackPlug

2021-07-29 17:08:24 1634

原创在vue中配合sass画一个正六边形

<template> <el-row class="sampling-org"> <el-row class="left-top"> <el-row class="hexagon"> <el-row class="text"> <svg-icon icon-class="double-helix" /> </el-row> </el

2021-06-30 14:56:40 868

原创在vue项目上使用阿里qiankun ——项目搭建篇（一）

什么是微前端简单来说就是1、复用（嵌入）别人的项目页面，但是别人的项目运行在他自己的环境之上。2、巨无霸应用拆分成一个个的小项目，这些小项目独立开发部署，又可以自由组合进行售卖本文主要讲解如何在vue项目上使用阿里的qiankun插件进行微前端实践，对微前端的概念会在另外的文章中进行阐述，demo会附在文末。首先我准备了三个项目、分别是主应用main-app、子应用b-child、c-child。三个应用均是采用Vue技术栈，路由均是采用history模式改造主应用main-app1、首先需要

2021-04-25 16:07:12 8856 1

原创 Vue Split Pane的使用，以及max-percent不生效的问题

使用demo使用方式npm install vue-splitpane#importimport splitPane from 'vue-splitpane'# use as global componentVue.component('split-pane', splitPane);使用例子：简单的左右分割 <split-pane v-on:resize="resize" :min-percent='20' :default-percent='30' split="vertic

2021-04-15 10:23:07 1869 1

原创 vue 在组件中自定义v-model

先来个官方解释自定义组件的 v-model我们来实践一下：在子组件中：<template> <div> <button @click="sub">-</button> 子组件的count:{{ count }} <button @click="add">+</button> </div></template><script>export default

2021-04-14 23:47:27 2673 1

原创获取element ui Tree组件调用过滤方法后的数据

最近有个需求是需要获取过滤后的 Tree组件数据，看了一下element的文档，发现没有这个api，然后看了一下tree组件的数据，也没找到过滤后的数据，最后发现，element是通过Nodetree控制一个visible的变量来控制节点显示不显示的，如图得到这个参数也算不错了，接下来就只需要写个递归遍历出来就行 /** * @description: 获取过滤后的数据 */ getFilterData() { if (this.filterText)

2021-04-07 10:55:18 2990 2

原创在vue项目中使用scss经验

1、在assets文件夹下的styles中，文件结构如下：element-ui ele的组件样式element-variables ele主题颜色变量Index 项目全局样式Mixin 混入样式Transition 动画样式Variables 项目样式变量2、重置css样式Normalize.css是一种CSS reset的替代方案。它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准

2021-04-06 14:42:34 1362

原创 Vuex模块化用法跨模块调用方法

跨模块调用state使用rootState调用根state，拿到对应模块下的stateactionFntion({state, commit, rootState}){ console.log(rootState.moduleA.a)}跨模块调用其他模块mutation和actionmoduleA_action({commit}){ commit('moduleB/mutiationFn',{}, {root: true}) dispatch('moduleB/actio

2020-12-11 17:47:44 3481

原创 element表格默认勾选不生效的问题

默认勾选可以这样做 this.$refs.multipleTable.toggleRowSelection(row);如果不生效的话，一般需要考虑这几种情况1、获取数据（选中的数据以及表格展示的数据）这里的两个数据必须是同一个对象的数据，也就是数据必须是表格当中的数据，而且不能深拷贝2、设置表格数据3、设置完成后，一般我们都是获取到后端的代码再设置this.$refs.multipleTable.toggleRowSelection(row);这里还要加一个$nextTick具体代码如下

2020-11-25 18:08:14 3326 1

原创 js 递归遍历查找对象数组的某一个属性

方法一： /** * @description: 递归遍历查找数组对象的某个值 * @param {string} code * @param {array} arr */ filterTableMater(code, arr) { const queue = [...arr] while (queue.length) { const o = queue.shift() if (o.code ===

2020-11-18 10:13:18 8532 2

原创 element ui 树形控件tree实现单选功能

<el-tree ref="tree" class="tree" :props="treeProps" :node-key="'id'" :empty-text="' '" :data="treeData" show-checkbox check-strictly :expand-on-c

2020-11-17 16:14:32 3435 4

原创教你优雅的导入ui组件库，以vant举例

一般在使用组件库时，为了减小包体积，都是采用按需加载的方式。如果在入口文件内逐个引入组件会让 main.js 越来越庞大，基于模块化开发的思想，最好是单独封装到一个配置文件中。配合上 Vue.use，在入口文件使用能让人一目了然。在根目录下新建一个vant.config.js代码如下：import { List, Toast, Search, Tabbar, TabbarItem, Button, Tab, Tabs, Col, Row, DropdownMenu, DropdownItem,

2020-09-10 10:30:26 715 1

原创在vue-cil中全局注册使用自定义指令，以及教你在移动端封装一个loading指令

先引用了一下官方的说明：除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM元素进行底层操作，这时候就会用到自定义指令。例如：注册一个全局自定义指令 v-focusVue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素

2020-08-21 15:49:13 797 1

原创记录vue中使用了transition后使用fixed引起的Bug

最近在项目的layout页面中使用了transition组件，接着页面里面某些使用fixed定位的元素就出现了问题，如图底部导航这个元素一开始会从底部弹起造成这样的原因可能是由于使用了fixed定位引起的，而且上面部分用了calc(100% -底部的高度)接下就这样解决了底部改成不用定位，滚动的地方使用calc(100vh -底部的高度)，再设置滚动，这样就解决了底部弹起的bug.r-image { .container { width: 100%; // height:

2020-07-31 13:52:24 1721

原创 vue $attrs、$listeners、inheritAttrs的理解

$attrs包含了父作用域中不被认为 (且不预期为) props 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 props 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind=”$attrs” 传入内部组件——在创建更高层次的组件时非常有用。$listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=”$listeners” 传入内部组件——在创建更高层次的组件时非常

2020-07-30 11:41:39 642 5

转载 Vue中import from的来源：省略后缀与加载文件夹

Vue使用import … from …来导入组件，库，变量等。而from后的来源可以是js，vue，json。这个是在webpack.base.conf.js中设置的：module.exports = { resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src') } }...}这里的extensions指定了from后可导入的文件类型。而上面定义的这3类

2020-07-27 14:48:28 920 1

原创基于promise封装ajax

代码/** * @description:把参数转为64编码 * @param {str} */export function encodeBase64(str) { return btoa(encodeURIComponent(str))}/** * @description:基于promise封装ajax * @param {String} method get或者post * @param {String} url * @param {Object} data 传参

2020-07-20 11:27:57 423

原创在vue中自动生成文件以及自动引入component，router、vuex按模块划分

作为一个经常偷懒的程序员，用vue写代码的时候怎么可以一个一个.vue文件创建和一个一个引入componet呢，下面是提交你开发效率的方法。1.安装插件npm install chalk --save-dev2.在根目录下创建一个scripts文件代码如下：generateVue.js// index.jsconst chalk = require('chalk')const path = require('path')const fs = require('fs')const reso

2020-06-22 18:32:43 2772 1

原创 Vue CLI 首屏优化技巧

https://www.cnblogs.com/royal6/p/12988252.html要首屏优化，首先你要知道有哪些东西可以优化，你可以生成打包报告进行查看。在package.json中，npm run build命令中添加如下命令，生成一份报告根据这份报告，你就知道有哪些文件需要优化了。一般的优化我们可以在vue.config.js里面优化configureWebpack 和 chainWebpack在 vue.config.js 导出的配置对象中，新增 configureWebpa

2020-06-05 16:18:48 673 1

原创 vue单页面在iOS微信浏览器中弹出底部栏导致的样式问题

只需要在app.vue的mounted里面添加如下代码即可解决这个问题 mounted() { const u = navigator.userAgent const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) if (isiOS) { window.history.pushState({}, 'title', '#') } },如果出现了无法滚动的Bug，可以尝试使用以下方式解决，例如，这个w

2020-06-01 15:50:38 1352

原创在Vue-cli3中区分环境打包

在vue-cli3的项目中，npm run serve时会把process.env.NODE_ENV设置为‘development’；npm run build 时会把process.env.NODE_ENV设置为‘production’；此时只要根据process.env.NODE_ENV设置不同请求url就可以很简单的区分出本地和线上环境。头疼的是打包时线上环境可能分多种，比如测试环境...

2020-04-11 15:09:48 7043 3

原创在vue中实现单个或者多个搜索词高亮

单个字段搜索高亮<div class="" style="margin-left:10px"> <input type="text" v-model="searchVal"> <div > <div v-html="replaceval"></div> <div v-html="replac...

2020-04-06 14:57:28 1409 2

原创在vue中封装一个betterscroll组件，并解决ios、Android在微信页面上下拉出现滑动的问题

最近在开发微信公众号网页的时候，发现使用原生滚动的时候，ios在微信网页下，上拉，下拉都会出现一大片的空白，看起来极其的别扭，为了解决这一问题，找了许多参考资料，如下是解决方法。1.首先在你需要禁止滑动的页面中添加如下代码mounted（）{ document.body.addEventListener( 'touchmove', function (e)...

2020-03-31 17:11:47 2875 1

原创使用vue封装一个消息提示组件

组件的代码和注释如下：如果有不明白的地方可以留言进行交流。<!--参数说明类型可选值默认值panelShape panel的的宽高,请带单位 Object ...

2020-03-27 10:00:40 1205

原创使用vue封装一个宫格组件，可以自定义列数，间距

代码和解释如下：<!-- 参数说明类型默认值 girdData 宫格里面的内容 Array [] columnNum 列数 ...

2020-03-26 18:02:39 3620

原创使用vant组件遇到 Identifier 'pleaseLetJsLoaded' has already been declared

如图，之前用vant的组件遇到了这样的错误怎么找都找不到这个参数，每点击一步都报错一次，郁闷死了，而且别人的浏览器还不会，后来才发现原来是下载了FeHelper(前端助手)的原因，删掉了就没这个报错了。真的是服了。。。...

2020-03-18 17:39:21 2033 4

原创 vue 关于webpack配置的几个优化

由于vue-cli3将webpack的基础配置全部内嵌了，这就导致我们初始化项目完成之后发现原先的webpack的config配置全部都消失不见了，那该怎么办呢？别慌，vue-cli3早就考虑到了这一点，它预留了一个vue.config.js的js文件供我们对webpack进行自定义配置。vue.config.js官方配置指南在项目根目录下新建vue.config.js文件与package.j...

2020-03-18 11:25:56 914 5

转载 vue-事件修饰符-详解（.prevent .stop .once .capture .self）

vue事件修饰符-详解.prevent -------等于javascript的event.preventDefault()作用：阻止默认程序的运行<form @submit.prevent="SomeFunction"></form>单独submit点击后会自动进行提交等一系列操作，prevent就可以阻止这些操作，让上面这段代码乖乖执行我们分配给它的Som...

2020-03-05 16:23:10 366

转载 js防抖和节流

在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。让我们先来看看在事件持续触发的过程中频繁执行函数是怎样的一种情况。html 文件中代码如下<div id="content" st...

2019-12-19 17:00:49 118 1

原创自己制作一个简易的防抖来阻止input的onchage和button的click函数同时触发

最近遇到了一个场景，如图input的onChange执行的函数和button执行的函数是一个相同的函数，这样就会造成一个问题，如果我修改了input里面的内容，然后同时点击button的话，那么那个函数就会执行两次，造成不友好的体验。所以自制了一个简易的防抖来阻止这个函数在0.5s内同时执行两次。代码如下:<body> <div> <button ...

2019-12-19 11:45:13 637

原创如何在Vue3项目中使用vw实现移动端适配

From: 大漠 W3cplus 2018-01-25有关于移动端的适配布局一直以来都是众说纷纭，对应的解决方案也是有很多种。在《使用Flexible实现手淘H5页面的终端适配》提出了Flexible的布局方案，随着viewport单位越来越受到众多浏览器的支持，因此在《再聊移动端页面的适配》一文中提出了vw来做移动端的适配问题。到目前为止不管是哪一种方案，都还存在一定的缺陷。言外之意，还没有哪...

2019-12-18 13:31:53 1551

原创 js监听某个元素高度变化来改变父级iframe的高度

最近需要做一个iframe调用其他页面内容，这个iframe地址是可变化的，但是里面的内容高度不确定且里面内容高度可调整，所以需要通过监听iframe里面body的高度变化来调整iframe的高度。后面发现了一个好用的插件detect-element-resize.js，首先看一下这个插件的介绍：插件简介跨浏览器，基于事件，元素调整大小检测。简而言之，此实现不使用内部计时器来检测大小更改（...

2019-12-04 14:23:01 841

原创用Node搭建一个后台管理系统的后端—HTTP API触发云函数（三）

在上一节中，我们封装好了如何定时获取微信小程序的access_token这节我们来使用HTTP API触发云函数我们先来看一下官方例子，触发微信小程序云函数需要什么条件在知道需要传递哪些参数以后我们就可以开始编写后台了首先在app.js里面安装koa-routernpm install koa-routerconst Router = require('koa-router')...

2019-11-27 11:16:10 507 1

空空如也

空空如也