Commit bc97813a authored by Damon's avatar Damon

相机组件文档补充

parent 36860090
......@@ -58,7 +58,6 @@
export default {
props: {
currentItem: { // 对应的规范item
type: Object,
default () {
return {
_id: '', // 规格ID
......
## 相机组件使用说明
```
该组件仅用于拍照后返回图片,与业务不关联,目前最多一次可以拍10张图片
```
### 因为相机组件需要全屏展示,所以加载该组件需要在当前页面隐藏顶部导航栏和底部的TabBar
```
uni.hideTabBar()
```
### 然后加上自定义导航栏,通过切换状态takeStatus来显示和隐藏
```
<u-navbar v-if="!takeStatus" :is-back="false" :title-size="26" title-color="#000" title="我的"></u-navbar>
```
## API
### Props
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
| :-: | :-: | :-: | :-: | :-: |
| currentItem | Object | - | - | 对应的规范数据,用于获取示意图和水印,以及保存图片所需的ID **格式见下文** |
### currentItem 格式
```json
{
_id: '', // 保存图片时需要,必传
system_id: '', // 获取水印列表需要,必传
images: [ // 拍照示意图
'https://qn-static.banshouhui.com/live_mark.png',
'https://qn-static.banshouhui.com/live_mark.png',
'https://qn-static.banshouhui.com/live_mark.png'
],
main_point: [] // 拍照要求
... // 列表其他字段也可传进来,可能会用到
}
```
### Events
|事件称名 |说明 | 返回值 |
|:-: |:-: | :-: |
|@close | 关闭相机或完成拍照的时候触发 | 已拍照完成的图片数组|
## 组件用法
### 基础用法
```html
<u-navbar v-if="!takeStatus" :is-back="false" :title-size="26" title-color="#000" title="我的"></u-navbar>
<view @click="take">打开相机</view>
<take-photo v-if="takeStatus" :currentItem="testData" @close="closeTake"></take-photo>
```
```javascript
import takePhoto from '@/components/take/index.vue'
export default {
components: {
'take-photo': takePhoto
},
data() {
return {
takeStatus: false,
testData: {}
}
},
methods:{
// 打开相机
take() {
uni.hideTabBar() // 打开时隐藏TabBar
this.takeStatus = true
},
// 拍照完成或关闭相机
closeTake(images) {
console.log(images)
this.takeStatus = false
}
}
}
```
\ No newline at end of file
......@@ -31,7 +31,7 @@
</u-cell-group>
</view>
</view>
<take-photo type="test" v-if="takeStatus" :currentItem="testData" @close="closeTake"></take-photo>
<take-photo v-if="takeStatus" :currentItem="testData" @close="closeTake"></take-photo>
</view>
</template>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment