vue-select-img

Vue.js选择图片组件

Usage no npm install needed!

<script type="module">
  import vueSelectImg from 'https://cdn.skypack.dev/vue-select-img';
</script>

README

vue-select-img

选择图片插件，使用用户自定义样式，直接插入input标签。 支持输出base64编码、压缩、图片旋转调整。

安装

通过npm 安装

npm install vue-select-img

通过yarn安装

yarn add vue-select-img

用法


// 引入

import SelectImage from "vue-select-img";
export default {
    components: {
        "select-image": SelectImage
    },
    methods: {
        getImageSource( source ) {
            //source 输出的结果
        }
    }
};

// 在写好的html中添加

<select-image
    quality="0.6"
    @select='getImageSource'
/>

示例

<div class="avatar-warp">
    <select-image
        quality="0.6"
        @select='getImageSource'
    />
</div>

参数

Prop Type Description Default
output String 输出图片文件结果:base64,file base64
accept String 选择图片文件类型:多个值以逗号分隔"png,gif"。 *
quality String 输出图片质量,0 ~ 1。 不压缩质量

运行

1

git clone https://github.com/erdong0604/vue-select-img.git

2

yarn

3

yarn serve