滑动继续阅读⇓

MailtoUI

一种通过便捷的用户界面增强mailto链接的简单方法。

点我测试
(这个 mailto 链接正在使用 MailtoUI)

<a class="mailtoui" href="mailto:mario@teclaworks.com">点我测试</a>

文档资料

什么是MailtoUI?

MailtoUI 是一个开源的 JavaScript 库,可通过方便的用户界面增强你的 mailto 链接。它使你的用户可以灵活地使用基于浏览器的电子邮件客户端 其默认的本地电子邮件应用程序撰写新邮件。MailtoUI 是用 vanilla JavaScript 编写的,因此它很好而且精简,无需担心依赖关系。它适用于几乎所有设备和适用于桌面和移动设备的现代浏览器。

MailtoUI 非常适合静态站点或你不想花时间设置“联系我们”表单解决方案的任何其他站点。只需将 MailtoUI 脚本放入你要使用它的任何页面,启用您的链接,你的用户将获得更好、更灵活的与你的站点交互的体验。

设计灵感

我们都在某个时候做过。你访问一个网站,你想联系某人。你单击 mailto 链接,只会打开你(很可能)不使用的默认本地电子邮件应用程序。然后你必须关闭电子邮件应用程序。返回站点,复制电子邮件地址,转到基于浏览器的电子邮件客户端,撰写一封新电子邮件,最后粘贴电子邮件地址…… 一定有更好的方法!

一种通过便捷的用户界面增强mailto链接的简单方法。

安装

CDN

加载 MailtoUI 的最简单方法是通过 CDN 将其拉入你的页面。将它添加到页面底部,就在结束 </body> 标记之前。

<body>
    ...
    ...
    <script src="https://cdn.jsdelivr.net/npm/mailtoui@1.0.3/dist/mailtoui-min.js"></script>
</body>

下载

或者,你可以下载mailtoui-min.js并将其加载到页面底部,就在结束 </body> 标签之前。

<body>
    ...
    ...
    <script src="your/path/to/mailtoui-min.js"></script>
</body>

在顶部加载 MailtoUI

如果要在页面顶部加载 MailtoUI,则必须将 deferasync=false 属性添加到脚本标签中。任何一个都会推迟执行 MailtoUI,直到页面被解析之后。

<head>
    ...
    ...
    <script src="your/path/to/mailtoui-min.js" defer></script>

    <!-- 或 -->

    <script src="your/path/to/mailtoui-min.js" async=false></script>
</head>
<body>

NPM

MailtoUI 也可以在 npm 上使用,可以使用 npmyarn 进行安装。

# install using npm
npm i mailtoui@1.0.3

# or using yarn
yarn add mailtoui@1.0.3

用法

通过 <script> 标签将MailtoUI添加到页面后,你需要做的就是将页面上的mailto链接附加到MailtoUI。你只需将 mailtoui 类添加到每个 mailto 链接即可做到这一点。

<a class="mailtoui" href="mailto:tony.stark@example.com">Tony</a>

<a class="mailtoui" href="mailto:pepper.potts@example.com">Pepper</a>

就是这样。你的邮件到链接现在可以使用 MailtoUI。保存你的工作并重新加载页面。MailtoUI 将在页面加载时自动运行,识别每个 mailto 链接,并在单击 mailto 链接时呈现 UI。

万一 mailtoui 类与你自己的 CSS 代码发生冲突,有一种简单的方法可以更改它,如选项部分所述。

手动运行 MailtoUI

当然,当你通过 npmyarn 安装 MailtoUI 时,它无法在页面加载时自行运行,就像你通过 <script> 标签安装它时那样。MailtoUI 支持 ES5 require 加载模块的方法。你需要将 MailtoUI 加载到你的脚本中,并在 DOM 准备就绪后在适当的时间手动运行它。例如,对于 Vue.js,它位于 mounted() 方法中,如下所示。

.HTML
<div id="app">
    <a class="mailtoui" :href="mailtoHref">{{ email }}</a>
</div>
JAVASCRIPT
const Vue = require('path/to/your/node_modules/vue/dist/vue.js');
const MailtoUI = require('path/to/your/node_modules/mailtoui/dist/mailtoui-min.js');

var app = new Vue({
    el: '#app',

    data: {
        email: 'supergirl@example.com',
    },

    computed: {
        mailtoHref: function() {
            return 'mailto:' + this.email;
        }
    },

    mounted() {
        MailtoUI.run(); // <--- Run MailtoUI manually
    },
});

试试点击右侧邮箱地址→:supergirl@example.com

选项

选项允许你轻松更改 MailtoUI 的行为和外观以满足你的需求。

可以通过 <script> 标签中带有 JSON 字符串的 data-options 属性 通过传递给 MailtoUI run() 方法的 JavaScript 对象参数来设置选项。

支持以下选项:

选项类型默认描述
autoCloseBooleantrue如果设置为 true,则在单击电子邮件客户端选项时自动关闭 MailtoUI 模式。单击“复制”按钮时不起作用。
linkClassStringmailtoui附加到 MailtoUI 的 mailto 链接上使用的类名。
titleString使用以下方式发送邮件模态的标题。
buttonText1String在浏览器中打开Gmail按钮 1 上显示的文本。
buttonText2String在浏览器中打开Outlook按钮 2 上显示的文本。
buttonText3String在浏览器中打开Yahoo按钮 3 上显示的文本。
buttonText4String默认电子邮件应用程序按钮 4 上显示的文本。
buttonTextCopyString复制“复制”按钮上显示的文本。
buttonTextCopyActionString复制成功!单击“复制”后按钮上显示的文本。
buttonIcon1String[embedded]按钮 1 图标 SVG 文件的 URL。
buttonIcon2String[embedded]按钮 2 图标 SVG 文件的 URL。
buttonIcon3String[embedded]按钮 3 图标 SVG 文件的 URL。
buttonIcon4String[embedded]按钮 4 图标 SVG 文件的 URL。
buttonIconCopyString[embedded]“复制”按钮图标 SVG 文件的 URL。
disableOnMobileBooleantrue如果设置为 true,则会在移动设备(包括平板电脑)上禁用 MailtoUI。

autoClose

如果设置 autoClose 为 false,则在单击任何邮件客户端选项后,MailtoUI 界面将保持开启状态。

<body>
    ...
    ...
    <script src="mailtoui-min.js" data-options='{ "autoClose": false }'></script>
</body>

linkClass

使用 linkClass 选项更改用于将 mailto 链接附加到 MailtoUI 的类。在默认的 mailtoui 类与你自己的 CSS 代码冲突的不太可能发生的情况下,这会很方便。

<body>
    <a class="superhero" href="mailto:thor@example.com">Thor</a>
    ...
    ...
    <script src="mailtoui-min.js" data-options='{ "linkClass": "superhero" }'></script>
</body>

如果你设置自定义链接类,请确保在你的 mailto 链接上使用相同的类。例如,如果你将 linkClass 选项设置为 superhero,你的 mailto 链接必须包含类 superhero,如上所示。

buttonText{#}

这些 buttonText{#} 选项接受一个字符串作为显示在按钮上的文本。例如,要更改“Outlook”按钮上显示的文本,请使用 buttonText2 选项。

<body>
    ...
    ...
    <script src="mailtoui-min.js" data-options='{ "buttonText2": "Outlook" }'></script>
</body>

buttonIcon{#}

这些 buttonIcon{#} 选项接受一个 URL,该 URL 指向一个有效的 SVG 图标文件,用作按钮图标。例如,如果要更改复制按钮上使用的图标,请使用选项 buttonIconCopy

<body>
    ...
    ...
    <script src="mailtoui-min.js" data-options='{ "buttonIconCopy": "/path/to/your/other-icon.svg" }'></script>
</body>

URL 可以是绝对的或相对的。绝对 URL 必须在你自己的域中。尝试使用托管在不同域上的 SVG 图标文件将导致违反 CORS 策略,并且不会起作用。换句话说,你必须托管自己的 SVG 图标文件。

在运行时设置选项

手动运行 MailtoUI 时,可以通过将 JavaScript 对象参数传递给 MailtoUI run() 方法来设置上述任何选项。

const MailtoUI = require('path/to/your/node_modules/mailtoui/dist/mailtoui-min.js');

MailtoUI.run({ autoClose: false, linkClass: 'superhero' });

自定义 CSS

你可以轻松更改 MailtoUI 的外观以匹配你网站的品牌。只需在你自己的CSS代码中更新一些MailtoUI类即可。下面是一个深色主题界面的示例。

自己试试吧!

/*深色主题*/

.mailtoui-modal {
    background-color: rgba(250,250,250,0.5);
    color: #fff;
}

.mailtoui-modal-head {
    background-color: #21262C;
}

.mailtoui-modal-title {
    color: #fff;
}

.mailtoui-modal-close:focus,
.mailtoui-modal-close:hover {
    color: #fff;
}

.mailtoui-modal-body {
    background-color: #373b41;
}

.mailtoui-button:focus .mailtoui-button-content {
    background-color: #D8DCDF;
    color: #333;
}

.mailtoui-button-content,
.mailtoui-button-copy {
    background-color: #63676b;
    color: #fff;
}

.mailtoui-button-content:hover,
.mailtoui-button-content:focus,
.mailtoui-button-copy:hover,
.mailtoui-button-copy:focus {
    background-color: #D8DCDF;
    color: #333;
}

.mailtoui-button-copy-clicked,
.mailtoui-button-copy-clicked:hover,
.mailtoui-button-copy-clicked:focus {
    background-color: #1F9D55;
    color: #fff;
}

.mailtoui-email-address {
    background-color: #909295;
    color: #21262c;
}

/*结束深色主题*/

链接类用作默认 MailtoUI CSS 中的前缀。如果你通过 linkClass 选项设置自定义链接类,则必须将其用作覆盖 CSS 中的前缀。例如,如果 linkClass 设置为 superhero,则上面代码中的所有类都应以 .superhero- 而不是 .mailtoui- 开头。

事件

MailtoUI 会启动一些特定于 MailtoUI 的事件,以便更轻松地与代码集成。这些可用于在用户与界面交互时执行各种操作。

事件元素ID描述
开启mailtoui-modal模式已开启。
关闭mailtoui-modal模式已关闭。
撰写mailtoui-button-1 mailtoui-button-2 mailtoui-button-3 mailtoui-button-4已单击邮件客户端选项。
复制mailtoui-email-address邮件地址已复制到剪贴板。

例如,如果你想在单击“Gmail”按钮时执行某些操作,你可以将事件侦听器附加到该按钮以侦听 compose 事件。像这样:

var gmail = window.document.getElementById('mailtoui-button-1');

gmail.addEventListener(
    'compose',
    function(event) {
        // do your thing...
    },
    false
);

如果你通过linkClass 选项设置自定义类名,请记住在传递给 getElementById() 的 Id 中将 mailtoui 替换为你的自定义类名。

URI 方案

MailtoUI 支持最常用的 mailto 标头字段(mailto URI 方案),这些字段允许你指定除电子邮件地址之外的其他详细信息。这意味着 MailtoUI 与你页面上可能已经具有的具有以下任何参数的 mailto 链接兼容:

  • subject
  • cc*
  • bcc*
  • body

这些标头字段必须符合 RFC 6068 中指定的 mailto URI 方案编码要求。有关mailto链接的更多信息,请查看MDN的电子邮件链接

* 遗憾的是,Outlook 当前不支持 mailto 链接中的 ccbcc 字段。

有关具有这些参数的实时示例,请查看示例部分。

可访问性和响应能力

MailtoUI 在构建时考虑了可访问性和响应性。在添加这些小而重要的功能时已经非常小心,以确保它可以访问并在几乎所有屏幕尺寸下都能正确呈现:

  • 显示模态存在的警报屏幕阅读器
  • 关闭时提醒屏幕阅读器没有模态
  • 可以使用 Esc 键关闭模态
  • 可以通过单击叠加层关闭模态
  • 用户只能在显示时在模式内按 Tab 键
  • 默认样式中使用的高对比度颜色
  • 模态的大小根据屏幕尺寸自动调整
  • 如果屏幕大小强制其内容超出视图,则模式可滚动
  • 当模式关闭时,焦点返回到页面上最后一个焦点元素

示例

以下是附加到 MailtoUI 的 mailto 链接的一些工作示例。

带主题

<a class="mailtoui" href="mailto:user1@example.com?subject=Hi%20there!">带主题</a>

带抄送

<a class="mailtoui" href="mailto:user2@example.com?cc=user3@example.com">带抄送</a>

使用多个抄送 – 你可以使用抄送执行相同的操作。

<a class="mailtoui" href="mailto:user3@example.com?bcc=user1@example.com,user5@example.com">带多个抄送</a>

带正文

<a class="mailtoui" href="mailto:user4@example.com?body=Hope%20you're%20doing%20well.">带正文</a>

带所有字段

<a class="mailtoui" href="mailto:user5@example.com,user2@example.com?subject=Winter%20is%20coming&cc=user3@example.com,user4@example.com&bcc=user1@example.com&body=Fear%20cuts%20deeper%20than%20swords.">带所有字段</a>

不带字段 – 是的,这是一个有效且极其简单的 mailto 链接 ?

<a class="mailtoui" href="mailto:">不带字段</a>
本文是否有帮助?