weixin_44781409的博客

父页面向子页面传值通过H5的postMessage方法传值首先，在父页面A中建立一个iframe，其中src要写好子页面B的地址，然后在A页面中写如下方法：<iframe [src]="iframeSrc" id="overviewView" width="100%" height="100%" frameborder="0"></iframe>var iframeSrc= "https://www.baidu.com";var iframe: any = documen

使用vue开发移动端页面时，往往需要实现页面根据不同设备屏幕进行尺寸的适配，实现将px自动换算成rem单位，其实只需要安装下面的两个插件即可快速实现移动端适配问题。1 准备工作：a. 安装 px2rem-loader 插件：npm install px2rem-loader --save；b. 安装 lib-flexible 插件：npm install lib-flexible --save;2 插件的作用：px2rem-loader插件的作用：我们通过配置基准，实现将px自动换算成rem，l

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。1. 全局前置守卫你可以使用 router.beforeEach 注册一个全局前置守卫：当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resol

在做网站登录验证的时候，使用到beforeEach 钩子函数进行验证操作，如下面代码 ，如果页面路径 path为/goodsList，那么就让它跳转到登录页面，实现了验证登录。如果需要登录验证的网页很多，怎么办？1.这里是对比path。如果需要验证的网页很多，那么必须在 if 条件里得写下所有的路由地址，非常麻烦。2.因为路由是可以嵌套的。有 ‘/goodsList’，那么可能会有子路由children（/online）,也就是’/goodsList/online’，再或者还有’/good

前言： 要实现多语言切换，这时候接触到国际化，前端框架无数，其中几种热门的框架都有相匹配的国际化插件工具。比如：vue + vue-i18nangular + angular-translatereact + react-intljquery + jquery.i18n.property在实际项目中使用的前端框架为Vue，故而我们将使用vue-i18n这个插件进行国际化功能的实现...

1.computed1.1 get用法 data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } }注意 fullName不可在data里...

我们在执行点击按钮跳转页面之前还会执行一系列方法，这时可以使用 this.$router.push(location) 来修改 url，完成跳转。push 后面可以是对象，也可以是字符串：// 字符串this.$router.push('/viewAgent')// 对象this.$router.push({ path: '/viewAgent' })// 命名的路由this.$r...

在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御cSRF等。一 . 安装npm install axios;二 . 引入在项目的src目录中，新建一个request文件夹，然后在里面新建一个http.js和一个api.js...

自己在工作中经常用到echarts来实现一些统计功能和效果，在这里对自己使用较多的做简单的记录，方便自己后期查阅。同时希望帮助更多人。首先简单介绍一下，ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开原协议，是一款非常优秀的可视化前端框架。1.首先在官网 选择合适的下载版本2.引入Echartsimport echarts f...

需求：　　验证前两行的姓名不能为空；解决方案：判断是否前两行，如是则增加校验规则；需在<FormItem>前加<Form>标签否则失效；在fules里加条件判断那些行，需激活校验规则，如果不加判断条件则可全部激活(true)。如需在Input输入框前方加 * 必填提示，则只需在，label内容最好为空字符串。代码实现：<template> /...

一 . 此方法使用的前提条件各系统间域名必须是相同的 .例如 http:// vue.deppontest.com:9000/#/ 自动登录到 http:// angular.deppontest.com:8080/#/需要登录的系统是以 cookie 与后端校验登录二 . 若满足以上条件可复制此代码使用 // 查看是否登录过有cookie con...

vue项目引入外部字体包，然后报这个错解决方案

1 首先在vue项目中npm install moment --save2. 定义时间格式化全局过滤器在main.js中或组件中导入该组件 import moment from 'moment'3. 用法一在全局中定义时间格式化在main.js中引入moment// 定义一个全局过滤器实现日期格式化Vue.filter('datefmt', function (input,...

{ "name": "hz-components-ui", "description": "uicomponents", "version": "0.0.0", "author": "wyx", "license": "MIT", // 因为组件包是公用的，所以private为false "private": false, "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --

一 . 写组件新建 button.vue 组件 <template> <button> <slot> <slot/> <!-- 插槽 --> </button></template> <script>export default { // 传入子组件的参数...

在vue单页面应用中，我们大概都会使用CommonsChunkPlugin这个插件。但是在项目经过本地测试没有任何问题，打包上线后却会报错 webpackJsonp is not defined。这是因为公共文件必须在自己引用的js文件之前引用。方案一可以手动改文件引用，但是推荐以下解决办法：找到build→webpack.prod.conf.js→找到HtmlWebpackPlugin...

现在网上上有很多的富文本编辑器，但我个人还是非常喜欢Vue家族的vue-quill-deitor，虽然说它只支持IE10+好 , 废话不多说直接上代码，现在是见证奇迹的时刻, 在vue中使用quill呢，我们需要npm进行安装，安装命令如下：第一步下载 :npm i vue-quill-editor -D第二步安装依赖 :npm i quill -D第三步全局引用//在mai...

在vue-cli npm i 下载依赖时报错Maximum call stack size exceeded 网上查了很多资料依然无法解决这个报错问题最后在不懈的努力下发现了 , 问题是由于在windows 系统下载依赖时项目会生成一个package-lock.json 文件而这个文件在Macbook中 Mac OS X操作系统解析时会出现这个报错解决办法删除本地项目中的 package-...

由于按钮权限和用户登录角色相关，因此在用户登录后，我们首先要根据用户角色查询到当前用户权限下所拥有的全部数据。由于按钮分布于不同的页面，所以我们要把查询到的数据存储在 localstorage 或 sessionstorage 中，用于后面进行验证。具体操作如下 :一 : 存储角色权限查到的数据 // "bb"查询到的角色数据 sessionStorage.setItem("btnPe...

WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。特点包括：（1）建立在 TCP 协议之上，服务器端的实现比较容易。（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因...

在日常的开发过程中，可编辑表格的应用场景还是很多的。在尝试实现该功能时，发现没有很便捷的实现方式，官方文档也没有具体案例；于是自己动手简单写了个demo 仅供参考具体代码如下所示 :<template> <div style="padding:50px;"> <Divider> <Button @click="addRow"&...

有时候为了个性化，可能需要为部分字体添加特殊的font-family1.在static文件夹中创建font文件夹将字体文件放入2. 在font文件中新建font.csscss内容如下：@font-face { font-family: 'SourceHanSans'; //自定义文字名 src: url('./SourceHanSansCN-Normal.otf')...

在vue项目中实现 将 ECharts 图表数据导出excel 两种方式