标签转换

如果想将模板标签做个简单转换，比如换个标签名等，可以使用构建配置 component.template.transformTags 配置。

>= 0.4 版本

transformTags配置方式：以 key-value 形式添加

  • key: 被转的标签名，类型为：string
  • value: 根据情况可配置为：string|Object| 类型
    • 取值为 string 时，表示转为的 tag
    • 取值为 Object 时，Object 的 key 可为：
      • tag: 转为的 tag,
      • class: class 需额外附加 classname，classname 的样式需自行定义；
      • 其他属性: 需替换的属性名

配置示例：小程序中 写 html 标签

  1. {
  2.     component: {
  3.         template: {
  4.             transformTags: {
  5.                 div: 'view',
  6.                 p: 'view',
  7.                 ul: 'view',
  8.                 ol: 'view',
  9.                 li: 'view',
  10.                 // span 会被转为 view 标签，若想让它拥有 inline 属性，可通过 配置 class 值如：okam-inline 进行 样式属性控制
  11.                 // 注：okam-inline 样式 需自行在样式文件(app.css)中定义
  12.                 // 最终 view 标签 class 将额外添加 okam-inline 值，而不是覆盖
  13.                 span: {
  14.                     tag: 'view',
  15.                     class: 'okam-inline'
  16.                 },
  17.                 h1: 'view',
  18.                 h2: 'view',
  19.                 h3: 'view',
  20.                 h4: 'view',
  21.                 h5: 'view',
  22.                 h6: 'view',
  23.                 article: 'view',
  24.                 section: 'view',
  25.                 aside: 'view',
  26.                 nav: 'view',
  27.                 header: 'view',
  28.                 footer: 'view',
  30.                 // Object
  31.                 /*
  32.                     * eg
  33.                     * <a class="home-link" href='xxx'></a>
  34.                     * 转为:
  35.                     * <navigator class="okam-inline home-link" url='xxx'></navigator>
  36.                     */
  37.                 a: {
  38.                     tag: 'navigator',
  39.                     class: 'okam-inline',
  40.                     href: 'url'
  41.                 },
  43.                 // string
  44.                 img: 'image'
  45.             }
  46.         }
  47.     }
  48. }

< 0.4 版本

建议升级更换至 0.4 以上，< 0.4 升级到 0.4及以上

transformTags配置方式：以 key-value 形式添加

  • key: 要转成的标签名
  • value: 根据情况可配置为：string|Object|Array 类型
    • 单标签配置：string、Object 类型
      • 取值为 string 时，表示被转的 tag
      • 取值为 Object 时，Object 的 key 可为：
        • tag: 被转的 tag, 一般为 HTML 标签，
        • class: class 需额外附加 classname，classname 的样式需自行定义；
        • 其他属性: 需替换的属性名
    • 多标签配置：Array类型
      • Array 内部可为：string、Object类型，即 单标签配置项 取值

配置示例：小程序中 写 html 标签

  1. {
  2.     component: {
  3.         template: {
  4.             transformTags: {
  5.                 // Array
  6.                 view: [
  7.                     {
  8.                         tag: 'span',
  9.                         // span 会被转为 view 标签，若想让它拥有 inline 属性，可通过 配置 class 值如：okam-inline 进行 样式属性控制
  10.                         // 注：okam-inline 样式 需自行在样式文件(app.css)中定义
  11.                         // 最终 view 标签 class 将额外添加 okam-inline 值，而不是覆盖
  12.                         class: 'okam-inline'
  13.                     },
  14.                     'div', 'p',
  15.                     'ul', 'ol', 'li',
  16.                     'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
  17.                     'article', 'section', 'aside', 'nav', 'header', 'footer'
  18.                 ],
  20.                 // Object
  21.                 /*
  22.                     * eg
  23.                     * <a class="home-link" href='xxx'></a>
  24.                     * 转为:
  25.                     * <navigator class="okam-inline home-link" url='xxx'></navigator>
  26.                     */
  27.                 navigator: {
  28.                     tag: 'a',
  29.                     class: 'okam-inline',
  30.                     href: 'url'
  31.                 },
  33.                 // string
  34.                 image: 'img'
  35.             }
  36.         }
  37.     }
  38. }

0.4 以下 与 0.4及以上 之间的配置兼容切换问题

0.4及以上想继续使用之前的调用方式，或 0.4以下升级为0.4及以上，可使用 okam 提供的 reverseTagMap 进行转换

  1. const reverseTagMap = require('okam-build').reverseTagMap;
  3. {
  4.     component: {
  5.         template: {
  6.             transformTags: reverseTagMap({
  7.                 // Array
  8.                 view: [
  9.                     {
  10.                         tag: 'span',
  11.                         // span 会被转为 view 标签，若想让它拥有 inline 属性，可通过 配置 class 值如：okam-inline 进行 样式属性控制
  12.                         // 注：okam-inline 样式 需自行在样式文件(app.css)中定义
  13.                         // 最终 view 标签 class 将额外添加 okam-inline 值，而不是覆盖
  14.                         class: 'okam-inline'
  15.                     },
  16.                     'div', 'p',
  17.                     'ul', 'ol', 'li',
  18.                     'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
  19.                     'article', 'section', 'aside', 'nav', 'header', 'footer'
  20.                 ],
  22.                 // Object
  23.                 /*
  24.                     * eg
  25.                     * <a class="home-link" href='xxx'></a>
  26.                     * 转为:
  27.                     * <navigator class="okam-inline home-link" url='xxx'></navigator>
  28.                     */
  29.                 navigator: {
  30.                     tag: 'a',
  31.                     class: 'okam-inline',
  32.                     href: 'url'
  33.                 },
  35.                 // string
  36.                 image: 'img'
  37.             }
  38.         })
  39.     }
  40. }

注意： 默认不提供 标签转换支持，使用者可根据情况自定义配置。 目前转换只是模板层面转换，对于样式里存在 HTML 标签选择器是不会做相应的转换，因此样式选择器不允许使用 HTML 的标签选择器，请使用 class 或 内联 style。

  1. <template>
  2.     <ul class="project-list">
  3.         <li class="project-item" for="item in projectList">
  4.             {{item.name}}
  5.         </li>
  6.     </ul>
  7. </template>
  8. <script>
  9. // ...
  10. </script>
  11. <style>
  12. .project-list li { // 样式选择器包含 HTML 标签 li，不支持
  13.     padding: 10px 0;
  14. }
  16. .project-list .project-item { // 使用 class 选择器，支持
  17.     padding: 10px 0;
  18. }
  19. </style>