<template>
  <view class="page">
    <page-head :title="title"></page-head>
    <view class="page-body">
      <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="title">使用浏览器内置的 button 标签(浏览器内置标签和 uni-app 重名的情况)</text>
      <view ref="html-element-area"></view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        title: '浏览器 element'
      }
    },
    onReady() {
      const element = this.$refs['html-element-area'] as HTMLElement;
      const buttonElement = document.createElement('button') as HTMLButtonElement;
      buttonElement.innerText = 'browser button';
      element.appendChild(buttonElement);
    }
  }
</script>

<style>
  .page {
    padding: 15px;
  }

  .title {
    margin-top: 15px;
  }
</style>