Vue custom alertTip component, easy to use Go email
Take a look at custom components (surprise, it’s a soap opera!) . Let’s define a pop-up component called alertTig, and then share a recent study of the use of email in Go
First, Vue defines the alertTip component
Effect of early and look
Let’s take a rough look at it first.
Component development
Under the Components directory of the Vue project, create a new common directory and create an Alerttip. vue. Now design a common component.
<template>
<div class="alert_container"</div> </template>Copy the codePut another props(for receiving values from outside).
<script>
exportDefault {props:[] // here to define what the outside world will give him} </script>Copy the code- A data-driven interface, data attributes, not just that
data, as well asprops,computed(Calculate attributes), etc.propsIs the value passed from the parent to the child. Because of theprops, our universal components can achieve its universal. By passing in the data that needs to be changed, we can display the data that needs to be changed according to a common structure. So you can say,propsThe parameters are only present because they are needed. dataIn this generic component, it’s better to have too much data. Why? Because, as a child component (or as a generic component), it does some generic business capability where changes are passed on from the outside.dataThe data item, which is not designed for child components, is more of a private data item. Page level componentsdataMore, because there’s more private data. In a nutshell,propsData from the outside world,dataData in is private data.
So I’m going to continue my vue hereLet’s go. Here’s the previous code.
App. Vue
- We need a generic feature for Alert, ready to introduce the components we’ll be writing
import AlertTip from './components/common/alertTip'; // Put generic components under components, business components outside.Copy the code- Register components in Components:
Components: {// component declaration // components registered to use, to register this is the external import of AlertTip'alert-tip': AlertTip
}
Copy the code‘alert-tip’ is the name of our custom tag to write on the page. At compile time, this is where you look for the component to parse. The simple alertTip we wrote earlier in Alerttip.vue is displayed. Successful introduction, then app. vue, write a bit:
- After the introduction is complete, consider that our alert only appears when, for example, a button is clicked, it is invisible. use
v-if
<template>
<div id="app">
<alert-tip v-if="showAlert"/>
</div>
</template>
<script>
export default {
data() {
return {
showAlert :false}}, components: {// component declaration // components registered to use, to register this is the external import AlertTip'alert-tip': AlertTip
}
</script>
Copy the codeAt this point, the alertTip is gone from our page. So how do you make it pop up when you click on it? Simulate this with a <button>
<template>
<div id="app">
<alert-tip v-if="showAlert"/ > <! -- How to make him appear? --> <button @click="showCancelAlert"</button> </div> </template> <script>export default {
data() {
return {
showAlert :false}}, components: {// component declaration // components registered to use, to register this is the external import AlertTip'alert-tip': AlertTip
}
</script>
Copy the codeAdd click events to methods:
methods:{
showCancelAlert(){
this.showAlert = true}}Copy the codeWhen the button is clicked, an alertTip will appear. And then you have to make a difference in whether the information that pops up is a login or an exit, and it’s up to the outside world to decide what kind of information pops up. This is a use of props. Pass in an alertText, meaning a pop-up message.
<alert-tip v-if="showAlert" :alertText="alertText"< button@click = /> < button@click ="showCancelAlert"</button> < button@click ="showLoginAlert"</button>Copy the codedata() {
return {
showAlert :false,
alertText: ' '// Is the current page data. }}, methods:{showLoginAlert(){
this.alertText = "Do you really want to log in?"
this.showAlert = true
},
showCancelAlert(){
this.alertText = "Are you really quitting?"
this.showAlert = true}}Copy the codeAn alertText can then be passed into the component in Altertip.vue:
export default {
props:[
'alertText'[// What does the outside world give him, our alertTip is the outside world to send data}Copy the code<template>
<div class="alert_container"> {{alertText}} // bind incoming data </div> </template>Copy the codeWe can realize the popover after clicking the button, according to the usual thinking, we also need a click event, just like the confirm button of the popover, so that the popover disappears:
<p class="tip_text">{{alertText}}</p> <! -- Yes, close it when finished. How do I do that? Tell the parent to send showAlert->falseMVVM (child notifies parent)--> <div class="confirm" @click="closeTip"> confirm < / div >Copy the codemethods:{
closeTip(){// showTip cannot be changed, because the component is in the parent component, so we need to notify the parent$emitCan trigger a notification father, can start notification this.$emit('closeTip') // The application name is closeTip, how can app.vue receive it? }},Copy the codeHow do I get it here in app.vue?
<alert-tip v-if="showAlert" :alertText="alertText" @closeTip="closeAlert"/>
Copy the codeWhere @closetip =”closeAlert” indicates a custom event, which means that when our child component issues a closeTip, (this.$emit(‘closeTip’)), then our parent component executes the corresponding method (closeAlert ()).
closeAlert(){
this.showAlert = false
}
Copy the codeLet’s add a style to make it pop over: alertTip. Vue
<style lang='stylus'Scoped > // scoped is not affected by the outside, then use the naming system, try not to be affected by the outside. Stylus is compiled and can generate different styles like Tabpane@import through variables'.. /.. /style/mixin'; .alert_container position fixed top 0 left 0 right 0 bottom 0 z-index 200 background-color Rgba (0,0,0,.3) .tip_text_container position absolute top 50% left 50% margin-top -6rem margin-left -6rem width 12rem animation tipMove .4s background-color rgba(255, 255, 255, 1) border 1px padding-top 0.6 REM display flex justify-content center align-items center flex-direction column Border -radius 0.25rem. Tip_icon // Make an exclamation point and circle figure out wh(3rem, 3rem) border 0.15rem solid#f8cb86border-radius 50% display flex justify-content center align-items center flex-direction column span:nth-of-type(1) Wh (.12rem, 1.5rem) background-color#f8cb86Span :nth-of-type(2) // Wh (.2rem,.2rem) border 1px border-radius 50% margin-top 0.2rem background-color#f8cb8b
.confirm
border 1px solid #cbcbbcBorder - the radius 0.2 em < / style >Copy the codeThe introduced mixin style file mixin.styl.
Let’s look at Go’s email
Configuring the Go Environment
If you don’t have the Go environment, you can install the Go installation package first. I used Go to run VS Code. Personal experience: Run VS Code as an administrator and then execute:
go env -w GO111MODULE=on go env -w GOPROXY=https://mirrors.aliyun.com/goproxy/,direct go get -u github.com/gin-gonic/gin // Install gin globally. If gin is not used, don't install gin firstCopy the codeHere we go, email
Write Go and import the main package. Each file in Go must belong to a module, which is of strong module type. Write the entry function main(). Each project has a unique main function.
package main
func main(){
}
Copy the codeTo install the third-party library, enter:
Go get github.com/jordan-wright/email Follow the email process:
func main() {// entry function e := email.newemail () e.rom ="linana <[email protected]>"{} set e.too = []string{// Send email to multiple users {} set e.too = []string{"[email protected]"."[email protected]"}
e.Subject = "Are you taking a bath today?"// title e.ext = []byte("Will you wash them or not? Wash it or not? Will you wash it or not?"Err := e.end ()"smtp.qq.com:25", smtp.PlainAuth(""."[email protected]"."fdfsfsdfsdfsdfsaf"."smtp.qq.com") // Log in to the mail server using your account and password and hand it the mail object to send out.iferr ! = nil { log.Fatal(err) } }Copy the code- In Go := is defined and attached, the NewEmail() method returns an object from which an email instance is generated, and NewEmail has the following capabilities
e.From,e.ToAnd so on. - about
[]string{"[email protected]", "[email protected]"}The type of the mailbox is string, string,Go language uses curly braces as a container for collections. - about
E.ext = []byte(" Wash it or not? Will you wash it or not?" )Byte, with () to hold content. - About:
err := e.Send("smtp.qq.com:25", smtp.PlainAuth(""."[email protected]"."fdfsfsdfsdfsdfsaf"."smtp.qq.com")) `Copy the codeUse THE QQ mail proxy server SMTP. 25 is the default port number of the SMTP server. Performs a mailbox authentication: smtp.plainauth (), provided by the mail transfer module.
import (
"log"
"net/smtp"
"github.com/jordan-wright/email"
)
Copy the codeThere is no local mail server, so send it to QQ, which will be forwarded by Tencent server proxy. At the same time, you need to have the permission, namely the QQ mailbox and verification code (note that the password here is not the QQ password, but the authorization code in the EMAIL account POP set in QQ mailbox) :
At this point, is the realization of the mail sent! Try sending attachments and links again:
HTML = []byte(' <ul> <li><a href="https://juejin.cn/user/4265760848623528"</a></li> <li><a href="https://juejin.cn/post/6844904073322315789"></ a></li> </ul> ')"yb.jpeg") / / accessoriesCopy the codeThe path of the attachment should be noted according to their own path to write ah! In addition, the above transmission information should be placed before e. end!! Finally, paste the full code:
Package main // package // install node_mail in node_mail go"log"
"net/smtp"
"github.com/jordan-wright/email"
)
func main() {// entry function e := email.newemail () e.rom ="huhuilin <[email protected]>"/ / []? Array? Multiple users send mail {} set e.too = []string{"[email protected]"."[email protected]"}
e.Subject = "Are you taking a bath today?"// title e.ext = []byte("Will you wash them or not? Wash it or not? Will you wash it or not?"HTML = []byte(' <ul> <li><a href="https://juejin.cn/user/4265760848623528"</a></li> <li><a href="https://juejin.cn/user/4265760848623528"></ a></li> </ul> ')"yb.jpeg"Err := e.end ()"smtp.qq.com:25", smtp.PlainAuth(""."[email protected]"."fdfsfsdfsdfsdfsaf"."smtp.qq.com"))
iferr ! = nil {log.fatal (err) // to addlogModule // think of js console.log() // console.error() // Prints errors if there are errors and the message type is Fatal}}Copy the codeHere’s the end
A simple share, there is a lot of deficiencies, welcome to give advice and supplement! Attached to Github, bye ~