滑动继续阅读⇓

MailtoUI

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

点我测试
（这个 mailto 链接正在使用 MailtoUI）

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

文档资料

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，则必须将 defer 或 async=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 上使用，可以使用 npm 或 yarn 进行安装。

# 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

当然，当你通过 npm 或 yarn 安装 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 对象参数来设置选项。

支持以下选项：

选项	类型	默认	描述
autoClose	Boolean	true	如果设置为 true，则在单击电子邮件客户端选项时自动关闭 MailtoUI 模式。单击“复制”按钮时不起作用。
linkClass	String	mailtoui	附加到 MailtoUI 的 mailto 链接上使用的类名。
title	String	使用以下方式发送邮件	模态的标题。
buttonText1	String	在浏览器中打开Gmail	按钮 1 上显示的文本。
buttonText2	String	在浏览器中打开Outlook	按钮 2 上显示的文本。
buttonText3	String	在浏览器中打开Yahoo	按钮 3 上显示的文本。
buttonText4	String	默认电子邮件应用程序	按钮 4 上显示的文本。
buttonTextCopy	String	复制	“复制”按钮上显示的文本。
buttonTextCopyAction	String	复制成功！	单击“复制”后按钮上显示的文本。
buttonIcon1	String	[embedded]	按钮 1 图标 SVG 文件的 URL。
buttonIcon2	String	[embedded]	按钮 2 图标 SVG 文件的 URL。
buttonIcon3	String	[embedded]	按钮 3 图标 SVG 文件的 URL。
buttonIcon4	String	[embedded]	按钮 4 图标 SVG 文件的 URL。
buttonIconCopy	String	[embedded]	“复制”按钮图标 SVG 文件的 URL。
disableOnMobile	Boolean	true	如果设置为 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 链接中的 cc 和 bcc 字段。

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

可访问性和响应能力

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>

打赏赞

本文是否有帮助？

是否

站内搜索.

增强mailto链接的简单方法

MailtoUI

什么是MailtoUI？

设计灵感

安装

CDN

下载

在顶部加载 MailtoUI

NPM

用法

手动运行 MailtoUI

.HTML

JAVASCRIPT

选项

autoClose

linkClass

buttonText{#}

buttonIcon{#}

在运行时设置选项

自定义 CSS

事件

URI 方案

可访问性和响应能力

示例

文章标签

延伸阅读

相关推荐

站内搜索.

最新内容

热门内容

iTop黑色星期五特卖+限量免费礼品

有话要说？

发表评论.

实时关注

订阅我们.

拒绝垃圾

坚决抵制垃圾邮件，倡导健康网络环境！

访问我们

热门内容

最受欢迎内容.

Crème de la crème.

坚决抵制垃圾邮件，
倡导健康网络环境！