Sexy Input for Semantic-UI

InputPlus.vue

<template>
	<div class="ui icon input">
		<input
			:placeholder="placeholder"
			:value="value"
			@input="onInput"
			@blur="onBlur"
			ref="input"
		/><i
			class="icon" :class="value ? 'close link' : icon"
			@click="onClear"
		></i>
	</div>
</template>

<script>
	export default {
		name: 'InputPlus',
		props: {
			icon: {
				type: String,
				default: 'search'
			},
			value: [String, Number],
			placeholder: {
				type: String,
				default: 'Search...'
			},
		},
		events: {
			input: {
				custom: true,
			},
			blur: {
				custom: true,
			},
		},
		methods: {
			onClear(e) {
				this.$emit('input', '');
			},
			onInput(e) {
				this.$emit('input', e.target.value);
			},
			onBlur(e) {
				this.$emit('blur', e);
			},
		}
	}

</script>