xtf-link

组件说明

xtf-link 是链接组件，支持页面导航、电话拨打、外部链接打开和链接复制。自动识别链接类型并选择合适的打开方式，适用于文字链接、外部跳转和联系方式等场景。

---

基础用法

1. 页面导航

通过 href 设置跳转地址，支持应用内页面路径：

<template>
  <xtf-link href="/pages/about/index" text="关于我们" />
</template>

2. 外部链接

外部链接自动复制到剪贴板并提示用户：

<template>
  <xtf-link href="https://example.com" text="访问官网" show-arrow />
</template>

3. 电话拨打

支持 tel: 前缀直接拨打电话：

<template>
  <xtf-link href="tel:4001234567" text="客服电话" color="#ff6700" />
</template>

4. 自定义样式

通过 color 设置颜色，通过 showUnderLine 控制下划线：

<template>
  <view style="display: flex; gap: 24rpx">
    <xtf-link href="/pages/detail/index" text="默认链接" />
    <xtf-link href="/pages/detail/index" text="无下划线" :show-under-line="false" />
    <xtf-link href="/pages/detail/index" text="自定义颜色" color="#ff4d4f" />
  </view>
</template>

---

全部属性

属性	类型	默认值	作用描述	适用范围
href	String	''	链接地址	链接
text	String	''	链接文字	文字
color	String	'var(--xtf-text-link-color, #2563eb)'	文字颜色	样式
fontSize	String | Number	28	字号	样式
showUnderLine	Boolean | String	true	是否显示下划线	下划线
showArrow	Boolean	false	是否显示箭头	箭头
copyTips	String	'已复制链接，可前往浏览器打开'	复制提示	提示
openType	String	'navigateTo'	页面跳转方式	导航
disabled	Boolean	false	是否禁用	禁用
customClass	String	''	自定义类名	样式覆盖

---

事件

事件名称	触发时机	回调参数	参数说明
click	点击时触发	(event)	事件对象
open	打开链接时触发	({ href, mode })	链接和打开方式
copied	复制链接时触发	(href)	复制的链接
error	发生错误时触发	(error)	错误信息

---

插槽

插槽名称	作用域参数	说明
default	无	替换 text 或 href 的链接文字。

插槽使用示例

<template>
  <xtf-link href="https://example.com" @open="onOpen" @copied="onCopied">
    <text>访问</text>
    <text style="margin-left: 8rpx; font-weight: 700">LinkUI 官网</text>
  </xtf-link>
</template>

<script>
export default {
  methods: {
    onOpen({ href, mode }) {
      console.log('打开链接：', href, mode)
    },
    onCopied(href) {
      console.log('已复制链接：', href)
    }
  }
}
</script>

事件使用示例

<template>
  <xtf-link
    href="tel:4001234567"
    text="联系客服"
    @click="onClick"
    @open="onOpen"
    @error="onError"
  />
</template>

<script>
export default {
  methods: {
    onClick(event) {
      console.log('链接点击事件：', event.type)
    },
    onOpen({ href, mode }) {
      console.log('链接已打开：', href, mode)
    },
    onError(error) {
      console.error('链接处理失败：', error)
    }
  }
}
</script>

---

主题说明

• 默认颜色使用 --xtf-text-link-color CSS 变量
• 禁用状态透明度 0.45
• 箭头使用 xtf-icon 组件

如需全局调整主题，请在 xtf-config-provider 中覆盖上述 CSS 变量。