使用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 指定链接或页面的位置。

简介文字将由标题，主体文字和号召性用语组成。

（编辑：晋中站长网）

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