更新记录

1.0.0（2024-07-09） 下载此版本

上传

平台兼容性

mosowe-clip-screen

props

emits

slots

expose

示例

<template>
  <view class="box">
    <view class="just-number">
      <view v-for="item in 10">{{ item }}</view>
    </view>
    <view class="just-number2">
      <view v-for="item in 50">{{ item }}</view>
    </view>
    <mosowe-button @click="clipRef.start('.just-number')">截屏1</mosowe-button>
    <mosowe-button @click="clipRef.start('.just-number2')">截屏2</mosowe-button>
    <mosowe-clip-screen
      ref="clipRef"
      @success="success"></mosowe-clip-screen>

    <view>生成后图片：</view>
    <image
      :src="pageImage"
      style="width: 100%; height: 100vh"
      mode="aspectFit" />
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onShow, onPageScroll } from '@dcloudio/uni-app';
onPageScroll(() => {});
// 截屏测试
const clipRef = ref<any>(null);
const canvasImage = ref<any>(null);
const pageImage = ref<string>('');
const success = (res: string) => {
  console.log('res', res);
  pageImage.value = res;
};
</script>

<style lang="scss" scoped>
.just-number,
.just-number2 {
  padding: 30rpx;
  border: 2px solid #ff0000;
  box-sizing: border-box;
  margin: 2px;
}
</style>