更新记录
1.0.1(2024-09-12)
readme.md
1.0.0(2024-09-12)
1.0.0
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | - | - | - | - | 4.4 | × | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | - | × | × | × | × |
uni-app x
Chrome | Safari | Android | iOS | 鸿蒙 | 微信小程序 |
---|---|---|---|---|---|
- | - | 5.0 | × | - | × |
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>