Vue 2 New namer
Vue 2 component, it is a simple button with the symbol '+' that when clicked, a text field appears and sends the data to the parent component.
When clicking the button or pressing enter, the data is sent to the parent component, the field disappears and the value is reset.
This is an ideal component if you use Bootstrap 4 and vue-awesome.
https://github.com/masweb/gvweb-new-namer
https://www.npmjs.com/package/gvweb-new-namer
Install
In your project:
npm install gvweb-new-namer
Usage
Use @newnamerevent listener to use the data entered by the user.
Configure the tex in the button button-tex, the placeholder and Bootstrap 4 button class bs-variant.
In your component:
import newNamer from 'gvweb-new-namer'import 'gvweb-new-namer/dist/lib/gvweb-new-namer.min.css'...components: {newNamer},<newNamer@newnamerevent="cookdata"button-text="Guardar" // default: Savebs-variant="outline-primary" // default: outline-secondaryplaceholder="Introduzca nuevo proveedor" // default: Please, input text></newNamer>methods: {cookdata(e){this.name = e}}
Build Setup
# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for production and view the bundle analyzer reportnpm run build --report
For detailed explanation on how things work, checkout the guide and docs for vue-loader.