76 lines
2.0 KiB
Markdown
76 lines
2.0 KiB
Markdown
# 自定义相机拍照截图
|
|
|
|
## 属性说明
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
| ---------- | -------- | -------------------- | ----------------------------------------- |
|
|
| tipsText | String | '' | 提示文案 |
|
|
| color | String | rgba(36, 64, 135, 1) | 主题或按钮颜色 |
|
|
| @onConfirm | Function | | 确认按钮回调， 返回图片临时Url Objecj:{url: 'xxx.jpg'} |
|
|
|
|
## 示例代码
|
|
|
|
``` JavaScript
|
|
<template>
|
|
<view class="image-box">
|
|
<image v-if="imgUrl" class="img" :src="imgUrl" mode="widthFix" @click.prevent="onPreviewImage" />
|
|
<view v-else class="no-img">暂无图片，请点击下方按钮拍照</view>
|
|
</view>
|
|
<button class="photo-btn" @click="isPhoto = true">开始拍照</button>
|
|
<bcode-camera v-if="isPhoto" @onConfirm="onConfirmCamera"></bcode-camera>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue'
|
|
const imgUrl = ref('') // 图片url
|
|
const isPhoto = ref(false) // 是否开始拍照
|
|
|
|
// 拍照确认回调
|
|
const onConfirmCamera = (data: { url: string }) => {
|
|
imgUrl.value = data.url
|
|
isPhoto.value = false
|
|
console.log('onConfirmCamera', data)
|
|
}
|
|
|
|
// 预览图片
|
|
const onPreviewImage = () => {
|
|
uni.previewImage({
|
|
urls: [imgUrl.value],
|
|
longPressActions: {
|
|
itemList: ['发送给朋友', '保存图片', '收藏'],
|
|
success: function (data) {
|
|
console.log('预览图片', data)
|
|
},
|
|
fail: function (err) {
|
|
console.log(err.errMsg)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.image-box {
|
|
width: 100%;
|
|
height: 700rpx;
|
|
background-color: #f0f0f0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.no-img {
|
|
text-align: center;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.photo-btn {
|
|
margin-top: 32rpx;
|
|
width: 80%;
|
|
background-color: #244087;
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
|
|
```
|