订阅发布模式定义了一种一对多的依赖关系，让多个订阅者对象同时监听某一个主题对象。这个主题对象在自身状态变化时，会通知所有订阅者对象，使它们能够自动更新自己的状态。 比如addEventListener 这个api就是个发布订阅模式 如果用过vue的同学，可以把他类比于 watch 下面我们看一个例子 var observe={fnsObj:{},// 订阅方法on:function(key,fn){if(!observe.fnsObj[key]){observe.fnsObj[key] = []}observe.fnsObj[key].push(fn...
vue通信方式有很多，项目中用的比较多的的有 pros、vuex、$emit/$on 这3种，还有 provide/inject (适合高阶组件)、 $attrs和$listeners (适合高阶组件)以及 $parent/$child/ref、eventBus 等这3种方式。很多时候我们都是只会使用api，而懂得原理以及实现，但我就觉得懂得原理以及实现跟一个只会调用api的开发人员时不在同一层次的。所以这里就像把跨组件通信的 eventBus 通信的原理给大家展示一下。这也是自己学到大佬的的东西后并...
在开发项目的时候，我们一般都用 vue-cli 来避免繁琐的 webpack 配置和 template 配置。但是官方 cli3 现在并不支持搭建 plugin 开发的项目。 还好，已经有大神（Kazupon）走在了我们前面，我们就用现成的 vue-cli-plugin-p11n 。 如果你没有安装 vue-cli，请先安装 npm i -g @vue/cli 首先，搭建项目 vue create [your plugin name] && cd [your plugin name] vue add p11n这样我们就有了一个初始化的插件开发环境。 install 方法...
1. 使用name和params组合传参 this.$router.push({name: details, params: {id: 233}})路由配置 import Vue from vue import Router from vue-routerVue.use(Router)export default new Router({mode: history,routes: [{path: /details,name: details,component: resolve => require([../components/details], resolve)}] })获取参数 this.$route.params.id // 233 刷新参数丢失 显示 undefined this.$route.params.id // undefin...
演示地址https://my729.github.io/picture-crop-demo/dist/#/ 前言vue版本：3.6.3 https://cli.vuejs.org/zh/cropperjs: 1.5.1 https://github.com/fengyuanchen/cropperjselementUI https://element.eleme.io/#/zh-CN使用 cropperjs插件 和 原生canvas 两种方式实现图片裁剪功能 使用cropperjs插件安装cropperjsyarn install cropperjs 初始化一个canvas元素，并在上面绘制图片<canvas :id="data.src" ref="canvas"></canvas> // ...
因为业务需要一定要使用安卓4.4的webview浏览页面，测试的时候发生了白屏问题，很自然想到使用babel转换部分ES6语法. Babel 转换 Promise 和 Symbol ES6语法的配置# 两项都需要放到生产依赖 npm install babel-polyfill --save npm install es6-promise --save // main.js import babel-polyfill; import Es6Promise from es6-promise;Es6Promise.polyfill();// babel.config.jsprocess.env.VUE_CLI_BABEL_TRANSPILE_MODULES = tru...
本文实例为大家分享了Vue2.x通用条件搜索组件的封装及应用，供大家参考，具体内容如下 效果 组件源码 <template><div class="search"><el-select v-model="type" @change="changeType" class="select"><el-optionv-for="item in selectItems":key="item.value":lable="item.label":value="item.value"></el-option></el-select><div class=search-input><el-input :placeholder="placeholderDes" v-model="searchValue"></el-inp...
本文实例为大家分享了Vue2.x通用编辑组件的封装及应用，供大家参考，具体内容如下 效果 组件源码 <template><div class="edit-input"><div class="editBox"><div><span class="list">{{ name }}：</span><span class="listValue" v-if="!editStatus">{{value}}</span></div><span class="editLogo iconfont icon-Edit" @click="editStatus = !editStatus" v-if="!editStatus"></span><div class="edit" v-if="editStatus"><el-in...
随着组件的细化，就会遇到多组件状态共享的情况， Vuex当然可以解决这类问题，不过就像 Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是 vue.js 2.6 新增加的 Observable API ，通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。 先看下官网描述，如下图 observable()方法，用于设置监控属性，这样就可以监控viewModule中的属性值的变化，从而就可以动态的改变某个...
1.$refs的使用场景父组件调用子组件的方法，可以传递数据。 父组件： <div id="app"><child-a ref="child"></child-a><button @click="getMyEvent">点击父组件</button> <div><script>import ChildA from ./child.vueexport default{components:{ChildA},data(){return {msg:我是父组件的数据}},methods:{getMyEvent(){//调用子组件的方法，child是上边ref起的名字，emitEvent是子组件的方法。this.$refs.child.emitEvent(this.msg...
需求 一个平台P，包含产品a、b、c、d、e。各产品UI样式风格统一，且会用到公共配置（HOST、是否添加埋点js）、组件（头部导航、表格、搜索框）、方法（请求拦截、生成UUID）。 现状：由于历史遗留原因，各产品为独立SPA、各自维护，配置、组件也都自成一体，只是大概样式上保持了一致，但细节（比如同一面包屑样式，左边距5px、8px都有）都不一致。 这种情况下，改组件、改配置都得一改改多个地方，且有些项目是vue-cli2、有些是vu...
由于 Laravel-admin 采用的是 pjax 的方式刷新页面，意味着很多页面刷新的操作，并不是刷新整个 document，而是从服务器拿到部分 document，再通过类似 $(“#pjax-container”).html(newPart) 的方式更新的。 这就造成一个问题，每次 pjax 刷新，都会破坏 vue 的 dom 映射。 所以理论上有2种方法解决： 重新绑定一下 vue 的映射关系 在某些页面禁止 pjax 1 太难搞，而且没啥资料，放弃。2 的话比较可行。 部分禁止 pjax 打开 publi...
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。 当你使用 history 模式时，URL 就像正常的 url，例如 yoursite.com/user/id，也好看… 个人理解上面是官方的解释，文档的一贯风格，只给懂的人看。两年前我比现在还菜的时候，...
日常开发中经常遇到的一个场景，父组件有很多操作，需要弹窗，例如： <template><div class="page-xxx">//点击打开新增弹窗<button>新增</button>//点击打开编辑弹窗<button>编辑</button>//点击打开详情弹窗<button>详情</button><Add :showAdd="false"></Add><Edit :showEdit="false"></Edit><Detail :showDetail="false"></Detail></div> </template> 子组件： <div class="page-add"><el-dialog :visible="dialogVisible" @clo...
1 vuex的概念理解提到vuex,就不能不先提vue.我个人开始尝试学习使用vue,是因为此前总是遇到页面逻辑数据与视图的一致性问题.在使用vue之前,我们使用jQuery插件的时候,一桩麻烦事就是既要在每个数据变更后,写代码去改变视图,又要考虑html上各种输入改变时监听各种事件以改变页面逻辑数据.当然最早的时候,我们使用html内部的value来记载各种数据,但这种方式在今日看来就有些简单粗暴了,难以使用复杂的页面逻辑.这也正是我开始使用vue...