常用代码:vue监听路由变化、vue动态绑定背景、自适应js、禁止放大、播放声音、store的使用、websocket封装、echarts、swiper等

阅读: 评论:0

常用代码:vue监听路由变化、vue动态绑定背景、自适应js、禁止放大、播放声音、store的使用、websocket封装、echarts、swiper等

常用代码:vue监听路由变化、vue动态绑定背景、自适应js、禁止放大、播放声音、store的使用、websocket封装、echarts、swiper等

文章目录

  • vue监听路由变化
  • elementui 按需引入
  • vue动态绑定背景、transform(其他类比)
  • 自适应js
  • 禁止放大
  • 播放声音
    • 1、少量动态添加声音
    • 2、固定声音
  • store的使用
  • websocket封装
  • echarts
    • 1、echarts实现渐变
    • 2、echarts适配
    • 3、echarts中间是图片或者文字(不要用定位,low)
    • 4、设置labelline的位置
  • swiper
    • 1、swiper数据变化后,重新渲染
    • 2、防止swiper变化而导致宽度不对

vue监听路由变化


参考文章:vue.js怎么监听路由变化

const port = 8888;
const path = require("path");
const resolve = (dir) => path.join(__dirname, dir);ports = {v.NODE_ENV === "production"? "./" // 生产环境: "/", // 开发环境outputDir: "coffee",assetsDir: "static", // 设置放置打包生成的静态资源productionSourceMap: false, // 是否有Map文件devServer: {port,},
}

elementui 按需引入

官网的比较老了,现在修改的是fig.js

ports = {presets: ["@vue/cli-plugin-babel/preset",["@babel/preset-env", { modules: false }],],plugins: [["component",{libraryName: "element-ui",styleLibraryName: "theme-chalk",},],],
};

vue动态绑定背景、transform(其他类比)

<div class="cover1" :style="{transform:`rotate(${rotate1}deg)`}" v-if="rotate1 <= 90"></div>
<div class="cover2" :class="rotate1 <= 90 ? 'cover2i' : ''" :style="{transform:`rotate(${rotate1}deg)`}" v-if="rotate1 <= 180"></div>
<div class="cover3" :class="rotate1 <= 180 ? 'cover3i': ''" :style="{transform:`rotate(${rotate1}deg)`}" v-if="rotate1 <= 270"></div>
<div class="bgimg" :style="{backgroundImage:'url('+msg.url+')'}"></div>

自适应js

; (function (win) {var bodyStyle = ateElement('style')bodyStyle.innerHTML = `body{width:1920px; height:1200px; overflow:hidden}`  // 需要适配的屏幕的宽高document.documentElement.firstElementChild.appendChild(bodyStyle)function refreshScale() {let docWidth = document.documentElement.clientWidthlet docHeight = document.documentElement.clientHeightvar designWidth = 1920 // 需要适配的屏幕的宽var designHeight = 1200  // 需要适配的屏幕的高var widthRatio = 0widthRatio = docWidth / designWidthvar heightRatio = 0heightRatio = docHeight / designHeightdocument.body.style ='transform:scale(' +widthRatio +',' +heightRatio +');transform-origin:left top;'// 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况setTimeout(function () {var lateWidth = document.documentElement.clientWidth,lateHeight = document.documentElement.clientHeightif (lateWidth === docWidth) returnwidthRatio = lateWidth / designWidthheightRatio = lateHeight / designHeightdocument.body.style ='transform:scale(' +widthRatio +',' +heightRatio +');transform-origin:left top;'}, 0)}refreshScale()window.addEventListener('pageshow',function (e) {if (e.persisted) {// 浏览器后退的时候重新计算refreshScale()}},false)window.addEventListener('resize', refreshScale, false)
})(window);

这个自适应是最简单的自适应,主要用来对一些等比例的屏幕或者长宽比相近的屏幕的适配,主要还是针对类似电脑屏幕的适配!

注意:
1、如果项目有3d相关的操作,那么这个可能会适得其反,让本来百分比就可以适配的变得不适配!参考:swiper 3d 结合 loop 向左移动缺少一个内容

2、手机端、pad端还是建议使用px2rem,参考我的:使用px2rem不生效

3、一定要给body加overflow,因为只是缩小了,但是其实原来的内容大小没变!

禁止放大

// 禁用双指放大
document.documentElement.addEventListener('touchstart',function (event) {if (uches.length > 1) {event.preventDefault()}},{passive: false,}
);// 禁用双击放大
var lastTouchEnd = 0
document.documentElement.addEventListener('touchend',function (event) {var now = w()if (now - lastTouchEnd <= 300) {event.preventDefault()}lastTouchEnd = now},{passive: false}
)

播放声音

1、少量动态添加声音

// 添加音频
const audiodom = ateElement("audio");
audiodom.setAttribute("id", "callmusic");
audiodom.setAttribute("loop", "loop");
audiodom.setAttribute("src", "static/audio/game_start.mp3");
document.body.appendChild(audiodom);
const callmusic = ElementById("callmusic");
callmusic.play();// 移除音频
const callmusic = ElementById("callmusic");
veChild(callmusic);

注意:
1、如果一个界面有好几个音频,一定要取不同的名字!
2、如果是组件里面有音频,而组件会复用,那么一定要动态绑定id!
eg:

audiodom.setAttribute("id", "callmusic"+this.id)  // id由父组件传入

2、固定声音

html

<audioref="zongziAudio"src="static/audio/zongzi.mp3"@click="zingziPlay()"
></audio>

js

// 哪里触发自己决定
zingziPlay() {this.$iAudio.load(); // 防止一个声音接着播放this.$iAudio.play();
},

store的使用

store在项目中真的很容易使用到,但是每个界面都用什么this.$的真的很麻烦,所以一定要记得这几个方法:

import {mapState, mapMutations, mapGetters, mapActions} from "vuex";

每一个的使用:

computed: {...mapState(["airList"]),// v-model的时候,计算属性要加setonoff:{get(){return this.actData.switchAction == 'true' || this.actData.switchAction == true;},set(v) {console.log(v);}},
},

methods: {...mapMutations(["SET_AIRLIST","SET_AIRLIST_INDEX",]),
}


这种放action里面的感觉菜鸟很少用到,因为都是请求完之后then的时候,用了 mapMutations 解决了!

websocket封装

websocket确实使用起来很简单,但是最好搞一个统一的断线重连以及连接流程,不然真的不太好规范!

这里菜鸟把公司一个同事的封装的献上:

data:

// 连接地址
websocketUrlPlay: ws://xxxxxx,
// 断线重连
lockReconnect: false,
// 重连定时器
reconnetTimer: null

method:

// 重连
reconnect() {if (this.lockReconnect) {return;}this.lockReconnect = true;// 没连接上会一直重连,设置延迟避免请求过多etTimer && etTimer);etTimer = setTimeout(() => {ateWebsocketPlay();this.lockReconnect = false;}, 4000);
},// 创建websocket
createWebsocketPlay() {// eslint-disable-next-linethis.socket = new WebSocket(this.websocketUrlPlay);pen = () => {// onopen 连接触发console.log("websocket pad open");};lose = () => {// onclose 断开触发console.log("websocket close");ect();};r = () => {console.log("发生异常了");ect();};ssage = (event) => {// console.log(JSON.parse(event.data));const data = JSON.parse(event.data);}
}

注意:

1、这个 lockReconnect 类似于java中的 锁,所以 断开连接的时候一定要置为true

this.lockReconnect = true;
etTimer);
etTimer = null;setTimeout(()=>{this.socket.close();
},100);  // 如果关闭之前会发送消息,那么建议关闭时延时,可以更加有效!

echarts

1、echarts实现渐变

itemStyle: {color: aphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#17e5a2" },{ offset: 1, color: "#23e8ca" },]),
},

或者官网的代码:

labelLine: {normal: {show: true,length: 30,length2: 30,lineStyle: {color:{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: 'red' // 0% 处的颜色}, {offset: 0.5, color: 'red' // 100% 处的颜色}, {offset: 1, color: 'rgba(255,0,0,0)' // 100% 处的颜色},],global: false // 缺省为 false},width: 2,}}
},

参考:
配置color:.html#color

2、echarts适配

window.addEventListener("resize", function () {if (ElementById("echart_box2")) {_this.ElementById("echart_box2"), ElementById("echart2"), 3); // 第三个参数是自由发挥用的_size();}
});//为图表计算高度
chartssize(container, charts, type) {function getStyle(el, name) {if (ComputedStyle) {ComputedStyle(el, null);} else {return el.currentStyle;}}let wi = getStyle(container, "width").width;let hi = getStyle(container, "height").height;charts.style.width = wi;charts.style.height = hi;
},

MDN:
ComputedStyle
currentStyle
我的博客:
ComputedStyle

其实就是获取父元素最终样式,然后设置echarts样式而已!

3、echarts中间是图片或者文字(不要用定位,low)

graphic: {elements: [{type: 'image',style: {image: giftImageUrl,width: 100,height: 100},left: 'center',top: 'center'}]
},

参考:
配置graphic:.html#graphic.elements

4、设置labelline的位置

参考饼图引导线调整:
.html?c=pie-labelLine-adjust

打印效果:

参考edgeDistance – 防止太小显示字数过少:
.html#series-pie.label.edgeDistance

swiper

1、swiper数据变化后,重新渲染

this.$nextTick(()=>{Swiper.update();
})

2、防止swiper变化而导致宽度不对

initSwiper() {const _this = this;setTimeout( () => {_Swiper = new Swiper(".swiper", {width: window.innerWidth, // 全屏,不是全屏可以获取父元素宽度observer: true,//修改swiper自己或子元素时,自动初始化swiperobserveParents: true,//修改swiper的父元素时,自动初始化swiperautoplay: {disableOnInteraction: false,delay: 5 * 1000,//5秒切换一次},on: {observerUpdate: function(){console.log("检测到更新!");this.updateSize();}, slideChange: function () {this.updateSize();},resize: function(){this.params.width = window.innerWidth;this.update();},},});}, 100);
},

注意:
最重要的就是这两个属性

observer: true,//修改swiper自己或子元素时,自动初始化swiper
observeParents: true,//修改swiper的父元素时,自动初始化swiper

后面on里面的方法其实不重要,只是菜鸟一开始两个属性写错位置了,写到autoplay里面去了!!!

如果前面设置无效,可以尝试加上后面的方法!!!

本文发布于:2024-01-29 09:36:52,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/170649221714361.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:路由   绑定   自适应   声音   背景
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23