1.0.4 • Published 3 years ago
vanghua-image-selector v1.0.4
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>