vanghua-iamge-selector

基于Vue的面向移动端的图片选择器组件

引入组件

# 安装组件
npm install vanghua-image-selector

# 局部引用
import VanghuaImageSelector from "vanghua-image-selector"

提供接口

| 属性接口 | 描述 | 单位 | | ---- | ---- | ---- | | height | 控制展示框的高度 | 同css中的height单位 | | width | 控制展示框的宽度 | 同css中的width单位 | | type | 控制图片选择框的类型 | 'circle'表示圆形，用于头像选取; 'rec'表示矩形，用于背景选取| | innerStyle | 控制展示框的样式 | 类型是对象，用于给展示框设置样式 |

| 事件接口 | 描述 | 单位 | | ---- | ---- | ---- |

使用教程

<template>
  <div class="container">
    <vanghua-image-selector width="100%" height="9em" type="rec" background="cornflowerblue"></vanghua-image-selector>
    <vanghua-image-selector :innerStyle=" {position: 'absolute', top: '5.5em', left: '2em'}" @finished="handleFinished"></vanghua-image-selector>
  </div>
</template>

<script>
import VanghuaImageSelector from "vanghua-image-selector";
export default {
  name: "Home",
  components: {
    "vanghua-image-selector": VanghuaImageSelector
  },
  methods: {
    handleFinished(image) {
      console.log(image)
    }
  }
}
</script>

<style scoped>
.container {
  height: 100%;
  background: #42b983;
  position: relative;
}
</style>