无定制化状态

使用自定义元素mf-keyword-ranking

代码

html

  <mf-keyword-ranking></mf-keyword-ranking>

渲染结果

设置显示语言

将属性lang设置到自定义元素的上层元素或自定义元素本身(也可以在body标签设置)。

代码

html

  <mf-keyword-ranking lang="zh"></mf-keyword-ranking>

渲染结果

用CSS自定义标题

代码

添加CSS

  <style>
  /* 为方便理解设置变化部分背景色为粉红，实际代码中不需要 */
  .head-bycss .mf_finder_keywordranking_head {
    background-color: pink;
  }
  /* 将标题内容从默认值(Keyword Ranking)更改为“相关词排名” */
  .head-bycss .mf_finder_keywordranking_head:before {
    content: "相关词排名";
  }
  </style>

html

  <mf-keyword-ranking class="head-bycss"></mf-keyword-ranking>

渲染结果

用属性“head-text”指定标题文本

代码

添加CSS

  <style>
  /* 为方便理解设置变化部分背景色为粉红，实际代码中不需要 */
  .my-head-text .mf_finder_keywordranking_head {
    background-color: pink;
  }
  /* 设置content为空 */
  .my-head-text .mf_finder_keywordranking_head:before {
    content: "";
  }
  </style>

html

  <mf-keyword-ranking class="my-head-text" head-text="热门关键词"></mf-keyword-ranking>

渲染结果

自定义标题的内容

代码

添加CSS

  <style>
  /* 为方便理解设置变化部分背景色为粉红，实际代码中不需要 */
  .my-head-slot .my-dd-head {
    background-color: pink;
  }
  </style>

html

  <mf-keyword-ranking class="my-head-slot">
    <template slot="head">
      <!-- 给标题前面加一个icon -->
      <header class="my-dd-head">
        <img src="//c.marsflag.com/mf/img/mf_pwdb.gif">关键词排名
      </header>
    </template>
  </mf-keyword-ranking>

渲染结果