最近做的项目时不时需要增加一些设备信息，有要求国际化，不停徘徊于Google翻译，英文全大写，中文转Unicode的页面中。所以花了一点时间弄了一个基于Vue的小demo。输入中文和英文和，自动生成国际化命名，点击按钮自动复制，爽死了。
英文命名时设置保存四个字符
效果：
image.png
目录结构：
image.png
代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" >
<title>国际化</title>
<link rel="stylesheet" href="src/css/index.css">
<script type="text/javascript" src="src/js/vue.min.js"></script>
<script src="https://cdn.bootcss.com/clipboard.js/1.7.0/clipboard.js"></script>
</head>
<body>
<div id="todo" class="todo">
<div class="header">
<section>
<form action="javascript:void(0)">
<label for="title">国际化</label>
<button class="addBtn" v-on:click="start"></button>
<input type="text" name="title" placeholder="english..." required="required" autocomplete="off" v-model="eng" v-on:keypress.enter="start">
<input type="text" name="title" placeholder="中文..." required="required" autocomplete="off" v-model="chi" v-on:keypress.enter="start">
</form>
</section>
</div>
<section>
<h2>Unicode<span id="Unicode" class="count">{{unicode}}</span>
<button type="button" id="btn1" class="btn" data-clipboard-action="copy" data-clipboard-target="#Unicode">copy</button>
</h2>
<h2>English<span id="English" class="count">{{english}}</span>
<button type="button" id="btn2" class="btn" data-clipboard-action="copy" data-clipboard-target="#English">copy</button>
</h2>
<h2>Only Unic<span id="Only" class="count">{{onlyuni}}</span>
<button type="button" id="btn3" class="btn" data-clipboard-action="copy" data-clipboard-target="#Only">copy</button>
</h2>
</section>
<p class="footer">Derek</p>
</div>
<script type="text/javascript" src="src/js/index.js"></script>
</body>
</html>
css
* {
margin: 0;
padding: 0;
}
body {
font-size: 16px;
background: #cdcdcd;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.header {
height: 50px;
background: rgba(47, 47, 47, 0.98);
}
section {
max-width: 620px;
margin: 0 auto;
padding: 0 10px;
}
label {
float: left;
width: 100px;
line-height: 50px;
color: #ddd;
font-size: 24px;
cursor: pointer;
}
.header input {
float: right;
width: 37%;
height: 24px;
margin-top: 12px;
text-indent: 10px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
border: none;
}
.header button{
float: right;
width: 48px;
height: 25px;
margin-top: 12px;
background-color: #07FC27;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
outline: none;
font-weight: bolder;
}
h2 {
position: relative;
margin: 26px 0;
}
h2 .count{
position: absolute;
top: 2px;
right: 5px;
display: inline-block;
padding: 0 5px;
height: 20px;
width: 80%;
border-radius: 20px;
background: #e6e6fa;
line-height: 22px;
text-align: center;
color: #666;
font-size: 14px;
}
.btn{
position: absolute;
top: 2px;
right: 5px;
display: inline-block;
padding: 0 5px;
height: 20px;
width: 10%;
border-radius: 20px;
background: #07FC27;
line-height: 14px;
text-align: center;
color: #666;
font-size: 14px;
outline: none;
}
.btn:hover{
cursor: pointer;
}
ol {
margin: 28px 0 32px;
}
ol,
ul {
list-style-type: none;
}
li {
height: 32px;
line-height: 32px;
background: #fff;
position: relative;
margin-bottom: 10px;
padding: 0 48px;
border-radius: 3px;
border-left: 5px solid #629a9c;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}
li input {
position: absolute;
top: 6px;
left: 22px;
width: 22px;
height: 22px;
cursor: pointer;
}
li p {
line-height: 34px;
}
li a {
position: absolute;
top: 4px;
right: 5px;
display: inline-block;
width: 14px;
height: 12px;
border-radius: 14px;
border: 6px double #fff;
background: #ccc;
line-height: 12px;
text-align: center;
color: #fff;
font-weight: bold;
font-size: 14px;
cursor: pointer;
}
#doneList li {
border-left: 5px solid #999;
opacity: 0.5;
}
.footer {
font-size: 14px;
text-align: center;
color: #666;
}
@media only screen and (max-width: 400px){
.header input{
width: 52%;
}
}
js
var todo = new Vue({
el: "#todo",
data: {
chi:'',
eng:'',
unicode: 'hello',
english: 'world',
onlyuni:"!"
},
mounted: function() {
var clipboard1 = new Clipboard('#btn1');
var clipboard2 = new Clipboard('#btn2');
var clipboard3 = new Clipboard('#btn3');
},
methods: {
start: function() {
if (!this.chi || !this.eng) return;
this.onlyuni = this.toUnicode(this.chi);
this.unicode = "COL."+this.toEnglish(this.eng)+"="+this.toUnicode(this.chi);
this.english = "COL."+this.toEnglish(this.eng)+"="+this.eng;
this.chi = "";
this.eng = "";
},
toUnicode: function(data) {
if (data == '') return '请输入汉字';
var str = '';
for (var i = 0; i < data.length; i++) {
str += "\\u" + parseInt(data[i].charCodeAt(0), 10).toString(16);
}
return str;
},
toEnglish: function(data) {
var arr = data.split(" ");
for (var i = 0; i < arr.length; i++) {
arr[i] = this.toUpper(arr[i]);
}
return arr.join("_");
},
toUpper:function(str){
var arr = str.split("");
if (arr.length>4) {
arr = arr.slice(0,4);
}
for (var i = 0; i < arr.length; i++) {
arr[i] = arr[i].toUpperCase();
}
return arr.join("");
}
}
});
