使用Vue.js和MJML写出响应式电子邮件

从上面可以看到，我们正在行使两个MJML组件：mj-body 和 mj-section。mj-body 界说了我们电子邮件的出发点，而 mj-section 界说了一个包括其他组件的节。

对付界说的每个部门，还界说了具有各自十六进制值的 background-color 属性。

我们电子邮件的此部门仅在中心横幅位置包括我们的公司/品牌名称：

<!-- 公司 Header --> 

<mj-section background-color="#f0f0f0"> 

  <mj-column> 

    <mj-text  font-style="bold" 

        font-size="20px" 

        align="center" 

        color="#626262"> 

    Central Park Cruise 

    </mj-text> 

  </mj-column> 

</mj-section> 

mj-column 组件是用来界说一个列。mj-text 组件用于我们的文本内容，并采纳字体样式、字体巨细、颜色等样式属性。

在本部门中，我们将有一个配景图片和一段笔墨，它们应代表我们的公司标语。我们还会有一个招呼性用语按钮，指向一个包括更多具体信息的页面。

要添加图片问题，你必需将该部门的配景颜色替代为 background-url。与第一个问题相似，你将不得不在垂直和程度偏向上居中安排文本，padding保持稳固。

按钮的 href 配置按钮的位置。为了让配景在列中泛起全宽，将列宽配置为600px，width="600px"。

我们的电子邮件的这一部门将只包括我们的公司/品牌名称的中心横幅位置。

<!-- Image Header --> 

<mj-section background-url="https://ca-times.brightspotcdn.com/dims4/default/2af165c/2147483647/strip/true/crop/2048x1363+0+0/resize/1440x958!/quality/90/?url=https%3A%2F%2F%2Fimg-4f561d37%2Fturbine%2Forl-disneyfantasy720120306062055" 

            background-size="cover" 

            background-repeat="no-repeat"> 

  <mj-column width="600px"> 

    <mj-text  align="center" 

             color="#fff" 

             font-size="40px" 

             font-family="Helvetica Neue">Christmas Discount</mj-text> 

    <mj-button background-color="#F63A4D" href="#"> 

      See Promotions 

    </mj-button> 

  </mj-column> 

</mj-section> 

要行使图像header，我们将向 jms -section 组件添加 background-url 属性，然后行使 background-size 和 background-repeat 属性配置图像的样式。

对付我们的标语文本块，我们行使 align 属性将文本在程度和垂直偏向上居中对齐。你还可以按照必要配置文本颜色，字体巨细，字系统列等。

招呼性用语按钮是行使 mj-button 组件实现的。background-color 属性应承我们指定按钮的配景致，然后行使 href 指定链接或页面的位置。

简介笔墨将由问题，主体笔墨和招呼性用语构成。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!