将 HTML 代码转换为 Vue 主页源码

<template>
  <div>
    <div class='Polaris-Stack Polaris-Stack--distributionEqualSpacing Polaris-Stack--alignmentCenter' style='margin-top: 1px;border-bottom: 1px #c1c1c1 solid;padding: 5px;'>
      <div class='Polaris-Stack__Item'>
        <div class='Polaris-Stack Polaris-Stack--spacingTight Polaris-Stack--alignmentCenter'>
          <div class='Polaris-Stack__Item'>
            <div class='sc-1ibht3l-0 uqRZq'></div>
            <div class='sc-1ibht3l-1 hIZedH'>
              <div class='Polaris-ButtonGroup'>
                <div class='Polaris-ButtonGroup__Item'>
                  <a data-polaris-unstyled='true' class='Polaris-Button' href='index.html'>
                    <span class='Polaris-Button__Content'>
                      <span class='Polaris-Button__Text'>Dashboard</span>
                    </span>
                  </a>
                </div>
                <div class='Polaris-ButtonGroup__Item'>
                  <a data-polaris-unstyled='true' class='Polaris-Button' href='zone.html'>
                    <span class='Polaris-Button__Content'>
                      <span class='Polaris-Button__Text'>Checkout Zones</span>
                    </span>
                  </a>
                </div>
                <div class='Polaris-ButtonGroup__Item'>
                  <a data-polaris-unstyled='true' class='Polaris-Button' href='funnel.html'>
                    <span class='Polaris-Button__Content'>
                      <span class='Polaris-Button__Text'>Funnels</span>
                    </span>
                  </a>
                </div>
                <div class='Polaris-ButtonGroup__Item'>
                  <a data-polaris-unstyled='true' class='Polaris-Button' href='help.html'>
                    <span class='Polaris-Button__Content'>
                      <span class='Polaris-Button__Text'>Help Center</span>
                    </span>
                  </a>
                </div>
                <div class='Polaris-ButtonGroup__Item'>
                  <div>
                    <button type='button' id='moreSeting' class='Polaris-Button' tabindex='0' aria-controls='Popover486' aria-owns='Popover486' aria-haspopup='true' aria-expanded='false'>
                      <span class='Polaris-Button__Content'>
                        <span class='Polaris-Button__Text'>More</span>
                        <span class='Polaris-Button__Icon'>
                          <span class='Polaris-Icon'>
                            <svg viewBox='0 0 20 20' class='Polaris-Icon__Svg' focusable='false' aria-hidden='true'>
                              <path d='M5 8l5 5 5-5z' fill-rule='evenodd'></path>
                            </svg>
                          </span>
                        </span>
                      </span>
                      <div id='dropdownContent' class='dropdown-content'>
                        <!-- 这里放下拉列表的内容 -->
                        <a href='payment.html'>Payment</a>
                        <a href='facebookPixel.html'>Pixel</a>
                      </div>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    mounted() {
      // 点击按钮时触发事件
      $('#moreSeting').click(function(e) {
        e.stopPropagation(); // 阻止事件冒泡，防止立即隐藏下拉列表
        var dropdown = $('#dropdownContent');
        dropdown.toggle();
      });

      // 点击页面其他地方时隐藏下拉列表
      $(document).click(function(e) {
        var dropdown = $('#dropdownContent');
        // 检查点击事件是否发生在下拉列表以外的区域
        if (!dropdown.is(e.target) && dropdown.has(e.target).length === 0) {
          dropdown.hide();
        }
      });
    },
  };
</script>