基于vue双向数据绑定的思想，实现一个在线邮件签名生成器。
直接上演示代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>邮件签名在线生成器|轻轻简记</title>
<link rel="shortcut icon" href="http://www.qingqingjianji.com/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style type="text/css">
.copyright{
margin-top: 15px;
background: #fff;
font-size: 14px;
color: #666;
text-align: center;
padding-top: 14px;
padding-bottom: 28px;
border-top: 2px solid #e3e3e3;
box-shadow: 0 0 3px rgba(0,0,0,.03);
}
.form-group{
margin-bottom: 7px;
}
</style>
</head>
<body>
<div style="margin-top:20px;">
<div>
<div>
<form>
<div>
<div>
<label class="col-sm-3 control-label">姓名</label>
<div><input name="s1" id="username" type="text" v-model="name" oninput=vue.bind(this);></div>
</div>
</div>
<div>
<div>
<label class="col-sm-3 control-label">英文名</label>
<div><input name="s2" type="text" v-model="englishName" oninput=vue.bind(this);></div>
</div>
</div>
<div>
<div>
<label class="col-sm-3 control-label">公司名</label>
<div><input name="s3" type="text" v-model="company" oninput=vue.bind(this);></div>
</div>
</div>
<div>
<div>
<label class="col-sm-3 control-label">部门</label>
<div><input name="s4" type="text" v-model="def" oninput=vue.bind(this);></div>
</div>
</div>
<div>
<div>
<label class="col-sm-3 control-label">职位</label>
<div><input name="s5" type="text" v-model="position" oninput=vue.bind(this);></div>
</div>
</div>
<div>
<div>
<label class="col-sm-3 control-label">电话</label>
<div><input name="s6" type="text" v-model="tel" oninput=vue.bind(this);></div>
</div>
</div>
<div>
<div>
<label class="col-sm-3 control-label">传真</label>
<div><input name="s7" type="text" v-model="fax" oninput=vue.bind(this);></div>
</div>
</div>
<div>
<div>
<label class="col-sm-3 control-label">手机</label>
<div><input name="s8" type="text" v-model="mob" oninput=vue.bind(this);></div>
</div>
</div>
<div>
<div>
<label class="col-sm-3 control-label">地址</label>
<div><input name="s9" type="text" v-model="add" oninput=vue.bind(this);></div>
</div>
</div>
<div>
<div>
<label class="col-sm-3 control-label">中文申明</label>
<div><input name="s9" type="text" v-model="zhshenmin" oninput=vue.bind(this);></div>
</div>
</div>
<div>
<div>
<label class="col-sm-3 control-label">英文申明</label>
<div><input name="s9" type="text" v-model="enshenmin" oninput=vue.bind(this);></div>
</div>
</div>
<button type="button" class="btn btn-block btn-info" onclick="ClickCopy('code')">拷贝</button>
</form>
</div>
<div>
<div id="app">
<div>
<div id="EffectBox">
<h3>实时预览</h3>
<div id="code">
<style type="text/css">
.g {clear:both; height:0;}
.mailsign {font-size:12px; color:#808080; margin:0 35px; line-height:22px;}
.logo {width:305px; height:35px; margin:20px 0 10px -15px;}
.name {font-weight:700; font-size:14px; float:left; color:#808080; height:30px; line-height:30px;}
.position {float:left; margin-left:8px; color:#808080; height:30px; line-height:30px;}
.company1 {clear:both; font-weight:700; font-size:14px; color:#808080;}
.company2 {clear:both; font-weight:700; font-size:14px; color:#808080; margin-bottom:10px;}
.add .zip { margin-left:5px; color:#a0a0a0; font-size:10px;}
.website a {color:#808080; text-decoration:none !important;}
.state{
color: #a0a0a0;
margin: 10px auto;
padding: 5px 0px;
border-top: 1px solid #CCC;
border-radius: 0;
}
.state h4 { margin:0;}
.state p {margin:0; font-size:7.5pt;}
.def{font-size: 13px;display: inline-block;padding-right: 8px;}
.username{
font-weight:700; font-size:14px; color:#808080;
}
</style>
<div>
<div><span class="def username">{{name}}</span><span>{{englishName}}</span></div>
<div><span>{{company}}</span></div>
<div><span>{{def}}</span><span>{{position}}</span></div>
<div>电话/Tel：<span>{{tel}}</span></div>
<div>传真/Fax：<span>{{fax}}</span></div>
<div>手机/Mob：<span>{{mob}}</span></div>
<div>地址/Add：<span>{{add}}</span></div>
<div>
<p>{{zhshenmin}}</p>
<p>{{enshenmin}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<div>
<div>
<p><a href="http://www.qingqingjianji.com/">首页</a></p>
<p>Copyright © 轻轻简记,All Rights Reserved</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// Object.defineProperty(obj, prop, descriptor)可以在一个对象上定义新属性或修改现有属性
// obj指要修改的对象
// prop新增或修改属性
// descriptor属性的描述
// 对象的属性主要分为两种，一种是数值型的，一种是访问型的。
// 如果一个描述符不具有value,writable,get 和 set 任意一个关键字，那么它将被认为是一个数据描述符
// 如果有value和writable就是数据型
// descriptor描述对象主要包含:
// configurable(表示对象的属性是否可以被删除，以及除writable特性外的其他特性是否可以被修改。)
// enumerable(定义了对象的属性是否可以forinobj或Object.keys)
// value
// writable(定义属性值是否可写，即是否可修改)
// get
// set
function Vue(obj){
this.$el = document.getElementById(obj.el);
this.options = obj;
//创建原型为null的空对象，和直接赋值一个{}有差异，直接赋值{}它是有原型的，即原型是对象
this.tempData = Object.create(null);
var flag = this.initCheck();
if(flag)
this.init();
}
Vue.prototype = {
init:function(){
var self = this;
self.template();
self.watch();
},
initCheck:function(){
var self = this;
if(!self.$el && window.console){
console.log("····没有定义模板ID····");
return false;
}
if(!self.options.data && window.console){
console.log("····没有定义数据对象····");
return false;
}
return true;
},
template:function(){
this.template = this.$el.innerHTML;
},
watch:function(){
var self = this;
var data = self.options.data;
//获取参数data对象的所有属性名
var dataKeys = Object.keys(data);
if(dataKeys && dataKeys.length > 0){
dataKeys.forEach(function(item){
if(self.hasOwnProperty(item)) return;
Object.defineProperty(self,item,{
configurable:true,
enumerable:true,
get:function(){
return self.tempData[item];
},
set:function(newVal){
if(newVal !== self.tempData[item]){
self.tempData[item] = newVal;
self.updateTemplate();
}
}
})
//定义属性后把把实例化data上的值赋值给属性
self[item] = data[item];
});
}
},
updateTemplate:function(){
var self = this;
var reg = /{{(.+?)}}/g;
self.1){
return self[$1] || "";
});
},
bind:function(node){
var self = this;
if(!node) return;
var nodeName = node.getAttribute('v-model');
var val;
if(node.tagName === "SELECT"){
val = node.options[node.selectedIndex].text;
}else{
val = node.value;
}
self[nodeName] = val;
}
}
</script>
<script type="text/javascript">
var vue = new Vue({
el:'app',
data:{
name:'姓名',
englishName:'英文名',
company:'某某股份有限公司',
position:'职位',
def:'部门',
add:'--',
tel:'--',
fax:'--',
mob:'--',
zhshenmin:'本邮件载有秘密信息，请您恪守保密义务；未经授权者不得复印、公开、使用本邮件及内容！谢谢合作！',
enshenmin:'This email communication is confidential,Recipient(s) named above is (are) obligated to maintain secrecy. Any unauthorized dissemination, distribution or copying of this communication is (are) strictly prohibited. Thank you.'
}
});
//点击复制,动态创建一个文本框，然后选择文本框的值，然后执行浏览器的复制命令
function ClickCopy(obj){
if(!obj) return;
var username = document.getElementById('username').value.trim();
if(!username){
alert("请输入你的姓名");
return false;
}
var tempTextarea = document.createElement('textarea');
tempTextarea.id = "htm";
tempTextarea.value = document.getElementById(obj).innerHTML;
document.body.appendChild(tempTextarea);
document.getElementById("htm").select();
setTimeout(function(){
document.body.removeChild(document.getElementById("htm"));
},0);
var result=document.execCommand("Copy"); //执行浏览器复制命令
if(result){
alert("复制成功，去邮件签名输入框粘贴");
}else{
alert("当前浏览器不支持该功能，请切换浏览器！");
}
}
</script>
</body>
</html>
