Kendo UI致力于新的開發，來滿足不斷變化的需求。Kendo UI for Vue使用旨在提高性能和豐富用戶體驗的Vue組件，幫助開發人員構建下一代應用程序。它是為Vue技術框架提供可用的Kendo UI組件，以便更快地構建更好的Vue應用程序。

聯系表單用于在網站上發送和接收用戶信息的表單。EmailJS是一個強大的庫，我們可以用它來創建聯系表單，從而只使用客戶端技術發送消息。由此我們可以整合其他電子郵件服務，并使用自動回復功能。在本文中，我們將學習什么是EmailJS，以及如何使用Vue.js發送和接收電子郵件，以及為大家介紹如何使用響應式UI組件Kendo UI for Vue輕松創建聯系表單。

Kendo UI 最新版下載

Telerik_KendoUI產品技術交流群：726377843    歡迎一起進群討論

先決條件

開發者必須具備使用Vue的基本知識，并且熟悉創建Vue項目。

EmailJS簡介

EmailJS 是我們用于僅使用客戶端技術發送郵件的庫。在您的項目中實現 Email JS 非常簡單，因為它不需要任何服務器。EmailJS 使您可以訪問項目中一些您喜歡的電子郵件服務，例如 Gmail、Yahoo、iCloud 等。

設置 EmailJS 帳戶

為了使用 EmailJS，我們需要創建一個帳戶。為此，請訪問該并注冊一個帳戶。

創建帳戶后，我們將被重定向到我們的管理儀表板，我們可以在其中創建電子郵件模板或選擇作為首選的電子郵件服務。本文首選電子郵件服務，并選擇 Gmail 作為我們的服務。

選擇 Gmail 后會收到一條消息，要求我們鏈接到想要使用的帳戶來接收消息。

賬戶連接完成后，接下來請點擊“創建服務”。

創建電子郵件模板

電子郵件模板是我們完成電子郵件服務創建后的下一步。EmailJS 的一個顯著特點是用戶可以調整電子郵件模板以適應其喜好。讓我們看看如何在下面的例子中做到這一點。

首先，我們將前往儀表板并從左側菜單中選擇“電子郵件模板”。

上圖顯示了電子郵件模板示例。我們可以快速修改和個性化電子郵件模板以滿足需要。

自定義電子郵件模板后，下一步是保存更改并單擊“測試”按鈕以查看最終結果。

這便是使用 EmailJS 儀表板發送電子郵件的最終結果。

在 Vue 項目中安裝 EmailJS

要在 Vue 項目中安裝 EmailJS 庫，我們將使用以下命令：

npm install emailjs-com --save

安裝我們的庫后，我們將庫導入到腳本標簽內的組件文件中：

import emailjs from 'emailjs-com'

創建聯系表

安裝我們的庫后，我們將使用 Kendo UI for Vue 創建我們的聯系表單，這是一個廣泛的 UI 組件庫。為此，我們將安裝我們的表單包：

npm install --save @progress/kendo-vue-inputs @progress/kendo-vue-intl @progress/kendo-licensing

安裝軟件包后，我們將需要的表單輸入導入到表單組件中的腳本標簽中：

import { Input } from '@progress/kendo-vue-inputs';

下面是代碼導入后的樣子：

<script>
import { Input, TextArea } from "@progress/kendo-vue-inputs";
import { Button } from "@progress/kendo-vue-buttons";
export default { components: {
KInput: Input,
KButton: Button,
KTtextarea: TextArea,
},
};
</script>

接下來，創建聯系表。

<template>
<div>
<card class="card-section" style="width: 450px; margin: auto">
<h1>Contact Form</h1>
<form ref="values" @submit.prevent="sendEmail">
<div class="form-group">
<KInput
class="form-input"
:style="{ width: '290px' }"
name="name"
v-model="user_name"
placeholder="Name"
></KInput>
</div>
<div class="form-group">
<KInput
class="form-input"
:style="{ width: '290px' }"
name="email"
v-model="user_email"
placeholder="email address"
></KInput>
</div>
<div class="form-group">
<kTextarea
class="form-input"
:style="{ width: '290px' }"
name="message"
v-model="user_message"
placeholder="Message"
:rows="4"
/>
</div>
<div class="example-col">
<kButton
:style="{ width: '100px' }"
id="submit-btn"
>Submit form</kButton
>
</div>
</form>
</card>
</div>
</template>

注意： Kendo UI for Vue 是一個商業 UI 組件庫，作為其中的一部分，您在 Vue 項目中使用這些組件時需要提供許可證密鑰。您可以通過免費試用或擁有商業許可證來獲取許可證密鑰。

通過聯系表接收消息

在前面的示例中，我們看到了如何通過 EmailJS 儀表板向某人發送電子郵件。在這個例子中，我們將看到如何通過我們的聯系表單接收消息。

為此，我們將創建返回三個輸入（姓名、電子郵件和消息）的數據和一個具有名為“sendEmail”的函數的方法。此函數將包含我們的數據、TemplateID、ServiceID 和公鑰。

<script>
import emailjs from 'emailjs-com';
import {
Card,
} from "@progress/kendo-vue-layout";
// ES2015 module syntax
import { Input, TextArea } from "@progress/kendo-vue-inputs";
import "@progress/kendo-theme-default";
import { Button } from "@progress/kendo-vue-buttons";
export default {
name: "CardComponent",
components: {
card: Card,
KInput: Input,
"k-textarea": TextArea,
kbutton: Button,
},
data() {
return {
user_name: "",
user_email: "",
user_message: "",
};
},
methods: {
sendEmail() {
emailjs
.sendForm(
"Service ID",
"Template ID",
"Public Key"
)
.then(
(result) => {
console.log(
"You have successfully submitted your message",
result.text
);
},
(error) => {
console.log(
"This form failed to submit, please kindly check your internet connection",
error.text
);
}
);
},
},
};
</script>

將服務密鑰、模板 ID 和公鑰的空間替換為我們創建的空間：

.sendForm(
"Service ID",
"Template ID",
"Public Key"
)

總的來說，用于發送和接收電子郵件的易于使用的 JavaScript 庫之一稱為 EmailJS。您還可以對某些功能進行個性化設置，例如自動回復選項。我們在這篇文章中學習了如何使用 Vue 和 EmailJS 發送和接收電子郵件，還使用Kendo UI for Vue 輕松創建我們的聯系表單。