mirror of
https://github.com/vkaelin/LeagueStats.git
synced 2026-03-26 05:17:27 +00:00
43 lines
799 B
Vue
43 lines
799 B
Vue
<template>
|
|
<Ripple color="rgba(43, 108, 176, 0.7)" class="relative inline-block rounded-lg">
|
|
<input
|
|
v-model="championName"
|
|
@input="search"
|
|
class="input-color px-2 pl-10 py-2 rounded-lg outline-none focus:bg-blue-1000"
|
|
type="text"
|
|
placeholder="Search Champions"
|
|
/>
|
|
<svg class="ml-3 absolute left-0 vertical-center w-4 h-4">
|
|
<use xlink:href="#search" />
|
|
</svg>
|
|
</Ripple>
|
|
</template>
|
|
|
|
<script>
|
|
import Ripple from '@/components/Ripple.vue'
|
|
|
|
export default {
|
|
components: {
|
|
Ripple,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
championName: ''
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
search() {
|
|
this.$emit('search-champions', this.championName)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.input-color::placeholder {
|
|
color: #fff;
|
|
font-weight: 300;
|
|
}
|
|
</style>
|