browser-element: 调整示例：包含和uni-app重名组件的情况

pages/template/browser-element/browser-element.uvue

@@ -2,12 +2,13 @@
   <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="title">使用浏览器内置的 a 标签</text>
+      <view>
+        <a href="https://doc.dcloud.net.cn/uni-app-x/" target="uni-app-x">uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎</a>
+      </view>
 
-      <text class="html-tips">HTML语法</text>
-      <text class="html-tips-link">{{linkTips}}</text>
+      <text class="title">使用浏览器内置的 button 标签(浏览器内置标签和 uni-app 重名的情况)</text>
+      <view ref="html-element-area"></view>
     </view>
   </view>
 </template>
@@ -16,17 +17,14 @@
   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>`
+        title: '浏览器 element'
       }
     },
     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);
+      const buttonElement = document.createElement('button') as HTMLButtonElement;
+      buttonElement.innerText = 'browser button';
+      element.appendChild(buttonElement);
     }
   }
 </script>
@@ -36,13 +34,7 @@
     padding: 15px;
   }
 
-  .html-tips {
+  .title {
     margin-top: 15px;
   }
-
-  .html-tips-link {
-    font-size: 12px;
-    margin-top: 5px;
-    opacity: .7;
-  }
 </style>