ahxin/MyUrls
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

根据UA自适应样式，短链接生成后自动复制到剪贴板

Browse Source
This commit is contained in:
CareyWong 2020-03-28 21:45:53 +08:00
parent 178b35b48d
commit 3f5b8ac05d
3 changed files with 52 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

105
public/index-m.html
View File

@ -1,105 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyUrls</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios@0.19.2/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-container>
<el-header></el-header>
<el-main>
<div class="body-center">
<img width="300" src="./logo.png" @click="goToGayHub">
<el-input ref="long" v-model="longUrl" size="medium" @keyup.enter.native="enterToDoShort">
<el-button slot="append" icon="el-icon-magic-stick" @click="doShort" :disabled="longUrl === ''"
:loading="loading"></el-button>
</el-input>
<el-input v-model="shortUrl" size="medium" disabled v-if="shortUrl !== ''"></el-input>
</div>
</el-main>
</el-container>
</div>
<script>
const repo = 'https://github.com/CareyWang/MyUrls'
const backend = 'http://example.com'
let app = new Vue({
el: "#app",
data() {
return {
loading: false,
longUrl: '',
shortUrl: ''
}
},
mounted() {
this.$refs.long.focus()
},
methods: {
enterToDoShort(ev) {
ev.keyCode === 13 && this.doShort()
},
doShort() {
let re = new RegExp('http(s*)://[^\s]*')
if (re.exec(this.longUrl) === null) {
this.$message.warning('请输入正确格式的长链接')
return
}
this.loading = true
let data = new FormData();
data.append("longUrl", btoa(this.longUrl));
axios.post(backend + '/short', data, {
header: {
"Content-Type": "application/form-data; charset=utf-8"
}
})
.then(res => {
if (res.data.Code === 1 && res.data.ShortUrl !== "") {
this.shortUrl = res.data.ShortUrl;
} else {
this.$message.error("短链接获取失败：" + res.data.Message);
}
})
.catch(() => {
this.$message.error("短链接获取失败");
})
.finally(() => {
this.loading = false;
});
},
goToGayHub() {
window.open(repo)
}
},
})
</script>
<style>
.body-center {
width: 90%;
position: absolute;
left: 50%;
top: 30%;
transform: translate(-50%, -50%);
text-align: center;
}
.el-input {
margin-top: 20px;
}
</style>
</body>
</html>

59
public/index.html
View File

@ -10,6 +10,7 @@
<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios@0.19.2/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-clipboard2@0.3.1/dist/vue-clipboard.min.js"></script>
</head>
<body>
@ -17,13 +18,15 @@
<el-container>
<el-header></el-header>
<el-main>
<div class="body-center">
<div :class="[isPc ? 'body-center body-width-pc' : 'body-center body-width-mb']">
<img width="300" src="./logo.png" @click="goToGayHub">
<el-input ref="long" v-model="longUrl" size="medium" @keyup.enter.native="enterToDoShort">
<el-button slot="append" icon="el-icon-magic-stick" @click="doShort" :disabled="longUrl === ''"
:loading="loading"></el-button>
<el-button slot="append" icon="el-icon-magic-stick" @click="doShort" :loading="loading"></el-button>
</el-input>
<el-input class="copy-content" v-model="shortUrl" size="medium" readonly v-if="shortUrl !== ''">
<el-button slot="append" v-clipboard:copy="shortUrl" v-clipboard:success="onCopy" ref="copy-btn"
icon="el-icon-document-copy"></el-button>
</el-input>
<el-input v-model="shortUrl" size="medium" disabled v-if="shortUrl !== ''"></el-input>
</div>
</el-main>
</el-container>
@ -37,11 +40,19 @@
el: "#app",
data() {
return {
isPc: true,
loading: false,
longUrl: '',
shortUrl: ''
}
},
created() {
const os = this.getOS()
if (os.isPc !== true) {
this.isPc = false
}
},
mounted() {
this.$refs.long.focus()
},
@ -53,7 +64,7 @@
let re = new RegExp('http(s*)://[^\s]*')
if (re.exec(this.longUrl) === null) {
this.$message.warning('请输入正确格式的长链接')
return
return
}
this.loading = true
@ -68,6 +79,8 @@
.then(res => {
if (res.data.Code === 1 && res.data.ShortUrl !== "") {
this.shortUrl = res.data.ShortUrl;
this.$copyText(this.shortUrl)
this.$message.success("短链接已复制到剪贴板");
} else {
this.$message.error("短链接获取失败：" + res.data.Message);
}
@ -81,7 +94,31 @@
},
goToGayHub() {
window.open(repo)
}
},
getOS() {
let ua = navigator.userAgent,
isWindowsPhone = /(?:Windows Phone)/.test(ua),
isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
isAndroid = /(?:Android)/.test(ua),
isFireFox = /(?:Firefox)/.test(ua),
isChrome = /(?:Chrome|CriOS)/.test(ua),
isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
isPhone = /(?:iPhone)/.test(ua) && !isTablet,
isPc = !isPhone && !isAndroid && !isSymbian;
return {
isTablet: isTablet,
isPhone: isPhone,
isAndroid: isAndroid,
isPc: isPc
};
},
getBodyClass() {
return this.isPc ? 'body-center body-width-pc' : 'body-center'
},
onCopy() {
this.$message.success("Copied!");
},
},
})
</script>
@ -91,11 +128,19 @@
width: 40%;
position: absolute;
left: 50%;
top: 40%;
top: 30%;
transform: translate(-50%, -50%);
text-align: center;
}
.body-width-pc {
width: 40%;
}
.body-width-mb {
width: 90%;
}
.el-input {
margin-top: 20px;
}