lint: format
This commit is contained in:
parent
2b4ab9c6ea
commit
977a598e42
|
@ -1,35 +1,33 @@
|
|||
<template>
|
||||
<div>
|
||||
<button @click="add"> add {{addIncrement}} </button>
|
||||
<button @click="stepup"> add to the adding </button>
|
||||
<div> big value = {{ bigvalue }} </div>
|
||||
<button @click="add">add {{ addIncrement }}</button>
|
||||
<button @click="stepup">add to the adding</button>
|
||||
<div>big value = {{ bigvalue }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
// import Decimal from "break_infinity.js";
|
||||
|
||||
export default {
|
||||
name: 'InfinityTester',
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
addIncrement: 0,
|
||||
bigvalue: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log("!")
|
||||
this.bigvalue = 0;
|
||||
},
|
||||
add() {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('!')
|
||||
this.bigvalue = 0
|
||||
},
|
||||
|
||||
stepup () {
|
||||
this.addIncrement += 100;
|
||||
|
||||
}
|
||||
}
|
||||
stepup() {
|
||||
this.addIncrement += 100
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
@ -1,10 +1,12 @@
|
|||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<button @click="button_clicky()"> Click Me </button>
|
||||
<div> clicks = {{ clicks }} </div>
|
||||
<button @click="button_clicky()">Click Me</button>
|
||||
<div>clicks = {{ clicks }}</div>
|
||||
<ul>
|
||||
<li v-for="value in testvalues.slice(0, clicks)" :key="value">{{value}}</li>
|
||||
<li v-for="value in testvalues.slice(0, clicks)" :key="value">
|
||||
{{ value }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -12,7 +14,7 @@
|
|||
<script>
|
||||
export default {
|
||||
name: 'JohnHacks',
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
msg: 'John copies files and makes a mess',
|
||||
testvalues: [1, 1, 2, 3, 5, 8, 13, 21],
|
||||
|
@ -20,12 +22,12 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
button_clicky () {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log("!")
|
||||
this.clicks += 1
|
||||
}
|
||||
}
|
||||
button_clicky() {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('!')
|
||||
this.clicks += 1
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
@ -1,59 +1,75 @@
|
|||
<template>
|
||||
<div class="bg-white grid place-content-center border-2 w-3/4 mx-auto">
|
||||
<div class="bg-white grid place-content-center border-2 w-3/4 mx-auto">
|
||||
<nav class="flex flex-col sm:flex-row">
|
||||
<button id="tab1" class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none text-blue-500 border-b-2 font-medium border-blue-500" @click="tabclicked(1)">
|
||||
Tab 1
|
||||
</button><button id="tab2" class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none" @click="tabclicked(2)">
|
||||
Tab 2
|
||||
</button><button id="tab3" class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none" @click="tabclicked(3)">
|
||||
Tab 3
|
||||
</button><button id="tab4" class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none" @click="tabclicked(4)">
|
||||
Tab 4
|
||||
</button>
|
||||
<button
|
||||
id="tab1"
|
||||
class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none text-blue-500 border-b-2 font-medium border-blue-500"
|
||||
@click="tabclicked(1)"
|
||||
>
|
||||
Tab 1</button
|
||||
><button
|
||||
id="tab2"
|
||||
class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none"
|
||||
@click="tabclicked(2)"
|
||||
>
|
||||
Tab 2</button
|
||||
><button
|
||||
id="tab3"
|
||||
class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none"
|
||||
@click="tabclicked(3)"
|
||||
>
|
||||
Tab 3</button
|
||||
><button
|
||||
id="tab4"
|
||||
class="text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none"
|
||||
@click="tabclicked(4)"
|
||||
>
|
||||
Tab 4
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<JohnHacks id="tabcontents1" class="tabshown" />
|
||||
<InfinityTester id="tabcontents2" class="tabhidden" />
|
||||
<JohnHacks id="tabcontents3" class="tabhidden" />
|
||||
<JohnHacks id="tabcontents4" class="tabhidden" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TabNav',
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
tabclicked (tabnumber) {
|
||||
const tabSelected = "text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none text-blue-500 border-b-2 font-medium border-blue-500"
|
||||
const tabDeselected = "text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none"
|
||||
console.log("clicked " + tabnumber)
|
||||
for (let i = 1; i <= 4; i++) {
|
||||
const tabE = document.getElementById("tab" + i)
|
||||
const viewE = document.getElementById("tabcontents" + i)
|
||||
if (i === tabnumber) {
|
||||
tabE.className = tabSelected
|
||||
viewE.className = "tabshown"
|
||||
}
|
||||
else {
|
||||
tabE.className = tabDeselected
|
||||
viewE.className = "tabhidden"
|
||||
}
|
||||
}
|
||||
name: 'TabNav',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
tabclicked(tabnumber) {
|
||||
const tabSelected =
|
||||
'text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none text-blue-500 border-b-2 font-medium border-blue-500'
|
||||
const tabDeselected =
|
||||
'text-gray-600 py-4 px-6 block hover:text-blue-500 focus:outline-none'
|
||||
console.log('clicked ' + tabnumber)
|
||||
for (let i = 1; i <= 4; i++) {
|
||||
const tabE = document.getElementById('tab' + i)
|
||||
const viewE = document.getElementById('tabcontents' + i)
|
||||
if (i === tabnumber) {
|
||||
tabE.className = tabSelected
|
||||
viewE.className = 'tabshown'
|
||||
} else {
|
||||
tabE.className = tabDeselected
|
||||
viewE.className = 'tabhidden'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tabshown {
|
||||
display: show;
|
||||
display: show;
|
||||
}
|
||||
|
||||
.tabhidden {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
@ -1,12 +1,8 @@
|
|||
<template>
|
||||
<div class="gridcontainer container mx-auto bg-red-500">
|
||||
<header>
|
||||
I'm a header. Check this box
|
||||
</header>
|
||||
<TabNav/>
|
||||
<footer>
|
||||
This is a game jam game.
|
||||
</footer>
|
||||
<header>I'm a header. Check this box</header>
|
||||
<TabNav />
|
||||
<footer>This is a game jam game.</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -18,19 +14,18 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.gridcontainer {
|
||||
display: grid | inline-grid;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
header {
|
||||
grid-row: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.gridcenter {
|
||||
grid-row: 2;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
footer {
|
||||
grid-row: 3;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
Reference in New Issue