截图功能

截图功能

模块

  • pmuiScreenshots

模块引入

const screenshots = app.requireModule('pmuiScreenshots');

方法—启动相册拍照

  • screenshots.shots 截图功能，传入ref，即可得到组件的截图
/**
 * @param ref       组件的ref
 * @param callback  回调事件
 */
screenshots.shots(ref, callback(result))

  • params 参数说明

    –以下参数不要被表面吓到，用不到的可以不写（简单使用基本不用）

属性 类型 必须 描述 默认值
ref Object 是 vue对象 -

  • callback 回调result说明

    {
    status: 'success',   //状态：success、error
    path: ''          //图片路径
    msg: ''           //详细消息
}

简单实例

<template>
    <div class="app">
        <div ref="main" class="main">
            <image class="img" :src="img"></image>
            <text class="txt">{{src}}</text>
            <button class="button" text="截屏" @click="shots"></button>
        </div>
    </div>
</template>
<style>
    .app{align-items:center;justify-content:center}
    .main{align-items:center;justify-content:center}
    .txt{font-size:22px;margin-bottom:20px}
    .img{width:300px;height:400px;margin-bottom:20px;background-color:red}
    .button{font-size:24px;margin-left:37px;margin-right:37px;margin-bottom:20px;width:300px;height:80px}
</style>
<script>
    export default {
        data() {
            return {
                src: '',
                img: ''
            }
        },
        methods: {
            shots() {
                let screenshots = app.requireModule('screenshots');
                screenshots.shots(this.$refs.main, (p) => {
                    if (p.status == 'success') {
                        this.src = p.path;
                        this.img = "file://" + p.path + "?r=" + Math.random();
                    }
                });
            }
        }
    }
</script>