1.0.4 • Published 5 years ago

vanghua-image-selector

Licence

MIT

Version

1.0.4

Deps

Size

28 kB

Vulns

Weekly

Summary Dependency Versions

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>