组合式函数

组合式函数是 Vue 3 中引入的一个新功能，它允许我们在组件中使用函数的方式来组织代码。

函数列表

函数名	说明
usePureCodeCountdown()	[详情] 验证码倒计时
usePureShare()	[详情] 分享

验证码倒计时

<template>
	<pure-button :disabled="isCountdown" @onClick="start" :text="tips"></pure-button>
</template>

<script setup>
import { ref } from "vue";
import { usePureCodeCountdown } from "@/uni_modules/pure-utils";

// 使用
// seconds: 剩余秒数
// isCountdown: 是否正在倒计时
// start: 开始方法
// clear: 清除方法
const { seconds, isCountdown, start, clear } = usePureCodeCountdown({
	key: "page-login", // 用于区分不同的验证码
	seconds: 60, // 倒计时的总秒数
	end: onEnd, // 倒计时结束后的回调函数
	change: onChange, // 倒计时描述变化时的回调函数，参数为剩余秒数
});

// 倒计时显示的文本
const tips = ref("获取验证码");

// 倒计时结束后的回调
function onEnd() {
	tips.value = "重新发送验证码";
}

// 倒计时更新时的回调函数
function onChange(seconds) {
	tips.value = `${seconds}s后重新获取`;
}
</script>

分享

<script setup>
import { ref, computed } from "vue";
import { usePureShare } from "@/uni_modules/pure-utils";

// 1. 如果使用默认分享配置,则只初始化一下就可以
// onShareAppMessage: 分享给好友
// onShareTimeline: 分享到朋友圈
const { onShareAppMessage, onShareTimeline } = usePureShare();

// 2.如果需要自定义分享数据,但是分享数据中无响应数据,可以在初始化时设置
const { onShareAppMessage, onShareTimeline } = usePureShare({
	// 分享给好友
	appMessage: {
		title: "分享标题",
		desc: "分享描述",
		path: "/pages/index/index",
	},
	// 分享到朋友圈
	timeline: {
		title: "分享标题",
		query: "a=1&b=2",
	},
});

// 3. 如果需要动态设置分享数据
const { onShareAppMessage, onShareTimeline } = usePureShare();

// 3.1. 需要使用计算属性定义分享配置
const shareAppMessageConfig = computed(() => {
	title: "分享标题",
	desc: "分享描述",
	path: "/pages/index/index",
});

// 3.2. 然后将计算属性作为参数传递给对应的分享函数
onShareAppMessage(shareAppMessageConfig);
</script>