From 1c252d1a680729156701f4383e6d45c64b7de658 Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Thu, 27 Jun 2024 16:17:46 +0800
Subject: [PATCH] =?UTF-8?q?feat(html-element):=20=E8=B0=83=E6=95=B4=20brow?=
 =?UTF-8?q?ser=20canvas=20=E7=A4=BA=E4=BE=8B=E4=B8=BA=20a=20=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E7=A4=BA=E4=BE=8B=EF=BC=8C=E5=9B=A0=E4=B8=BA=E5=B7=B2?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20canvas=20=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    |  4 +-
 pages/tabBar/template.uvue                    |  6 +--
 .../browser-element/browser-element.uvue      | 48 +++++++++++++++++++
 3 files changed, 53 insertions(+), 5 deletions(-)
 create mode 100644 pages/template/browser-element/browser-element.uvue

diff --git a/pages.json b/pages.json
index 3a9eb28c..bcfb5ee9 100644
--- a/pages.json
+++ b/pages.json
@@ -1452,9 +1452,9 @@
     },
     // #ifdef WEB
     {
-      "path": "pages/template/browser-canvas/browser-canvas",
+      "path": "pages/template/browser-element/browser-element",
       "style": {
-        "navigationBarTitleText": "如何使用浏览器 canvas"
+        "navigationBarTitleText": "如何使用浏览器 element"
       }
     },
     // #endif
diff --git a/pages/tabBar/template.uvue b/pages/tabBar/template.uvue
index b91cb9e5..500277d0 100644
--- a/pages/tabBar/template.uvue
+++ b/pages/tabBar/template.uvue
@@ -203,9 +203,9 @@
           // #endif
           // #ifdef WEB
           {
-            id: 'browser-canvas',
-            url: 'browser-canvas',
-            name: '如何使用浏览器 canvas',
+            id: 'browser-element',
+            url: 'browser-element',
+            name: '如何使用浏览器 element',
             open: false,
             pages: [] as Page[],
           },
diff --git a/pages/template/browser-element/browser-element.uvue b/pages/template/browser-element/browser-element.uvue
new file mode 100644
index 00000000..ad5d1bfa
--- /dev/null
+++ b/pages/template/browser-element/browser-element.uvue
@@ -0,0 +1,48 @@
+<template>
+  <view class="page">
+    <page-head :title="title"></page-head>
+    <view class="page-body">
+      <!-- 如何使用浏览器内置 element -->
+      <text>使用浏览器内置的 a 标签</text>
+      <view ref="html-element-area"></view>
+
+      <text class="html-tips">HTML语法</text>
+      <text class="html-tips-link">{{linkTips}}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        title: '浏览器 element',
+        linkTips: `<a href="https://doc.dcloud.net.cn/uni-app-x/" target="uni-app-x">uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎</a>`
+      }
+    },
+    onReady() {
+      const element = this.$refs['html-element-area'] as HTMLElement;
+      const linkElement = document.createElement('a') as HTMLLinkElement;
+      linkElement.href = 'https://doc.dcloud.net.cn/uni-app-x/';
+      linkElement.innerText = 'uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎';
+      linkElement.setAttribute('target', "uni-app-x");
+      element.appendChild(linkElement);
+    }
+  }
+</script>
+
+<style>
+  .page {
+    padding: 15px;
+  }
+
+  .html-tips {
+    margin-top: 15px;
+  }
+
+  .html-tips-link {
+    font-size: 12px;
+    margin-top: 5px;
+    opacity: .7;
+  }
+</style>
-- 
GitLab