Camera 相机

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title='自定义相机' class="p.30">
		<t-card title="Camrea 相机" sub-title="本相机组件设计简洁，易于集成，满足多样化的拍摄需求">
		</t-card>
		<t-col class="tdr-tdb-mt.30">
			<t-camrea @take="getPhoto" ref="camrea" style="width:100%;height:320px"></t-camrea>
		</t-col>

		<t-row class="fjcb-mt.30">
			<t-button class="w.31%" @click="open">打开相机</t-button>
			<t-button class="w.31%" @click="close">关闭相机</t-button>
			<t-button class="w.31%" @click="take">拍照</t-button>
		</t-row>
		<t-section class="mtb.30" title='预览图'></t-section>
		<t-col class="tdr">
			<t-image class="w.100%" v-if="urlSrc!=''" :src="urlSrc"></t-image>
		</t-col>
		<view style="height: 50px;"></view>
	</t-page>
</template>


<script>
	export default {
		data() {
			return {
				urlSrc: ''
			}
		},
		methods: {
			open() {
				let el = (this.$refs['camrea'] as TCamreaComponentPublicInstance)
				el.open()
			},
			close() {
				let el = (this.$refs['camrea'] as TCamreaComponentPublicInstance)
				el.close()
			},
			take() {
				let el = (this.$refs['camrea'] as TCamreaComponentPublicInstance)
				el.take()
			},
			getPhoto(result : string) {
				this.urlSrc = result
			}
		}
	}
</script>

Props

名称	描述	类型	默认值	可选值
class	组件的类名，用于自定义样式	String	-	-

Events

事件名	描述	回调参数	版本
take	拍照成功后触发，传递照片路径	照片路径	-

Methods

名称	描述
open	打开相机
close	关闭相机
take	拍照
getPhoto	获取拍照结果

Slots

名称	描述
default	默认插槽，用于放置相机组件