121 行
3.0 KiB
Plaintext
121 行
3.0 KiB
Plaintext
<template>
|
||
<scroll-view class="page">
|
||
<view class="section">
|
||
<text class="section-title">基础用法</text>
|
||
<view class="link-block">
|
||
<uni-link href="https://uniapp.dcloud.net.cn" @error="onError">https://uniapp.dcloud.net.cn</uni-link>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="section">
|
||
<text class="section-title">自定义样式</text>
|
||
<view class="link-block">
|
||
<uni-link href="https://doc.dcloud.net.cn/uni-app-x/" class="custom-link" @error="onError" >
|
||
查看 uni-app x 文档
|
||
</uni-link>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="section">
|
||
<text class="section-title">target="_self" (默认)</text>
|
||
<view class="link-block">
|
||
<uni-link href="https://uniapp.dcloud.net.cn" target="_self" @error="onError" >
|
||
在内置 webview 中打开
|
||
</uni-link>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="section">
|
||
<text class="section-title">target="_blank"</text>
|
||
<view class="link-block">
|
||
<uni-link href="https://uniapp.dcloud.net.cn" target="_blank" @error="onError" >
|
||
使用外部浏览器打开
|
||
</uni-link>
|
||
</view>
|
||
<text class="tip-text">APP 使用 openSchema 插件，小程序回退到内置 webview 打开，Web 打开新页签</text>
|
||
</view>
|
||
|
||
<view class="section">
|
||
<text class="section-title">target="_blank" 且 失败回退策略为复制URL</text>
|
||
<view class="link-block">
|
||
<uni-link href="https://uniapp.dcloud.net.cn" target="_blank" blankFallback="copy-link-modal" @error="onError" >
|
||
使用外部浏览器打开
|
||
</uni-link>
|
||
</view>
|
||
<text class="tip-text">使用外部浏览器打开失败时，回退为复制URL到剪贴板且弹框提示用户手动粘贴URL到浏览器</text>
|
||
</view>
|
||
|
||
<view class="section">
|
||
<text class="section-title">失败示例</text>
|
||
<view class="link-block">
|
||
<uni-link href="" @error="onError" >
|
||
空链接（触发 error）
|
||
</uni-link>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="section">
|
||
<text class="section-title">最近事件</text>
|
||
<text class="log-text">{{ data.lastEvent }}</text>
|
||
</view>
|
||
</scroll-view>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
type Data = {
|
||
lastEvent: string
|
||
}
|
||
|
||
const data = reactive<Data>({
|
||
lastEvent: '暂无事件'
|
||
})
|
||
|
||
function onError(message : string) {
|
||
data.lastEvent = `error: ${message}`
|
||
console.error(`[link] error: ${message}`)
|
||
}
|
||
|
||
defineExpose({
|
||
data,
|
||
onError
|
||
})
|
||
</script>
|
||
|
||
<style>
|
||
.page {
|
||
flex: 1;
|
||
padding: 12px;
|
||
}
|
||
|
||
.section {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 16px;
|
||
color: var(--text-color, #333333);
|
||
}
|
||
|
||
.link-block {
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.tip-text {
|
||
margin-top: 4px;
|
||
font-size: 12px;
|
||
color: var(--text-color, #333333);
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.custom-link {
|
||
color: #007aff;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.log-text {
|
||
margin-top: 8px;
|
||
font-size: 13px;
|
||
color: #007aff;
|
||
}
|
||
</style>
|