vue3-img-input

# Use cases

# Base usage

<template>
  <div class="example d-flex flex-column gap-16">
    <h1 class="example-title">Base component usage</h1>
    <h2>Just component</h2>
    <div class="example__container size-240">
      <v-image-input v-model="image1" removable />
    </div>
    <h2>Removable component</h2>
    <div class="example__container size-120">
      <v-image-input v-model="image2" removable />
    </div>
  </div>
</template>

<script>
export default {
  name: "BaseExampleView",
  data() {
    return {
      image1: null,
      image2: require("@/assets/logo.png"),
      
    };
  },
};
</script>

<style lang="scss">
@import "~vue3-img-input/src/styles/style.scss";
</style>

# Slots usage example

<template>
  <div class="example d-flex flex-column gap-16">
    <h1 class="example-title">Slot usage</h1>
    <h2>Slot #empty-layout</h2>
    <div class="example__container size-240">
      <v-image-input v-model="image1" removable>
        <template #empty-layout> Move file or click </template>
      </v-image-input>
    </div>
    <h2>Slot #remove-icon</h2>
    <div class="example__container size-240">
      <v-image-input v-model="image2" removable>
        <template #remove-icon>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
            <path
              d="M7.994 153.5c1.326 0 2.687 .3508 3.975 1.119L208 271.5v223.8c0 9.741-7.656 16.71-16.01 16.71c-2.688 0-5.449-.7212-8.05-2.303l-152.2-92.47C12.13 405.3 0 383.3 0 359.5v-197.7C0 156.1 3.817 153.5 7.994 153.5zM426.2 117.2c0 2.825-1.352 5.647-4.051 7.248L224 242.6L25.88 124.4C23.19 122.8 21.85 119.1 21.85 117.2c0-2.8 1.32-5.603 3.965-7.221l165.1-100.9C201.7 3.023 212.9 0 224 0s22.27 3.023 32.22 9.07l165.1 100.9C424.8 111.6 426.2 114.4 426.2 117.2zM440 153.5C444.2 153.5 448 156.1 448 161.8v197.7c0 23.75-12.12 45.75-31.78 57.69l-152.2 92.5C261.5 511.3 258.7 512 256 512C247.7 512 240 505 240 495.3V271.5l196-116.9C437.3 153.8 438.7 153.5 440 153.5z"
            />
          </svg>
        </template>
      </v-image-input>
    </div>
  </div>
</template>

<script>
export default {
  name: "SlotExampleView",
  data() {
    return {
      image1: null,
      image2: require("@/assets/logo.png"),
    };
  },
};
</script>

<style lang="scss">
@import "~vue3-img-input/src/styles/style.scss";
</style>

# Customize Example

<template>
  <div class="example d-flex flex-column gap-16">
    <h1 class="example-title">Customize</h1>
    <h2>Just component</h2>
    <div class="example__container size-240">
      <v-image-input v-model="image1" removable />
    </div>
    <h2>Removable component</h2>
    <div class="example__container size-120">
      <v-image-input v-model="image2" removable />
    </div>
  </div>
</template>

<script>
export default {
  name: "BaseExampleView",
  data() {
    return {
      image1: null,
      image2: require("@/assets/logo.png"),
    };
  },
};
</script>

<style lang="scss">
$v-image-input-color: #402fa4;
$v-image-input-color-hover: #0bd094;
$v-image-input-background: #e1b547;
$v-image-input-background-hover: #0004ff;

$v-image-input-empty-layout-padding: 50px;
$v-image-input-border-radius: 50%;

$v-image-input-rm-icon-color: #fff;
$v-image-input-rm-icon-size: 48px;
@import "~vue3-img-input/src/styles/style.scss";
</style>

← Props →