Vue.js和MJML创建响应式电子邮件

j-column 组件是用来定义一个列。mj-text 组件用于我们的文本内容，并采取字体样式、字体大小、颜色等样式属性。

/ 图片 Header /

在本部分中，我们将有一个背景图片和一段文字，它们应代表我们的公司口号。我们还会有一个号召性用语按钮，指向一个包含更多详细信息的页面。

要添加图片标题，你必须将该部分的背景颜色替换为 background-url。与第一个标题相似，你将不得不在垂直和水平方向上居中放置文本，padding保持不变。

按钮的 href 设置按钮的位置。为了让背景在列中呈现全宽，将列宽设置为600px，width="600px"。

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

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

对于我们的口号文本块，我们使用 align 属性将文本在水平和垂直方向上居中对齐。你还可以根据需要设置文本颜色，字体大小，字体系列等。

号召性用语按钮是使用 mj-button 组件实现的。background-color 属性允许我们指定按钮的背景色，然后使用 href 指定链接或页面的位置。

/ Email件介绍 /

简介文字将由标题，主体文字和号召性用语组成。侧的第一列使用 mj-image 组件指定要使用的图像。该图像可以是本地文件，也可以是远程托管的图像(在我们的情况下是这样)。

右侧的第二列包含两个文本块，一个用于我们的标题，另一个用于主体文本。

/ 图标 /

图标部分将分为三列。你还可以添加更多内容，具体取决于你希望电子邮件的外观。MJML带有 mj-social 组件，可轻松用于显示社交媒体图标。在我们的电子邮件中，我们使用了 Twitter mj-social-element。

全部放在一起

至此，我们已经实现了所有部分，完整的 email.mjml 应该如下所示：

（编辑：大同站长网）

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