Subscribe
We'll send you AWESOME content!
Demo
Here we are going to help you with the code for "Changing Background Colors using Shortcuts in Vue js"
We did this project by Vue CLI, so we recommend you to do this by using Vue CLI.
Index.js
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
App.vue
<template >
<div class="container" v-bind:style="{ background:color, color:fcolor }">
<center> <table>
<tr>
<th>Key Event</th>
<th>Color</th>
</tr>
<tr> <td @click="changebr()">press Ctrl+c to get</td><td>red colour</td></tr>
<tr><td @click="changebr1()">press Ctrl+v to get</td><td> green colour</td></tr>
<tr> <td @click="changebr2()">press alt+c to get</td><td> pink colour</td></tr>
<tr> <td @click="changebr3()">press alt+v to get</td><td> blue colour</td></tr>
<tr> <td @click="changebr4()">press ctrl+a to get</td><td> orange colour</td></tr>
<tr> <td @click="changebr5()">press ctrl+b to get</td><td>yellow colour</td></tr>
</table></center>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
color:'white',
fcolor:'black'
}
},
methods:{
changebr(){
this.color="red"
this.fcolor="gold"
},
changebr1(){
this.color="green"
this.fcolor="red"
},
changebr2(){
this.color="pink"
this.fcolor="blue"
},
changebr3(){
this.color="blue"
this.fcolor="orange"
},
changebr4(){
this.color="orange"
this.fcolor="pink"
},
changebr5(){
this.color="yellow"
this.fcolor="black"
}
},
mounted() {
this._keyListener = function(e) {
if (e.key === "c" && (e.ctrlKey || e.metaKey)) {
e.preventDefault(); // present "Save Page" from getting triggered.
this.changebr();
}
};
document.addEventListener('keydown', this._keyListener.bind(this));
this._keyListener = function(j) {
if (j.key === "v" && (j.ctrlKey || j.metaKey)) {
j.preventDefault(); // present "Save Page" from getting triggered.
this.changebr1();
}
};
document.addEventListener('keydown', this._keyListener.bind(this));
this._keyListener = function(i) {
if (i.key === "c" && (i.altKey || i.metaKey)) {
i.preventDefault(); // present "Save Page" from getting triggered.
this.changebr2();
}
};
document.addEventListener('keydown', this._keyListener.bind(this));
this._keyListener = function(h) {
if (h.key === "v" && (h.altKey || h.metaKey)) {
h.preventDefault(); // present "Save Page" from getting triggered.
this.changebr3();
}
};
document.addEventListener('keydown', this._keyListener.bind(this));
this._keyListener = function(g) {
if (g.key === "b" && (g.ctrlKey || g.metaKey)) {
g.preventDefault(); // present "Save Page" from getting triggered.
this.changebr4();
}
};
document.addEventListener('keydown', this._keyListener.bind(this));
this._keyListener = function(f) {
if (f.key === "a" && (f.ctrlKey || f.metaKey)) {
f.preventDefault(); // present "Save Page" from getting triggered.
this.changebr5();
}
};
document.addEventListener('keydown', this._keyListener.bind(this));
}
}
</script>
<style>
body{
height:100%;
margin:0;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color:black;
margin-top:0;
}
.container{
height:822px;
width:100%;
align-items: center;
margin-top:-100px;
overflow-y: hidden;
}
table{
align-items: center;
text-align: center;
margin-top:300px;
margin-left:50px;
}
table,th,tr,td{
border: 2px solid;
align-items:center;
}
</style>
Main js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
No comments: