如何使用Vue脚本设置

icomxhvb 于 2023-04-07 发布在 Vue.js

关注(0)|答案(1)|浏览(133)

我正在使用这个库simple-vue-camera.让它正常工作，但我希望我可以使用它与脚本设置.我不能访问相机的快照方法..
我猜问题出在'const cameraComponent = this.$refs.camera'中，我无法通过refs访问Camera组件并获取其快照方法。
下面是使用常规组合API的代码：

<template>
    <q-dialog ref="dialogRef" @hide="onDialogHide">
        <q-card class="column q-dialog-plugin">
            <div class="colunm">
                <ModalBar :icon="'mdi-camera'" :title="$t('global.camera')" class="col" @close="onCancelClick" />
                <q-separator />
                <div>
                    <camera v-if="!fotoTirada" ref="camera" :resolution="{ width: 400, height: 400 }" autoplay></camera>
                    <img v-else :src="imageUrl" />
                </div>
                <q-separator />
                <q-card-actions class="flex justify-between">
                    <q-btn color="secondary-2" label="Cancelar" @click="onDialogHide" />
                    <div>
                        <q-btn v-if="!fotoTirada" color="primary" label="Capturar" @click="takeSnapshot" />
                        <q-btn v-if="fotoTirada" label="Tirar outra foto" @click="fotoTirada = false" />
                        <q-btn v-if="fotoTirada" color="primary" label="Salvar" @click="onOKClick(imageUrl)" />
                    </div>
                </q-card-actions>
            </div>
        </q-card>
    </q-dialog>
</template>

<script>
import Camera from "simple-vue-camera";
import { defineComponent } from "vue";
import { useDialogPluginComponent } from 'quasar'
import ModalBar from "components/ModalBar.vue";

export default defineComponent({

    components: {
        Camera,
        ModalBar
    },

    emits: [
        ...useDialogPluginComponent.emits
    ],

    setup() {
        const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()

        return {
            dialogRef,
            onDialogHide,
            onOKClick(imageUrl) {
                onDialogOK(imageUrl)
            },
            onCancelClick: onDialogCancel
        }
    },

    data() {
        return {
            imageUrl: null,
            fotoTirada: null,
        };
    },

    methods: {
        async takeSnapshot() {
            const cameraComponent = this.$refs.camera;
            const blob = await cameraComponent.snapshot({ width: 400, height: 400 });
            this.imageUrl = URL.createObjectURL(blob);
            const formData = new FormData();
            formData.append("file", blob);
            this.fotoTirada = true;
        },
    },

});
</script>

vue.js

来源：https://stackoverflow.com/questions/75901372/how-to-do-this-with-vue-script-setup

1条答案

按热度按时间

tct7dpnv1#

我觉得用，试着用camera.value是很正常的，看这个例子

<script setup>
import Camera from "simple-vue-camera";
import { ref, defineExpose } from "vue";
import { useDialogPluginComponent } from 'quasar'
import ModalBar from "components/ModalBar.vue";

const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()

const camera = ref(null)
const imageUrl = ref(null)
const photoTaken = ref(false)

const onOKClick = (imageUrl) => {
  onDialogOK(imageUrl)
}

const onCancelClick = () => {
  onDialogCancel()
}

const takeSnapshot = async () => {
  const cameraComponent = camera.value;
  const blob = await cameraComponent.snapshot({ width: 400, height: 400 });
  imageUrl.value = URL.createObjectURL(blob);
  const formData = new FormData();
  formData.append("file", blob);
  photoTaken.value = true;
}

defineExpose({
  dialogRef,
  onDialogHide,
  onOKClick,
  onCancelClick,
  camera,
  imageUrl,
  photoTaken,
  takeSnapshot
})
</script>

赞(0）回复(0）举报 2023-04-07

我来回答

如何使用Vue脚本设置

1条答案

相关问题

热门标签

最新问答