示例项目地址: https://github.com/skillnull/lottie-web-caption-animation
首先是安装AE，具体怎么安装就不赘述了，随便一搜就有很多教程。
安装完AE以后，装一个AE的插件bodymovin, githu[……]
分类：前端
一个优质的Vue组件库应该遵循什么样的设计原则
Vue项目SEO优化的另一种姿态
简述this,call,apply,bind之间的关系
前端下载远程文件
Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().
前端内存泄漏检查判断及处理
在vue中使用import()来代替require.ensure()实现代码打包分离
H5背景音乐自动播放(兼容微信IOS，进程后台切换自动停止播放，本文例子为Vue写法)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<template> <audio src="./static/music.mp3" id="bgMusic" preload="auto" loop></audio> <div class="bgMusicBtn" @click="bgMusicPlayOrPause('bgMusic')"> <img :src="playFlag ? playImg : pauseImg" :class="{rotate: playFlag}"> </div> </template> export default { data() { return { playFlag: true, playImg: require('../../static/play.png'), pauseImg: require('../../static/pause.png'), clickMusicBtn: false } }, mounted() { this.audioAutoPlay('bgMusic'); document.addEventListener("visibilitychange", (e) => { // 兼容ios微信手Q if (this.clickMusicBtn) { // 点击了关闭音乐按钮 if (this.playFlag) { this.audioAutoPlay('bgMusic'); this.playFlag = true; } else { this.audioPause('bgMusic'); this.playFlag = false; } text.innerHTML = e.hidden; if (e.hidden) { // 网页被挂起 this.audioAutoPlay('bgMusic'); this.playFlag = true; } else { // 网页被呼起 this.audioPause('bgMusic'); this.playFlag = false; } } else { // 未点击关闭音乐按钮 if (this.playFlag) { this.audioPause('bgMusic'); this.playFlag = false; } else { this.audioAutoPlay('bgMusic'); this.playFlag = true; } text.innerHTML = e.hidden; if (e.hidden) { // 网页被挂起 this.audioPause('bgMusic'); this.playFlag = false; } else { // 网页被呼起 this.audioAutoPlay('bgMusic'); this.playFlag = true; } } }); }, methods: { bgMusicPlayOrPause(id) { this.clickMusicBtn = !this.clickMusicBtn; if (this.playFlag) { this.audioPause(id); this.playFlag = false; } else { this.audioAutoPlay(id); this.playFlag = true; } }, audioPause(id) { var audio = document.getElementById(id); audio.pause(); document.addEventListener("WeixinJSBridgeReady", function () { audio.pause(); }, false); document.addEventListener('YixinJSBridgeReady', function () { audio.pause(); }, false); }, audioAutoPlay(id) { var audio = document.getElementById(id); audio.play(); document.addEventListener("WeixinJSBridgeReady", function () { audio.play(); }, false); document.addEventListener('YixinJSBridgeReady', function () { audio.play(); }, false); } } } |
Vue自定义指令实现点击div以外部分隐藏div
首先新建一个directives.js文件，自定义一个指令：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
export const clickOutSide = { // 初始化指令 bind(el, binding, vnode) { function documentHandler(e) { // 这里判断点击的元素是否是本身，是本身，则返回 if (el.contains(e.target)) { return false; } // 判断指令中是否绑定了函数 if (binding.expression) { // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法 binding.value(e); } } // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听 el.__vueClickOutside__ = documentHandler; document.addEventListener('click', documentHandler); }, update() {}, unbind(el, binding) { // 解除事件监听 document.removeEventListener('click', el.__vueClickOutside__); delete el.__vueClickOutside__; }, }; |
然后在组件内：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<template> <div class="" v-if="closeFlag" v-clickOutSide="handlerClick"> 确认过眼神，不是我的八哥 </div> </template> <script> import {clickOutSide} from './directives' export default { data() { return { closeFlag: true } }, directives: { clickOutSide } </script> |