|
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); } } } |
首先新建一个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> |
1.vue-easytable (基于vue2.x )
https://github.com/huangshuwei/vue-easytable
http://doc.huangsw.com/vue-easytable/app.html#/table
[crayon-673ee1a966a[……]
一、echarts3.0(官网: http://echarts.baidu.com/)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
首先通过npm安装echarts依赖，安装的为3.0版本 npm install echarts -s 也可以使用淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install echarts -s 引入的方式有两种： 1、main.js中全局引入 import echarts from 'echarts' Vue.prototype.$echarts = echarts 然后在组件中通过 this.$echarts.init(document.getElementById('your_div')) 来初始化 2、只应用基本包，加快加载速度 在需要使用echarts的组建中引入： let echarts = require('echarts/lib/echarts') 然后通过 echarts.init(document.getElementById('your_div')) 来初始化 使用的话就比较简单，直接将官方实例封装一个为方法，在mounted中调用即可。 |
二、 echarts2.0(官网: http://echarts.baidu.com/echarts2/)
[crayon-673ee1a9[……]
如果你的项目中console.log了很多信息，但是发到生产环境上又不想打印这些信息，这时候就需要设置一个全局变量，如：debug，
用正则匹配一下参数：
|
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 |
const getQueryStr = (name) => { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; }; 当链接中含有这个参数时，将debug的状态置为true，这时console.log是正常可打印状态，否则将debug的状态置为false， 这时重写console.log函数： console.log = function () { return false; } 这时的全局变量就可以用在整个项目中了，用来控制一些调试窗口的显隐。 在Vue中可以直写在stores/index.js中,当然，写在其他入口文件里也可以： const getQueryStr = (name) => { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; }; /* 若链接后面带上参数 envFlag=monitor * 则将 debug 置为true，否则置为false */ const monitor = 'monitor'; const envFlag = getQueryStr('envFlag'); let debug = monitor ? true : false; if (envFlag === 'monitor') { console.log("%cNow You Can Console Log...", "color:red;font-size:18px;font-style:oblique;"); debug = monitor; } else { debug = ''; console.log = function () { return false; } } const state = {debug: debug}; export const store = new vuex.Store({state, mutations}); 这时候如果你想控制一个组件的显示或隐藏，只需要在vuex的getters中声明一下就可以使用变量debug了： <monitor v-show="debug"></monitor> vuex: { getters: { <span style="color: #ff0000;">debug: state => state.debug</span> } } 做完以上的工作后，在URL后面带上参数 <strong>envFlag=monitor </strong>就可以看到组件 monitor 被显示出来，同时打开控制台的话， 就可以看到项目所有的 console.log 信息。 |
|
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 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 |
DEMO: <!DOCTYPE html> <html> <head> <title>滚动播报</title> <meta charset="UTF-8"> <style> .content { height: 60px; background-color: #2c2c34; overflow: hidden; } .content ul { white-space: nowrap; } .content ul li { position: relative; font-size: 14px; vertical-align: middle; line-height: 35px; padding: 0 8px; white-space: nowrap; display: inline-block; color: #fff } #scrollBox { overflow: hidden; } #scrollBox .scrollWrap { width: 500% } .scrollCont { float: left; } </style> </head> <body> <div class="content"> <ul> <div id="scrollBox"> <div class="scrollWrap"> <div id="scrollContOne" class="scrollCont"> <li>我是第一条数据</li> <li>我是第二条数据</li> <li>我是第三条数据</li> <li>我是第四条数据</li> <li>我是第五条数据</li> <li>我是第六条数据</li> <li>我是第七条数据</li> <li>我是第八条数据</li> </div> <div id="scrollContTwo" class="scrollCont"></div> </div> </div> </ul> </div> <script> let speed = 40 let scrollBox = document.getElementById("scrollBox"); let scrollContOne = document.getElementById("scrollContOne"); let scrollContTwo = document.getElementById("scrollContTwo"); scrollContTwo.innerHTML = scrollContOne.innerHTML; scrollBox.scrollLeft = 0; function scrollRadio() { if (scrollBox.scrollLeft >= scrollContTwo.offsetWidth) { scrollBox.scrollLeft -= scrollContOne.offsetWidth } else { scrollBox.scrollLeft += 2; } } let MyScrollRadio = setInterval(scrollRadio, speed); scrollBox.onmouseover = function() { clearInterval(MyScrollRadio) }; scrollBox.onmouseout = function() { MyScrollRadio = setInterval(scrollRadio, speed) }; </script> </body> </html> 在Vue中使用： <template> <div class="content"> <ul> <div id="scrollBox"> <div class="scrollWrap"> <div id="scrollContOne" class="scrollCont"> <li v-for="item in items"> <a href="{{item}" target="_blank"></a> </li> </div> <div id="scrollContTwo" class="scrollCont"></div> </div> </div> </ul> </div> </template> <style scoped> .content { height: 60px; background-color: #2c2c34; overflow: hidden; } .content ul { white-space: nowrap; } .content ul li { position: relative; font-size: 14px; vertical-align: middle; line-height: 35px; padding: 0 8px; white-space: nowrap; display: inline-block; } .content ul li a { text-decoration: none; color:#fff; } #scrollBox { overflow: hidden; margin-left: 36px; } #scrollBox .scrollWrap { width: 500% } .scrollCont { float: left; } </style> <script> export default { data: () => ({ canScrollTimer: 0 }), vuex: { getters: { scrollLists: state => state.scrollLists } }, watch:{ scrollLists:{ deep:true, handler(v,ov){ if(v.length){ this.run(); } } } }, methods: { run() { let speed = 40; let scrollBox = document.getElementById("scrollBox"); let scrollContOne = document.getElementById("scrollContOne"); let scrollContTwo = document.getElementById("scrollContTwo"); scrollContTwo.innerHTML = scrollContOne.innerHTML; scrollBox.scrollLeft = 0; function scrollRadio() { if (scrollBox.scrollLeft >= scrollContTwo.offsetWidth) { scrollBox.scrollLeft -= scrollContOne.offsetWidth } else { scrollBox.scrollLeft += 2; } } let MyScrollRadio = setInterval(scrollRadio, speed); scrollBox.onmouseover = function() { clearInterval(MyScrollRadio) }; scrollBox.onmouseout = function() { MyScrollRadio = setInterval(scrollRadio, speed) }; } }, ready() { //接口调用 } } </script> |
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误，这时候可以在 mounted 里用 $refs 来获取样式，并进行更改：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<template> <div style="display: block;" ref="abc"> <!-- ... --> </div> </template> <script> export default { mounted () { console.log(this.$refs.abc.style.cssText) } } </script> <strong><span style="color: #ff0000;">结果是 display: block;</span></strong> |
[[……]
|
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 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 |
如果一个页面有个浮动的二维码，当页面窗口缩小时二维码会遮盖住页面内容，这时候可以根据浏览器大小来决定显示方式： 1.当页面宽度足够大时，完全显示二维码 2.当页面窗口缩小时，这时候需要显示一个按钮，点击按钮才显示二维码 这时候需要添加onresize来监听窗口变化，以此来刷新页面： window.onresize = function() { //监听窗口变化 window.location.reload(); //兼容chrome safari window.location.href = ""; //兼容火狐 } 至于上面二维码的显示方式，在 vue 里使用 v-show 实现非常方便： HTML: <!-- 按钮 --> <div class="qr-btn" v-show="qrBtn" @click="showQr"><img src="../assets/images/tangulunyin.jpg" alt="谈股论银"></div> <!-- 二维码 --> <div class="qr-code" v-show="qrCode"> <ul> <li><img src="../assets/images/yinruyi.png" alt="银如意" title="银如意"><span>扫描下载银如意app</span></li> <li><img src="../assets/images/tangulunyin.jpg" alt="谈股论银"><span>扫描关注谈股论银公众号</span></li> </ul> </div> CSS: .qr-btn { width: 30px; height: 30px; background-color: #064491; display: block; position: absolute; left: 20px; bottom: 50px; border-radius: 50%; box-shadow: 2px 2px 8px rgba(0, 0, 0, .6); cursor: pointer } .qr-btn>img { width: 20px; height: 20px; position: relative; top: 5px; display: block; padding: 0 auto; margin: 0 auto; } .qr-code { position: fixed; bottom: 10%; left: 1%; background-color: aliceblue; font-size: 12px; text-align: center; } .qr-code>ul>li { padding: .8em; } .qr-code>ul>li:last-child { margin: 0 0 1em 0; } .qr-code>ul>li>img { width: 130px; height: 130px; display: block; } VUE: export default { data:()=>({ qrCode: false, qrBtn: false }) }, methods:{ showQr() { if (this.qrCode == false) { this.qrCode = true; } else { this.qrCode = false; } } }, ready(){ let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; if (w < 1330) { //根据屏幕宽度决定是显示二维码还是按钮 this.qrCode = false; this.qrBtn = true; } else { this.qrCode = true; this.qrBtn = false; } window.onresize = function() { //监听窗口变化 window.location.reload(); //兼容chrome safari window.location.href = ""; //兼容火狐 } } ------------------------------------------------------------------- 以上的方法比较耗性能，而且不安全，另一个方法： VUE: export default { data:()=>({ qrCode: false, qrBtn: false }) }, methods:{ showQr() { if (this.qrCode == false) { this.qrCode = true; } else { this.qrCode = false; } }, listen() { let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; if (w < 1330) { //根据屏幕宽度决定是显示二维码还是按钮 this.qrCode = false; this.qrBtn = true; } else { this.qrCode = true; this.qrBtn = false; } } }, ready(){ this.listen(); window.onresize = () => { //监听窗口变化 this.listen(); } } } |