Vue-Picture-Input 使用教程

最新推荐文章于 2024-12-25 10:47:37 发布

邹澜鹤Gardener

最新推荐文章于 2024-12-25 10:47:37 发布

阅读量450

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00001/article/details/141082630

Vue-Picture-Input 使用教程

vue-picture-inputMobile-friendly picture file input component for Vue.js 2-3 with image preview, drag and drop, EXIF orientation, and more项目地址:https://gitcode.com/gh_mirrors/vu/vue-picture-input

项目介绍

Vue-Picture-Input 是一个基于 Vue.js 的轻量级组件，它为你的应用提供了美观且易于使用的图片上传功能。此项目的目的是简化处理用户图片输入的过程，提供了一种现代、响应式和自定义丰富的解决方案。主要特点包括响应式设计、预览功能、多文件支持、拖放支持以及自定义样式和事件。

项目快速启动

安装

首先，你需要通过 npm 安装 Vue-Picture-Input 组件：

npm install vue-picture-input

引入并使用组件

在你的 Vue 项目中引入并注册 Vue-Picture-Input 组件：

import Vue from 'vue';
import PictureInput from 'vue-picture-input';

Vue.component('PictureInput', PictureInput);

在你的模板中使用该组件：

<template>
  <div id="app">
    <PictureInput
      ref="pictureInput"
      @change="onChange"
      :width="300"
      :height="300"
      :crop="true"
      :quality="0.99"
      :size="10"
      buttonClass="btn"
      :customStrings="{
        upload: '<h1>Bummer!</h1>',
        drag: 'Drag a 😺 GIF or GTFO'
      }">
    </PictureInput>
  </div>
</template>

<script>
export default {
  methods: {
    onChange (image) {
      console.log('New picture selected!')
      if (image) {
        console.log('Picture loaded.')
      } else {
        console.log('FileReader API not supported: use the <form>, Luke!')
      }
    }
  }
}
</script>