useClipboardData

剪贴板操作

何时使用

需要复制和获取复制文本时

API

const [clipboardData, { set, get }] = useClipboardData();

参数说明

无

返回值说明

返回值	说明	类型
clipboardData	当前剪切板内容	any
set	设置当前剪切板内容	PromiseAction<any>
get	获取当前剪切板内容	PromiseWithoutOptionAction<GetResult['data']>

代码演示

React

basic/useClipboardData/index

import React from 'react';
import DemoContent from '@src/components/DemoContent';
import { View } from '@tarojs/components';
import { Cell } from '@taroify/core';
import { useClipboardData } from 'taro-hooks';

const SETTYPE = {
  number: 1,
  boolean: true,
  object: { name: 'taro-hooks' },
  function: function taro() {},
  string: 'taro-hooks',
  undefined: undefined,
  null: null,
  date: new Date(),
};

export default () => {
  const [clipboardData, { set, get }] = useClipboardData();

  const handleGet = async () => {
    const clipboard = await get();
    console.log('当前剪贴板内容:', clipboardData, clipboard);
  };

  return (
    <DemoContent>
      <View>请打开F12查看console</View>
      <Cell.Group clickable>
        {Object.entries(SETTYPE).map(([key, value]) => (
          <Cell
            key={key}
            title={key}
            brief={JSON.stringify(value)}
            onClick={() => set(value)}
          ></Cell>
        ))}
      </Cell.Group>
      <Button block onClick={handleGet}>
        打印当前剪贴板
      </Button>
    </DemoContent>
  );
};

Vue

basic/useClipboardData/index

<template>
  <demo-content>
    <view>请打开F12查看console</view>
    <nut-cell
      v-for="(value, key) in SETTYPE"
      :key="key"
      :title="key"
      :sub-title="$filters.stringify(value)"
      @click="set(value)"
    ></nut-cell>
    <nut-button block @click="handleGet()">打印当前剪贴板</nut-button>
  </demo-content>
</template>

<script setup lang="ts">
import { useClipboardData } from 'taro-hooks';

const SETTYPE = {
  number: 1,
  boolean: true,
  object: { name: 'taro-hooks' },
  function: function taro() {},
  string: 'taro-hooks',
  undefined: undefined,
  null: null,
  date: new Date(),
};

const [clipboardData, { set, get }] = useClipboardData();

const handleGet = async () => {
  const clipboard = await get();
  console.log('当前剪贴板内容:', clipboardData, clipboard);
};
</script>

Hook 支持度

微信小程序	H5	ReactNative
✔️	✔️	✔️

FAQ

1. 存储和返回有什么条件么?

   除function/null/undefined. 基础类型均可在获取的时候被反序列化回来.
   除string所有的类型都会被序列化或者JSON之后再被存储