基于vue雙向數(shù)據(jù)綁定的思想，實現(xiàn)一個在線郵件簽名生成器。
直接上演示代碼：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>郵件簽名在線生成器|輕輕簡記</title>
<link rel="shortcut icon" type="image/x-icon">
<link rel="stylesheet" type="text/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 >首頁</a></p>
<p>Copyright ? 輕輕簡記,All Rights Reserved</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// Object.defineProperty(obj, prop, descriptor)可以在一個對象上定義新屬性或修改現(xiàn)有屬性
// obj指要修改的對象
// prop新增或修改屬性
// descriptor屬性的描述
// 對象的屬性主要分為兩種，一種是數(shù)值型的，一種是訪問型的。
// 如果一個描述符不具有value,writable,get 和 set 任意一個關(guān)鍵字，那么它將被認為是一個數(shù)據(jù)描述符
// 如果有value和writable就是數(shù)據(jù)型
// descriptor描述對象主要包含:
// configurable(表示對象的屬性是否可以被刪除，以及除writable特性外的其他特性是否可以被修改。)
// enumerable(定義了對象的屬性是否可以forinobj或Object.keys)
// value
// writable(定義屬性值是否可寫，即是否可修改)
// get
// set
function Vue(obj){
this.$el = document.getElementById(obj.el);
this.options = obj;
//創(chuàng)建原型為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("····沒有定義數(shù)據(jù)對象····");
return false;
}
return true;
},
template:function(){
this.template = this.$el.innerHTML;
},
watch:function(){
var self = this;
var data = self.options.data;
//獲取參數(shù)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:'本郵件載有秘密信息，請您恪守保密義務；未經(jīng)授權(quán)者不得復印、公開、使用本郵件及內(nèi)容！謝謝合作！',
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.'
}
});
//點擊復制,動態(tài)創(chuàng)建一個文本框，然后選擇文本框的值，然后執(zhí)行瀏覽器的復制命令
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"); //執(zhí)行瀏覽器復制命令
if(result){
alert("復制成功，去郵件簽名輸入框粘貼");
}else{
alert("當前瀏覽器不支持該功能，請切換瀏覽器！");
}
}
</script>
</body>
</html>
