前端李小白的博客

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

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

通讯方式主要运用的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

使用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

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

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

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

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

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

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

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

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

作为一个经常偷懒的程序员，用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

只需要在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

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

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

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

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

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

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

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

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

基本用法：:clss<div :class="{ active: isActive }"></div><div :class="{ 'text-danger': hasError }"></div>//类名是斜杠就可以用 - 例如：'text-danger'上面的语法表示 active 这个 class 存在与否将取决于数据属性 isA...

在工作中，有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况，对于此，我们称这种列表叫做长列表。比如，在一些外汇交易系统中，前端会实时的展示用户的持仓情况(收益、亏损、手数等)，此时对于用户的持仓列表一般是不能分页的。那么我们应该怎么操作才能够提高浏览器渲染的性能呢？下面是一种具体的做法，引用的是云中桥的文章高性能渲染十万条数据。什么是虚拟列表虚拟列表其实是按需显示的一种实现...

https://www.cnblogs.com/zzxuan/p/9690496.html

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中items 是源数据数组，而 item 则是被迭代的数组元素的别名。当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它...

localStoragelocalStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。localStorage 属性是只读的。提示: 如果你只想将数据保存在当前会话中，可以使用 sessionStorage属性，改数据对象临时保...

这个demo涉及的知识点挺多的，有需要的同学自己拷贝代码研究一下，代码里面基本都有注释了。实现效果图如下，增删改查基本都实现了，而且做了一些简单的条件限制，有需要的同学可以来拿玩一下。<template> <div class="list"> <ul> <el-input class="inline-input2" place...

VUE里面实现input文本框只能输入0-99的正整数利用vue里面自带的watch监听器就可以了。话不多说，直接贴代码。在data () { fromAge: ‘0’, toAge: ‘99’, }在watch里面：watch: {fromAge (newName, oldName) {var reg = /^([1-9]\d|\d)KaTeX parse error: Exp...

有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里：上述内容可以通过 Vue 的 <component> 元素加一个特殊的 is 特性来实现：<!-- 组件会在 `currentTabComponent` 改变时改变 --><component v-bind:is="currentTabComponent"></compone...

https://juejin.im/post/5d58cb36e51d4561da620140标题什么是keepalive?在平常开发中，有部分组件没有必要多次初始化，这时，我们需要将组件进行持久化，使组件的状态维持不变，在下一次展示时，也不会进行重新初始化组件。也就是说，keepalive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染 。也就是所谓的组件缓存...

**路由 router-view**路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。点击之后，怎么做...

方法一：通过 watch// 监听,当路由发生变化的时候执行watch:{ $route(to,from){ console.log(to.path); }},或// 监听,当路由发生变化的时候执行watch: { $route: { handler: function(val, oldVal){ console.log(val); ...

相同的地方：v-if与v-show都可以动态控制dom元素显示隐藏不同的地方：如果v-if指令的值为假，那么这个元素不会被插入DOM。举个例子：V-if<div v-if = "true">one</div><div v-if = "false">two</div>在浏览器生成的内容如下： <div>one</di...

防抖和节流的目的都是为了减少不必要的计算，不浪费资源，只在适合的时候再进行触发计算。一、函数防抖（debounce）1.定义： 事件触发停止一定时间后才会执行响应的函数，期间如果重复调用动作，重新计算时间。类似于，按下一个弹簧，只有你松手的时候弹簧才会弹起。本质上是将多次操作合并为一次操作。可用一个定时器维护，事件触发后wait时间内如果事件重复触发，那么取消当前定时器，重新设置一个时延为wa...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com...

在vue中使用vuex之state，下面是一个简单的教程，适合新手学习vuex的时候使用。首先要引入一下vue和vuex，为了方便学习，我就直接在头部引进cdn<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"...

先来看一下装好的axios源码import axios from 'axios'import { Message } from 'iview'// 统一请求路径前缀// // const base = '/crdp';// const base = '/ccma-server/api' // 服务器地址/const base = '/api' // 本地//// 超时设定a...

首先要有一个color-picker组件 <el-color-picker v-model="headcolor"></el-color-picker>在data里面data() { return {headcolor: ’ #278add ’ //这里可以选择一个默认的颜色} }然后在你想要改变颜色的地方用v-bind绑定就好了，例如：这里的:sty...

1.安装echarts依赖 npm install echarts --save2.在main.js中全局中引用import echarts from 'echarts'Vue.prototype.$echarts = echarts3.在你需要用到echart的地方先设置一个div的id、宽高，例子：<div id="chart-part1" style="width:1...