参考文章: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,},
}
官网的比较老了,现在修改的是fig.js
ports = {presets: ["@vue/cli-plugin-babel/preset",["@babel/preset-env", { modules: false }],],plugins: [["component",{libraryName: "element-ui",styleLibraryName: "theme-chalk",},],],
};
<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>
; (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}
)
// 添加音频
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由父组件传入
html
<audioref="zongziAudio"src="static/audio/zongzi.mp3"@click="zingziPlay()"
></audio>
js
// 哪里触发自己决定
zingziPlay() {this.$iAudio.load(); // 防止一个声音接着播放this.$iAudio.play();
},
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确实使用起来很简单,但是最好搞一个统一的断线重连以及连接流程,不然真的不太好规范!
这里菜鸟把公司一个同事的封装的献上:
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); // 如果关闭之前会发送消息,那么建议关闭时延时,可以更加有效!
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
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样式而已!
graphic: {elements: [{type: 'image',style: {image: giftImageUrl,width: 100,height: 100},left: 'center',top: 'center'}]
},
参考:
配置graphic:.html#graphic.elements
参考饼图引导线调整:
.html?c=pie-labelLine-adjust
打印效果:
参考edgeDistance – 防止太小显示字数过少:
.html#series-pie.label.edgeDistance
this.$nextTick(()=>{Swiper.update();
})
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 条评论) |