From 3b03f87a02458f719e2eb4bf112a13441b427d14 Mon Sep 17 00:00:00 2001
From: ‘chensiAb’ <‘chenchenco03@163.com’>
Date: Tue, 25 Mar 2025 13:54:34 +0800
Subject: [PATCH] Merge branch 'master' of ssh://dev.zhiheiot.com:29418/mob-components
---
_cursor.ai/layout.doc/anchor.doc/CAnchor.doc.md | 150 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 150 insertions(+), 0 deletions(-)
diff --git a/_cursor.ai/layout.doc/anchor.doc/CAnchor.doc.md b/_cursor.ai/layout.doc/anchor.doc/CAnchor.doc.md
new file mode 100644
index 0000000..8c287b4
--- /dev/null
+++ b/_cursor.ai/layout.doc/anchor.doc/CAnchor.doc.md
@@ -0,0 +1,150 @@
+# CAnchor 应用内超连接
+
+## 功能说明
+
+应用内超连接组件，用于在应用内部页面之间进行跳转，封装了 Taro 的页面跳转方法，支持多种跳转模式。组件可包裹任何内容作为点击触发区域。
+
+## 引用方式
+
+```js
+import CAnchor from '@components/layout/anchor';
+```
+
+## 组件参数
+
+- `href` (String，必选)：跳转目标路径，可以是页面路径，也可以是特殊值 'back'
+- `rel` (String，可选)：跳转方式，默认值为 'navigate'
+ - `navigate`：保留当前页面，跳转到应用内的某个页面（对应 Taro.navigateTo）
+ - `redirect`：关闭当前页面，跳转到应用内的某个页面（对应 Taro.redirectTo）
+
+## 使用示例
+
+### 基础用法
+
+```html
+<template>
+ <view class="page">
+ <CAnchor href="/pages/order/detail?id=12345">
+ <view class="link-text">查看订单详情</view>
+ </CAnchor>
+ </view>
+</template>
+
+<script>
+import CAnchor from '@components/layout/anchor';
+
+export default {
+ components: {
+ CAnchor
+ }
+}
+</script>
+```
+
+### 包裹图片或按钮
+
+```html
+<template>
+ <view class="page">
+ <!-- 包裹图片 -->
+ <CAnchor href="/pages/product/detail?id=6789">
+ <image
+ src="/static/images/product.jpg"
+ mode="aspectFill"
+ class="product-image"
+ />
+ </CAnchor>
+
+ <!-- 包裹按钮 -->
+ <CAnchor href="/pages/cart/index">
+ <AtButton type="primary">
+ 去购物车结算
+ </AtButton>
+ </CAnchor>
+ </view>
+</template>
+
+<script>
+import CAnchor from '@components/layout/anchor';
+import { AtButton } from 'taro-ui-vue';
+
+export default {
+ components: {
+ CAnchor,
+ AtButton
+ }
+}
+</script>
+```
+
+### 返回上一页
+
+```html
+<template>
+ <view class="page">
+ <CAnchor href="back">
+ <view class="back-link">
+ <AtIcon value="chevron-left" size="16" />
+ <text>返回上一页</text>
+ </view>
+ </CAnchor>
+ </view>
+</template>
+
+<script>
+import CAnchor from '@components/layout/anchor';
+import { AtIcon } from 'taro-ui-vue';
+
+export default {
+ components: {
+ CAnchor,
+ AtIcon
+ }
+}
+</script>
+
+<style>
+.back-link {
+ display: flex;
+ align-items: center;
+}
+</style>
+```
+
+### 重定向模式
+
+```html
+<template>
+ <view class="page">
+ <CAnchor
+ href="/pages/login/index"
+ rel="redirect"
+ >
+ <view class="redirect-link">
+ 请先登录后再操作
+ </view>
+ </CAnchor>
+ </view>
+</template>
+
+<script>
+import CAnchor from '@components/layout/anchor';
+
+export default {
+ components: {
+ CAnchor
+ }
+}
+</script>
+```
+
+## 注意事项
+
+1. 组件通过默认插槽提供内容，可以包裹任何元素作为点击区域
+2. href 参数必须提供有效的页面路径，否则点击不会触发任何操作
+3. 当 href 设置为 'back' 时，等同于调用 Taro.navigateBack() 方法
+4. 页面路径应该以 '/' 开头，例如 '/pages/index/index'
+5. 可以在路径中添加查询参数，例如 '/pages/detail?id=123'
+6. 重定向模式会关闭当前页面，无法通过返回按钮回到当前页面
+
+<!-- 作者：Tevin -->
\ No newline at end of file
--
Gitblit v1.9.1