Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/vinayakkulkarni/v-image/tree/v2.6.1 below:

GitHub - vinayakkulkarni/v-image at v2.6.1

• 💪 Built with TypeScript.
• 🌠 Built with Vue 2 w/ Composition API
• ⚡ Zero dependencies.

• v-image 📷
  • Demo
  • Features
  • Table of Contents
    • Installation
    • Build Setup
    • TypeScript
    • Usage
    • Example
    • API
      • Props
      • Events
  • Contributing
  • License
  • Author

npm i v-image
// or
yarn add v-image

# install dependencies
$ npm install

# package lib
$ npm run build

You can import the typings by including v-image in compilerOptions.types section of your tsconfig.json file.

Browser: CDN: UNPKG | jsDelivr (available as window.VImage)

Module Bundler:

import { VImage } from 'v-image';
Vue.component('VImage', VImage);

Or use locally

import { VImage } from 'v-image';

Or use it as a plugin:

import VImage from 'v-image';
import Vue from 'vue';

Vue.use(VImage);

For Nuxt, create a file in plugins/v-image.ts

import VImage from 'v-image';
import Vue from 'vue';

Vue.use(VImage);

then import the file in nuxt.config.{j|t}s:

export default {
  // ...
  plugins: [
    // ...
     { src: '~/plugins/v-image', mode: 'client' },
    // ...
  ],
  // ...
}

<template>
  <v-image
    wrapper="flex justify-center items-center content-center w-full h-full"
    :placeholder="placeholder"
    :form="form"
    :uploaded="uploaded"
    @image-loaded="saveImage"
    @image-removed="deleteImage"
  />
</template>

/* Used Tailwind Utility classes, checkout the example dir */
import { VImage } from 'v-image';
export default {
  components: { VImage },
  data() {
    return {
      placeholder: {
        image: 'https://picsum.photos/1000/1000',
        alt: 'Placeholder Image',
        imgClass: 'block rounded object-contain object-center max-w-xs',
        btnClass: 'block btn cursor-pointer text-center',
        wrapper: 'p-4 max-w-xs w-full border border-gray-400 border-dotted',
      },
      form: {
        name: 'myImage',
        label: 'Select dope Image',
        accept: 'image/jpg',
      },
      uploaded: {
        wrapper: 'p-4 max-w-xs w-full border border-gray-400 border-dotted',
        alt: 'User uploaded dope image',
        imgClass: 'block rounded object-contain object-center max-w-xs',
        btnClass: 'block btn cursor-pointer text-center w-full',
        removeBtnText: 'Remove image',
      },
      image: '' as string | null,
    };
  },
  methods: {
    saveImage(image: string) {
      this.image = image;
    },
    deleteImage(deleted: boolean) {
      if (deleted) {
        this.image = null;
      }
    },
  },
};

1. Fork it ( https://github.com/vinayakkulkarni/v-image/fork )
2. Create your feature branch (git checkout -b feat/new-feature)
3. Commit your changes (git commit -Sam 'feat: add feature')
4. Push to the branch (git push origin feat/new-feature)
5. Create a new Pull Request

Note:

1. Please contribute using Github Flow
2. Commits & PRs will be allowed only if the commit messages & PR titles follow the conventional commit standard, read more about it here
3. PS. Ensure your commits are signed. Read why

MIT © Vinayak Kulkarni

v-image © Vinayak, Released under the MIT License.
Authored and maintained by Vinayak Kulkarni with help from contributors (list).

vinayakkulkarni.dev · GitHub @vinayakkulkarni · Twitter @_vinayak_k

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4