import { reactive, toRefs, computed, watch, onMounted } from 'vue';
import { useStore } from 'vuex';
interface DataType {
screenWidth: string;
changeWidth: () => void;
timer: boolean;
changeResultSheBei: () => void;
sheBeiResult: any;
}
const UseSheBei = () => {
const Store = useStore();
const data: DataType = reactive({
screenWidth: '',
timer: false, //防止过载
sheBeiResult: computed(() => {
return Store.state.SheBei.SheBei;
}),
changeWidth: () => {
data.screenWidth = document.body.scrollWidth.toString(); //赋值宽度
window.addEventListener('resize', () => {
data.screenWidth = document.body.scrollWidth.toString(); //赋值宽度
});
},
changeResultSheBei() {
if (parseInt(data.screenWidth) <= 699) {
//1 就是移动
Store.commit('changeSheBei', 1);
// 1就是PC端数据,2 就是移动端数据
Store.commit('changeDataSheBei', 1);
//Store.commit('changeLoadingFlag', true)
// const picall = 1200; //都参照1200的图标记
// const magicscale = picall / ((Number(data.screenWidth) - 380) * 0.8);
// Store.commit('changemagicscale', magicscale);
}
if (parseInt(data.screenWidth) >= 700) {
Store.commit('changeSheBei', 3); //3 就是PC
Store.commit('changeDataSheBei', 1);
//Store.commit('changeLoadingFlag', true)
// const picall = 1200; //都参照1200的图标记
// const magicscale = picall / ((Number(data.screenWidth) - 380) * 0.8);
// Store.commit('changemagicscale', magicscale);
}
},
});
watch(
() => {
return data.screenWidth;
},
(newval) => {
if (!data.timer) {
//一旦监听到screenWidth改变,重新赋值
data.screenWidth = newval;
console.log('屏幕的宽度');
console.log(newval);
console.log('屏幕的宽度结束');
data.changeResultSheBei();
}
}
);
onMounted(() => {
data.changeWidth();
});
return {
...toRefs(data),
};
};
export default UseSheBei;
动态设置宽度vue
最新推荐文章于 2024-04-29 03:03:37 发布