如何使用 Jeykll 防止 Vue 组件的属性名称小写或小写转换

Question

我在 Jekyll 项目中使用 Vue 组件 vue-carousel。除了通过属性进行控制外，一切正常，因为组件需要驼峰式大小写，但 Jekyll 将属性转换为小写。所以我的代码：

<carousel
  :perPage="1"
  :navigationEnabled="true"
  :navigationNextLabel="'❯'"
  :navigationPrevLabel="'❮'"
  :paginationEnabled="false"
  class="gr__carousel">

  {% for slide in include.content.slides %}
    {% include slide.html %}
  {% endfor %}
</carousel>

生成属性：

<div 
  class="VueCarousel gr__carousel" 
  perpage="1" 
  navigationenabled="true" 
  navigationnextlabel="❯" 
  navigationprevlabel="❮">
...
</div>

来自Why Jekyll convert my Capital words into lowercase in Categories

的一个解决方案

是编辑 Jekyll gem 但我想尽可能避免这种情况。对于这种情况还有其他解决方法吗？

Answer 1

Vue 允许用于传递道具的属性使用驼峰式或 kebab-case。因此，如果 Jekyll 导致 :perPage 出现问题，您可以改用 :per-page。

https://vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case

https://vuejs.org/v2/style-guide/#Prop-name-casing-strongly-recommended

Vue 将在创建组件实例时规范化这些 prop 名称，因此在实例上使用驼峰命名法始终可以访问它们。所以不管怎么传都是this.perPage

我不是 100% 确定，但我认为转换是在 normalizeProps:

中完成的

https://github.com/vuejs/vue/blob/3819af5c9dedde4d1ea81f9caa127e611c8752e3/src/core/util/options.js#L294

如何使用 Jeykll 防止 Vue 组件的属性名称小写或小写转换

How to Prevent downcase or lowercase conversion of attribute names for a Vue component with Jeykll

javascript

ruby

jekyll

vue.js