Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
2 contributors

Users who have contributed to this file

@KaelWD @MajesticPotatoe
83 lines (76 sloc) 1.8 KB
<template>
<v-form>
<v-container>
<v-layout row wrap>
<v-flex xs12>
<v-text-field
v-model="message"
:append-icon="marker ? 'mdi-map-marker' : 'mdi-map-marker-off'"
:append-outer-icon="message ? 'mdi-send' : 'mdi-microphone'"
:prepend-icon="icon"
box
clear-icon="mdi-close-circle"
clearable
label="Message"
type="text"
@click:append="toggleMarker"
@click:append-outer="sendMessage"
@click:prepend="changeIcon"
@click:clear="clearMessage"
></v-text-field>
</v-flex>
</v-layout>
</v-container>
</v-form>
</template>
<script>
export default {
data: () => ({
password: 'Password',
show: false,
message: 'Hey!',
marker: true,
iconIndex: 0,
icons: [
'mdi-emoticon',
'mdi-emoticon-cool',
'mdi-emoticon-dead',
'mdi-emoticon-excited',
'mdi-emoticon-happy',
'mdi-emoticon-neutral',
'mdi-emoticon-sad',
'mdi-emoticon-tongue'
]
}),
computed: {
icon () {
return this.icons[this.iconIndex]
}
},
methods: {
toggleMarker () {
this.marker = !this.marker
},
sendMessage () {
this.resetIcon()
this.clearMessage()
},
clearMessage () {
this.message = ''
},
resetIcon () {
this.iconIndex = 0
},
changeIcon () {
this.iconIndex === this.icons.length - 1
? this.iconIndex = 0
: this.iconIndex++
}
}
}
</script>
<codepen-resources lang="json">
{
"css": ["https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css"]
}
</codepen-resources>
You can’t perform that action at this time.