摘要：
一、先看如下代码， 无论你点击多少次按钮，结果始终是 10 。 <template> <div class="about"> <button @click="onAdd">点击</button> <p>结果 {{count}}</p> </div> </template> <script> cons 阅读全文
随笔分类 - vue有关
vue3 自定义 hooks 优雅处理异步调用 ajax
2021-04-23 13:12 by muamaker, 3745 阅读, 收藏, 编辑
摘要：
首先自定义一个专门处理异步的 hooks import {reactive, toRefs, ref } from "vue"; const useAsyncFn = (fn)=>{ let data = reactive({value:undefined ,loading:false,err:un 阅读全文
vue3.0的弹窗
2020-12-01 17:55 by muamaker, 2606 阅读, 收藏, 编辑
摘要：
关于vue3.0写一个弹窗 一、官方提供的方法 teleport <template> <teleport to="#modal-container"> <div class="test"> <el-button type="primary">这是一个测试</el-button> </div> </ 阅读全文
vue基于 element ui 的按钮点击节流
2019-09-20 22:25 by muamaker, 5490 阅读, 收藏, 编辑
摘要：
vue的按钮点击节流 场景： 1、在实际使用中，当我们填写表单，点击按钮提交的时候，当接口没返回之前，迅速的点击几次，就会造成多次提交。 2、获取验证码，不频繁的获取。 3、弹幕不能频繁的发 基于这几个场景，对 element-ui 的按钮进行扩展 节流 主要使用到了 vue的 $listeners 阅读全文
slot 组件的内部传值 v-slot 的使用
2019-09-11 17:45 by muamaker, 12394 阅读, 收藏, 编辑
摘要：
嵌套组件传值 person.vue 给 slot 组件绑定了一些属性，item, index 则在使用的时候，可以获取到 或者解构 或者完全赋值 阅读全文
vue 写一个瀑布流插件
2019-08-13 14:09 by muamaker, 1719 阅读, 收藏, 编辑
摘要：
效果如图所示： 采用了预先加载图片，再计算高度的办法。。网络差的情况下，可能有点卡 新建 vue-water-easy.vue 组件文件 使用： imgsArr：为图片数据的数组，内部包含对象 [ { src:"xxxx" } ] srckey : 为图片路径的属性，默认为 src maxCols: 阅读全文
vue 写一个炫酷的轮播图
2019-07-13 11:22 by muamaker, 3834 阅读, 收藏, 编辑
摘要：
效果如上图： 原理： 1、利用css 的 transform 和一些其他的属性，先选五张将图片位置拍列好，剩余的隐藏 2、利用 js 动态切换类名，达到切换效果 css代码如下 vue 组件代码 使用方式： 直接引入： 阅读全文
vue 的 solt 子组件过滤
2019-06-13 10:55 by muamaker, 661 阅读, 收藏, 编辑
摘要：
如上图： 1、定义了一个类似下拉的组件 mySelect ， 然后里面有自定义的组件 myOptions 2、有很多时候，我们希望， mySelect 组件内部的子组件，只能是 myOptions 。 不应该有 <div>666</div> 3、在mySelect 里面做一层过滤，去掉不需要的组件 阅读全文
如何优雅的写一个Vue 的弹框
2019-04-04 16:12 by muamaker, 9879 阅读, 收藏, 编辑
摘要：
写Vue或者是react 都会遇见弹框的问题。也尝试了多种办法来写弹框，一直都不太满意，今天特地看了一下 Element UI 的源码，模仿着写了一个简易版。 大概有一下几个问题： 1、弹框的层级问题，如果在嵌套的组件里面使用了弹框，可能会出现弹框的层级不够高 2、弹框的函数调用方式 首先第一点：弹 阅读全文
vue 的进度条组件
2019-01-28 10:10 by muamaker, 8824 阅读, 收藏, 编辑
摘要：
先看效果： 要想实现如上图的，进度跳效果，有两种方式，首先介绍第一种： 1、自己用 div 写一个，代码如下 使用： 2、可以使用 input 的新属性 type=range ， 然后通过css修改样式 css: 使用： 小结： 因为 input 的 range属性，兼容不是很好，所以，最好还是自己 阅读全文
vue弹窗组件
2018-09-03 13:49 by muamaker, 2751 阅读, 收藏, 编辑
摘要：
文件结构 component.vue bus.js index.js 使用： 一、引入 import vuedals from './components/vuedals' Vue.use(vuedals); 二、调用 其中box.vue为 效果： 阅读全文
vue 使用高德地图vue-amap组件
2018-08-27 17:23 by muamaker, 26812 阅读, 收藏, 编辑
摘要：
首先 npm install -S vue-amap map.vue文件 其中有个BUS.js，是基于观察者模式的发布订阅封装 bus.js 效果图 相关文档地址： https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install 阅读全文
vue使用md5加密
2018-05-24 15:06 by muamaker, 3634 阅读, 收藏, 编辑
摘要：
import crypto from 'crypto' export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } }, mounted(){ this.getmd5("aaa"); }, methods:{ ... 阅读全文
vue的图片路径，和背景图片路径打包后错误解决
2017-12-11 16:00 by muamaker, 16778 阅读, 收藏, 编辑
摘要：
最近在研究vue，老实的按照官网提供的，搭建的了 webpack+vue+vuex+vue-router，，因为是自己搭建的，所以踩了不少坑，一般问题百度都有，这个背景图片的问题，查了很久才解决。 1、找到 config->index.js里面，如下修改 2、找到 build->utils.js,在 阅读全文
