Simple tags input with VueJS

Developer
Vincenzo
Size
8,463 Kb
Views
32,384
  1. Simple tags input with VueJS Previews
  2. Simple tags input with VueJS HTML Codes
  3. Simple tags input with VueJS CSS Codes
  4. Simple tags input with VueJS JS Codes

How do I make an simple tags input with vuejs?

What is a simple tags input with vuejs? How do you make a simple tags input with vuejs? This script and codes were developed by Vincenzo on 07 October 2022, Friday.

Simple tags input with VueJS Previews
IQ Test

Simple tags input with VueJS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple tags input with VueJS</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='css/znbyqg.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
.tags {	display: flex;	flex-direction: row;	flex-shrink: 0;	.asInput {	width: auto;	padding-right: 1rem;	background: rgba($cyan, 0.2);	margin: 0 .2rem;	&.deleting {	background: $red;	}	}	input {	margin: 0 .2rem;	max-width: 15rem;	opacity: 1;	transition: all .3s ease-in-out;	}	input[readonly] {	max-width: 0;	padding-left: 0;	padding-right: 0;	opacity: 0;	margin-left: 0;	margin-right: 0;	pointer-events: none;	}
}
label {	margin: 1rem 0;
}
#app {	padding: 2rem;	h1 {	margin-bottom: 1rem;	}
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<template id="tagsInput-template">	<div class="tags">	<span class="asInput" v-for="(tag, index) in tags1" :class="{ deleting: confirmWaiting && position==index+1 }">{{tag}}</span>	<input v-model="newTag" placeholder="Add" @keyup.enter="add()" @keyup.backspace="checkIfRemove()" @keyup.left="left()" @keyup.right="right()" :readonly="readonly"/>	<span class="asInput" v-for="(tag, index) in tags2">{{tag}}</span>	</div>
</template>
<div id="app">	<!--<div class="my-control" v-for="input in inputs" :class="{active: input.isActive}"> <div class="form-label" :class="{active: input.isActive || input.value}">	{{input.for}}	</div>	</div>-->	<h1>Very simple tags-input with VueJS 2</h1>	<tags-input :tags="tags" :readonly="readonly"></tags-input>	<label>	<input type="checkbox" v-model="readonly" /> Readonly	</label>	<ul>	<li>Write and press enter to add a new tag.</li>	<li>Press left (it needs to be at position 0 in the input value) or right key (it needs to be at last position in the input value) in order to change position of the input in the list.</li>	<li>Press backspace twice (within a second and a half) aimed at deleting previous tag.</li>	</ul>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple tags input with VueJS - Script Codes CSS Codes

.tags {	display: flex;	flex-direction: row;	flex-shrink: 0;	.asInput {	width: auto;	padding-right: 1rem;	background: rgba($cyan, 0.2);	margin: 0 .2rem;	&.deleting {	background: $red;	}	}	input {	margin: 0 .2rem;	max-width: 15rem;	opacity: 1;	transition: all .3s ease-in-out;	}	input[readonly] {	max-width: 0;	padding-left: 0;	padding-right: 0;	opacity: 0;	margin-left: 0;	margin-right: 0;	pointer-events: none;	}
}
label {	margin: 1rem 0;
}
#app {	padding: 2rem;	h1 {	margin-bottom: 1rem;	}
}

Simple tags input with VueJS - Script Codes JS Codes

'use strict';
Vue.config.keyCodes.backspace = 8;
var tagsInput = Vue.component('tagsInput', Vue.extend({	template: '#tagsInput-template',	props: ['tags', 'readonly'],	data: function data() {	return {	newTag: '',	confirmWaiting: false,	position: 1	};	},	computed: {	tags1: function tags1() {	return this.tags.slice(0, this.position);	},	tags2: function tags2() {	return this.tags.slice(this.position, this.tags.length);	}	},	methods: {	add: function add() {	this.tags.splice(this.position, 0, this.newTag);	this.position += 1;	this.newTag = '';	},	checkIfRemove: function checkIfRemove() {	if (this.confirmWaiting) {	if (this.newTag.length === 0) {	this.tags.splice(this.position - 1, 1);	this.position -= 1;	if (this.confirmWaiting) clearTimeout(this.confirmWaiting);	this.confirmWaiting = false;	}	} else {	//this.confirmWaiting = true	var _this = this;	this.confirmWaiting = setTimeout(function () {	_this.confirmWaiting = false;	}, 1500);	}	},	left: function left() {	var pos = event.target.selectionStart;	if (pos === 0) {	this.position = Math.max(0, this.position - 1);	}	var evt = event;	setTimeout(function () {	console.log(evt.target);	evt.target.focus();	}, 1300);	},	right: function right() {	var pos = event.target.selectionStart;	if (pos === this.newTag.length) {	this.position = Math.min(this.tags.length, this.position + 1);	}	var evt = event;	setTimeout(function () {	evt.target.focus();	}, 200);	}	}
}));
var app = new Vue({	el: '#app',	data: function data() {	return {	tags: ['Aurora', 'Hannah', 'John', 'Simone'],	readonly: false	};	}
});
Simple tags input with VueJS - Script Codes
Simple tags input with VueJS - Script Codes
Home Page Home
Developer Vincenzo
Username vncnz
Uploaded October 07, 2022
Rating 3
Size 8,463 Kb
Views 32,384
Do you need developer help for Simple tags input with VueJS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Vincenzo (vncnz) Script Codes
Name
Datetime-writer DEMO
Square box with hover effect
Search text highlight example with material.angular
Simple Date input with VueJS 2
Private Test
Pure CSS cut corner box test
Advanced and dynamic input validation with AngularJS
Elegant layout with elastic menu animation
AngularJS DateTimePicker concept
Swiping Cards
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!