更新记录

1.0.1(2024-09-12)

readme.md

1.0.0(2024-09-12)

1.0.0


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.24,Android:支持,iOS:不支持,HarmonyNext:不确定 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

xn-screenshot-view

开发文档

UTS 语法 UTS API插件 UTS 组件插件 Hello UTS

    <template>
        <view><text>1</text></view>
        <view><text>2</text></view>
        <view><text>3</text></view>
        <view><text>4</text></view>
        <view><text>5</text></view>
        <view><text>6</text></view>
        <view class="content">
            <xn-screenshot-view ref="screenshotView" style="background: red;width: 750rpx;align-items:center;" @viewTag="viewTag">
                <image class="logo" ref="view" src="/static/logo.png" @click="clickTakeScreenshot"></image>
                <view class="text-area"></view>
                <view style="margin-top: 100rpx;margin-bottom: 100rpx;"><text style="color: #fff;">截取</text></view>
                <view style="margin-top: 1100rpx;margin-bottom: 100rpx;"><text style="color: #fff;">长图截取</text></view>
            </xn-screenshot-view>
        </view>
    </template>

    <script setup>
        import { toRefs, reactive, onMounted, onUnmounted, ref, watch, nextTick } from "vue";
        import { onReady } from "@dcloudio/uni-app";
        import { takeScreenshot } from "@/uni_modules/xn-screenshot-view"
        const screenshotView = ref(null);
        const viewTagId = ref(null);

        const clickTakeScreenshot = () => {
            // start.value = true;
            const wo = takeScreenshot(viewTagId.value);
            console.log(wo);
        }
        const viewTag = (event) => {
            console.log(event.detail);
            viewTagId.value = event.detail;
        }
        onReady(() => {

        })
    </script>

    <style>
        .content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .logo {
            height: 200rpx;
            width: 200rpx;
            margin-top: 200rpx;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 50rpx;
        }

        .text-area {
            display: flex;
            justify-content: center;
        }

        .title {
            font-size: 36rpx;
            color: #8f8f94;
        }
    </style>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问