Vue
HTML
<div id="app">
</div>
CSS
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}
Vue
new Vue({
el: "#app",
methods: {
toggle: function(todo){
todo.done = !todo.done
},
getWindowWidth(){
var winWidth = window.innerWidth;
var newWinWidth = window.innerWidth;
console.log("initial width " + winWidth);
var doIt;
},
handleResize() {
const _this = this
//_this.mounted();
clearTimeout(_this.getWindowWidth.doIt);
_this.getWindowWidth.doIt = setTimeout(function() {
_this.getWindowWidth.winWidth = _this.getWindowWidth.newWinWidth;
_this.getWindowWidth.newWinWidth = window.innerWidth;
console.log("new " + _this.getWindowWidth.newWinWidth);
console.log("old " + _this.getWindowWidth.winWidth);
//console.log("old "+ _this.winWidth);
if(_this.getWindowWidth.newWinWidth > 1025 && _this.getWindowWidth.winWidth < 1025){
console.log("refresh now");
//window.location.reload();
}
if(_this.getWindowWidth.newWinWidth < 1025 && _this.getWindowWidth.winWidth > 1025){
console.log("refresh again");
//window.location.reload();
}
}, 1000);
}
},
mounted: function() {
const _this = this
window.addEventListener('resize', _this.handleResize);
}
})