优化代码
This commit is contained in:
@@ -1,214 +1,214 @@
|
||||
<template>
|
||||
<div ref="floatingBtn" class="floating-btn">
|
||||
<div :class="['btns-inner', { show: showInner }]">
|
||||
<button class="btn" type="button" title="折叠侧边菜单" @click="toggleSideCollapse()">
|
||||
<i class="el-icon-menu" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button class="btn" type="button" title="刷新" @click="refreshPage()">
|
||||
<i class="el-icon-refresh-right" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button class="btn" type="button" title="返回主页" @click="backToHome()">
|
||||
<i class="el-icon-s-home" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="btns-outer">
|
||||
<button class="btn" type="button" title="菜单">
|
||||
<i class="fa fa-bars" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div ref="floatingBtn" class="floating-btn">
|
||||
<div :class="['btns-inner', { show: showInner }]">
|
||||
<button class="btn" type="button" title="折叠侧边菜单" @click="toggleSideCollapse()">
|
||||
<i class="el-icon-menu" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button class="btn" type="button" title="刷新" @click="refreshPage()">
|
||||
<i class="el-icon-refresh-right" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button class="btn" type="button" title="返回主页" @click="backToHome()">
|
||||
<i class="el-icon-s-home" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="btns-outer">
|
||||
<button class="btn" type="button" title="菜单">
|
||||
<i class="fa fa-bars" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FloatingBtn',
|
||||
data() {
|
||||
return {
|
||||
config: this.$root.config.storage,
|
||||
showInner: false
|
||||
}
|
||||
name: 'FloatingBtn',
|
||||
data() {
|
||||
return {
|
||||
config: this.$root.config.storage,
|
||||
showInner: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initAnimation();
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 设置动画
|
||||
*/
|
||||
initAnimation() {
|
||||
var vm = this;
|
||||
var el = vm.$refs['floatingBtn'];
|
||||
var btns = el.querySelectorAll('.btn');
|
||||
var className = 'animate';
|
||||
|
||||
btns.forEach((elem) => {
|
||||
elem.addEventListener('click', function () {
|
||||
this.classList.remove(className);
|
||||
setTimeout(() => {
|
||||
this.classList.add(className);
|
||||
vm.toggleInnerBtns();
|
||||
}, 20);
|
||||
});
|
||||
});
|
||||
},
|
||||
mounted () {
|
||||
this.initAnimation();
|
||||
|
||||
/**
|
||||
* 切换按钮显示
|
||||
*/
|
||||
toggleInnerBtns() {
|
||||
this.showInner = !this.showInner;
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 设置动画
|
||||
*/
|
||||
initAnimation() {
|
||||
var vm = this;
|
||||
var el = vm.$refs['floatingBtn'];
|
||||
var btns = el.querySelectorAll('.btn');
|
||||
var className = 'animate';
|
||||
|
||||
btns.forEach((elem) => {
|
||||
elem.addEventListener('click', function () {
|
||||
this.classList.remove(className);
|
||||
setTimeout(() => {
|
||||
this.classList.add(className);
|
||||
vm.toggleInnerBtns();
|
||||
}, 20);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 切换按钮显示
|
||||
*/
|
||||
toggleInnerBtns() {
|
||||
this.showInner = !this.showInner;
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回主页
|
||||
*/
|
||||
backToHome() {
|
||||
var routeName = 'Home';
|
||||
|
||||
if (this.$route.name != routeName) {
|
||||
this.$router.push({
|
||||
name: routeName
|
||||
}).then(() => {
|
||||
window.location.reload();
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
duration: 2000,
|
||||
message: '已经在主页啦~',
|
||||
type: 'warning'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 刷新
|
||||
*/
|
||||
refreshPage() {
|
||||
window.location.reload();
|
||||
},
|
||||
|
||||
/**
|
||||
* 切换侧边菜单折叠状态
|
||||
*/
|
||||
toggleSideCollapse() {
|
||||
var cfg = this.config;
|
||||
cfg.sideMenuCollapse = !cfg.sideMenuCollapse;
|
||||
},
|
||||
/**
|
||||
* 返回主页
|
||||
*/
|
||||
backToHome() {
|
||||
var routeName = 'Home';
|
||||
|
||||
if (this.$route.name != routeName) {
|
||||
this.$router.push({
|
||||
name: routeName
|
||||
}).then(() => {
|
||||
window.location.reload();
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
duration: 2000,
|
||||
message: '已经在主页啦~',
|
||||
type: 'warning'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 刷新
|
||||
*/
|
||||
refreshPage() {
|
||||
window.location.reload();
|
||||
},
|
||||
|
||||
/**
|
||||
* 切换侧边菜单折叠状态
|
||||
*/
|
||||
toggleSideCollapse() {
|
||||
var cfg = this.config;
|
||||
cfg.sideMenuCollapse = !cfg.sideMenuCollapse;
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.floating-btn {
|
||||
position: fixed;
|
||||
z-index: 5000;
|
||||
right: 2rem;
|
||||
bottom: 2rem;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
z-index: 5000;
|
||||
right: 2rem;
|
||||
bottom: 2rem;
|
||||
text-align: center;
|
||||
|
||||
.btns-inner.show .btn {
|
||||
width: 2.6rem;
|
||||
height: 2.6rem;
|
||||
font-size: 1rem;
|
||||
color: #FFF;
|
||||
}
|
||||
.btns-inner.show .btn {
|
||||
width: 2.6rem;
|
||||
height: 2.6rem;
|
||||
font-size: 1rem;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
right: 1.5rem;
|
||||
bottom: 1.5rem;
|
||||
}
|
||||
@media screen and (max-width: 400px) {
|
||||
right: 1.5rem;
|
||||
bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.btns-inner {
|
||||
display: inline-block;
|
||||
display: inline-block;
|
||||
|
||||
.btn {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: @colorSecondary;
|
||||
font-size: 0;
|
||||
color: transparent;
|
||||
transition: all @transitionTime;
|
||||
.btn {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: @colorSecondary;
|
||||
font-size: 0;
|
||||
color: transparent;
|
||||
transition: all @transitionTime;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
&:not(:first-child) {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btns-outer {
|
||||
display: block;
|
||||
display: block;
|
||||
|
||||
.btn {
|
||||
margin-top: 1rem;
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
background-color: @colorPrimary;
|
||||
}
|
||||
.btn {
|
||||
margin-top: 1rem;
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
background-color: @colorPrimary;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
box-shadow: 0 0.15rem 0.15rem 0 rgba(0, 0, 0, 0.14),
|
||||
0 0.2rem 0.1rem -0.15rem rgba(0, 0, 0, 0.12),
|
||||
0 0.1rem 0.3rem 0 rgba(0, 0, 0, 0.20);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
box-shadow: 0 0.15rem 0.15rem 0 rgba(0, 0, 0, 0.14),
|
||||
0 0.2rem 0.1rem -0.15rem rgba(0, 0, 0, 0.12),
|
||||
0 0.1rem 0.3rem 0 rgba(0, 0, 0, 0.20);
|
||||
border-radius: 50%;
|
||||
font-size: 1rem;
|
||||
color: #FFF;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
&::before, &::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
font-size: 1rem;
|
||||
color: #FFF;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
background-color: #FFF;
|
||||
opacity: 0;
|
||||
transition: opacity @transitionTime;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
&::before, &::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: #FFF;
|
||||
opacity: 0;
|
||||
transition: opacity @transitionTime;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
&:hover::before {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
&.animate::after {
|
||||
animation: floatingBtnClick calc(@transitionTime * 2) linear;
|
||||
}
|
||||
&.animate::after {
|
||||
animation: floatingBtnClick calc(@transitionTime * 2) linear;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes floatingBtnClick {
|
||||
0% {
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
25% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
50% {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
75% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
100% {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
0% {
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
25% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
50% {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
75% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
100% {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,67 +1,67 @@
|
||||
<template>
|
||||
<i class="icon-element bg-center-contain" :style="iconStyle"></i>
|
||||
<i class="icon-element bg-center-contain" :style="iconStyle"></i>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'IconElement',
|
||||
props: {
|
||||
// 来源（inner、outer）
|
||||
from: {
|
||||
type: String,
|
||||
default: 'inner'
|
||||
},
|
||||
// 路径
|
||||
// 若为 inner，自动添加 @/assets/icon/
|
||||
path: {
|
||||
type: String,
|
||||
default: 'unknown.svg'
|
||||
},
|
||||
// 尺寸
|
||||
size: {
|
||||
type: String,
|
||||
default: '1em'
|
||||
},
|
||||
// 显示图标
|
||||
showIcon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
name: 'IconElement',
|
||||
props: {
|
||||
// 来源（inner、outer）
|
||||
from: {
|
||||
type: String,
|
||||
default: 'inner'
|
||||
},
|
||||
computed: {
|
||||
// 图标样式
|
||||
iconStyle() {
|
||||
var style = {
|
||||
width: this.size,
|
||||
height: this.size
|
||||
};
|
||||
var iconPath = '';
|
||||
|
||||
// 不显示图标内容
|
||||
if (!this.showIcon) {
|
||||
return style;
|
||||
}
|
||||
|
||||
if (this.from === 'inner') {
|
||||
// 内部
|
||||
iconPath = require(`@/assets/icon/${this.path}`);
|
||||
} else if (this.from === 'outer') {
|
||||
// 外部
|
||||
iconPath = this.path;
|
||||
}
|
||||
|
||||
style.backgroundImage = `url('${iconPath}')`;
|
||||
|
||||
return style;
|
||||
}
|
||||
// 路径
|
||||
// 若为 inner，自动添加 @/assets/icon/
|
||||
path: {
|
||||
type: String,
|
||||
default: 'unknown.svg'
|
||||
},
|
||||
// 尺寸
|
||||
size: {
|
||||
type: String,
|
||||
default: '1em'
|
||||
},
|
||||
// 显示图标
|
||||
showIcon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 图标样式
|
||||
iconStyle() {
|
||||
var style = {
|
||||
width: this.size,
|
||||
height: this.size
|
||||
};
|
||||
var iconPath = '';
|
||||
|
||||
// 不显示图标内容
|
||||
if (!this.showIcon) {
|
||||
return style;
|
||||
}
|
||||
|
||||
if (this.from === 'inner') {
|
||||
// 内部
|
||||
iconPath = require(`@/assets/icon/${this.path}`);
|
||||
} else if (this.from === 'outer') {
|
||||
// 外部
|
||||
iconPath = this.path;
|
||||
}
|
||||
|
||||
style.backgroundImage = `url('${iconPath}')`;
|
||||
|
||||
return style;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.icon-element {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-style: normal;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-style: normal;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,164 +1,190 @@
|
||||
<template>
|
||||
<div class="tool-page">
|
||||
|
||||
<div class="info">
|
||||
<div class="title">配置选项 & 结果</div>
|
||||
<div class="content">
|
||||
<el-form label-width="6rem">
|
||||
<!-- 字符串长度 -->
|
||||
<el-form-item label="字符串长度">
|
||||
<el-input v-model.number="info.strLength" type="number" min="1" max="1024"></el-input>
|
||||
</el-form-item>
|
||||
<!-- 字符串格式 -->
|
||||
<el-form-item label="字符串格式">
|
||||
<el-checkbox v-model="info.option.hasNum"
|
||||
name="option" label="hasNum"
|
||||
>数字</el-checkbox>
|
||||
<el-checkbox v-model="info.option.hasChar"
|
||||
name="option" label="hasChar"
|
||||
>字母</el-checkbox>
|
||||
<el-checkbox v-model="info.option.hasSymbol"
|
||||
name="option" label="hasSymbol"
|
||||
>其他符号</el-checkbox>
|
||||
<el-checkbox v-model="info.option.caseSensitive"
|
||||
name="option" label="caseSensitive"
|
||||
>大小写</el-checkbox>
|
||||
<el-checkbox v-model="info.option.lowerCase"
|
||||
name="option" label="lowerCase"
|
||||
>全小写（需关闭“大小写”）</el-checkbox>
|
||||
</el-form-item>
|
||||
<!-- 生成结果 -->
|
||||
<el-form-item label="生成结果">
|
||||
<el-input v-model="info.result" type="text" readonly></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action">
|
||||
<div class="title">操作</div>
|
||||
<div class="content">
|
||||
<el-button type="primary" @click="btnGenerate()">生成</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reference">
|
||||
<div class="title">参考资料</div>
|
||||
<div class="content">
|
||||
<el-link href="https://www.cnblogs.com/hankuksui/p/9892729.html" target="_blank" type="primary">博客园 - hankuksui</el-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tool-page">
|
||||
|
||||
<div class="info">
|
||||
<div class="title">配置选项 & 结果</div>
|
||||
<div class="content">
|
||||
<el-form label-width="6rem">
|
||||
<!-- 字符串长度 -->
|
||||
<el-form-item label="字符串长度">
|
||||
<el-input
|
||||
v-model.number="info.strLength"
|
||||
type="number"
|
||||
min="1"
|
||||
max="1024"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<!-- 字符串格式 -->
|
||||
<el-form-item label="字符串格式">
|
||||
<el-checkbox
|
||||
v-model="info.option.hasNum"
|
||||
name="option"
|
||||
label="hasNum"
|
||||
>数字</el-checkbox>
|
||||
<el-checkbox
|
||||
v-model="info.option.hasChar"
|
||||
name="option"
|
||||
label="hasChar"
|
||||
>字母</el-checkbox>
|
||||
<el-checkbox
|
||||
v-model="info.option.hasSymbol"
|
||||
name="option"
|
||||
label="hasSymbol"
|
||||
>其他符号</el-checkbox>
|
||||
<el-checkbox
|
||||
v-model="info.option.caseSensitive"
|
||||
name="option"
|
||||
label="caseSensitive"
|
||||
>大小写</el-checkbox>
|
||||
<el-checkbox
|
||||
v-model="info.option.lowerCase"
|
||||
name="option"
|
||||
label="lowerCase"
|
||||
>全小写（需关闭“大小写”）</el-checkbox>
|
||||
</el-form-item>
|
||||
<!-- 生成结果 -->
|
||||
<el-form-item label="生成结果">
|
||||
<el-input
|
||||
v-model="info.result"
|
||||
type="text"
|
||||
readonly
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action">
|
||||
<div class="title">操作</div>
|
||||
<div class="content">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="btnGenerate()"
|
||||
>生成</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reference">
|
||||
<div class="title">参考资料</div>
|
||||
<div class="content">
|
||||
<el-link
|
||||
href="https://www.cnblogs.com/hankuksui/p/9892729.html"
|
||||
target="_blank"
|
||||
type="primary"
|
||||
>博客园 - hankuksui</el-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'GenRandomStr',
|
||||
data() {
|
||||
return {
|
||||
info: {
|
||||
strLength: 8,
|
||||
option: {
|
||||
caseSensitive: true,
|
||||
hasNum: true,
|
||||
hasChar: true,
|
||||
hasSymbol: false,
|
||||
lowerCase: false
|
||||
},
|
||||
result: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 生成
|
||||
*/
|
||||
btnGenerate() {
|
||||
var len = this.info.strLength;
|
||||
var op = this.info.option;
|
||||
var r = this.genRandomStr(len, op.hasNum, op.hasChar, op.hasSymbol, op.caseSensitive, op.lowerCase);
|
||||
|
||||
this.info.result = r;
|
||||
name: 'GenRandomStr',
|
||||
data() {
|
||||
return {
|
||||
info: {
|
||||
strLength: 8,
|
||||
option: {
|
||||
caseSensitive: true,
|
||||
hasNum: true,
|
||||
hasChar: true,
|
||||
hasSymbol: false,
|
||||
lowerCase: false
|
||||
},
|
||||
result: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 生成随机字符串
|
||||
*
|
||||
* @param {number} strLength 长度
|
||||
* @param {boolean} hasNum 是否包含数字
|
||||
* @param {boolean} hasChar 是否包含字母
|
||||
* @param {boolean} hasSymbol 是否包含其他符号
|
||||
* @param {boolean} caseSensitive 是否包含大小写
|
||||
* @param {boolean} lowerCase 是否全小写（当 caseSensitive 为 false 时起作用）
|
||||
*
|
||||
* @returns {string} 生成的字符串
|
||||
*/
|
||||
genRandomStr(strLength, hasNum, hasChar, hasSymbol, caseSensitive, lowerCase) {
|
||||
var result = '请选中数字、字母或其他符号的其中一项！';
|
||||
/**
|
||||
* 生成
|
||||
*/
|
||||
btnGenerate() {
|
||||
var len = this.info.strLength;
|
||||
var op = this.info.option;
|
||||
var r = this.genRandomStr(len, op.hasNum, op.hasChar, op.hasSymbol, op.caseSensitive, op.lowerCase);
|
||||
|
||||
if (hasNum === false && hasChar === false && hasSymbol === false) {
|
||||
return result;
|
||||
}
|
||||
this.info.result = r;
|
||||
},
|
||||
|
||||
result = '';
|
||||
/**
|
||||
* 生成随机字符串
|
||||
*
|
||||
* @param {number} strLength 长度
|
||||
* @param {boolean} hasNum 是否包含数字
|
||||
* @param {boolean} hasChar 是否包含字母
|
||||
* @param {boolean} hasSymbol 是否包含其他符号
|
||||
* @param {boolean} caseSensitive 是否包含大小写
|
||||
* @param {boolean} lowerCase 是否全小写（当 caseSensitive 为 false 时起作用）
|
||||
*
|
||||
* @returns {string} 生成的字符串
|
||||
*/
|
||||
genRandomStr(strLength, hasNum, hasChar, hasSymbol, caseSensitive, lowerCase) {
|
||||
var result = '请选中数字、字母或其他符号的其中一项！';
|
||||
|
||||
for (var i = strLength; i > 0; i--) {
|
||||
let num = Math.floor((Math.random() * 94) + 33);
|
||||
let flag = ((
|
||||
(hasNum === false) && ((num >= 48) && (num <= 57))
|
||||
) || (
|
||||
(hasChar === false) && ((
|
||||
(num >= 65) && (num <= 90)
|
||||
) || (
|
||||
(num >= 97) && (num <= 122)
|
||||
))
|
||||
) || (
|
||||
(hasSymbol === false) && ((
|
||||
(num >= 33) && (num <= 47)
|
||||
) || (
|
||||
(num >= 58) && (num <= 64)
|
||||
) || (
|
||||
(num >= 91) && (num <= 96)
|
||||
) || (
|
||||
(num >= 123) && (num <= 127)
|
||||
)
|
||||
)));
|
||||
if (hasNum === false && hasChar === false && hasSymbol === false) {
|
||||
return result;
|
||||
}
|
||||
|
||||
if (flag) {
|
||||
i++;
|
||||
continue;
|
||||
}
|
||||
result = '';
|
||||
|
||||
/**
|
||||
* | CharCode | 符号 |
|
||||
* | :--------- | :----- |
|
||||
* | 033 -> 047 | ! -> / |
|
||||
* | 048 -> 057 | 0 -> 9 |
|
||||
* | 058 -> 064 | : -> @ |
|
||||
* | 065 -> 090 | A -> Z |
|
||||
* | 091 -> 096 | [ -> ` |
|
||||
* | 097 -> 122 | a -> z |
|
||||
* | 123 -> 127 | { -> |
|
||||
*/
|
||||
for (var i = strLength; i > 0; i--) {
|
||||
let num = Math.floor((Math.random() * 94) + 33);
|
||||
let flag = ((
|
||||
(hasNum === false) && ((num >= 48) && (num <= 57))
|
||||
) || (
|
||||
(hasChar === false) && ((
|
||||
(num >= 65) && (num <= 90)
|
||||
) || (
|
||||
(num >= 97) && (num <= 122)
|
||||
))
|
||||
) || (
|
||||
(hasSymbol === false) && ((
|
||||
(num >= 33) && (num <= 47)
|
||||
) || (
|
||||
(num >= 58) && (num <= 64)
|
||||
) || (
|
||||
(num >= 91) && (num <= 96)
|
||||
) || (
|
||||
(num >= 123) && (num <= 127)
|
||||
)
|
||||
)));
|
||||
|
||||
result += String.fromCharCode(num);
|
||||
}
|
||||
|
||||
if (caseSensitive === false) {
|
||||
result = (lowerCase ? result.toLocaleLowerCase() : result.toUpperCase());
|
||||
}
|
||||
|
||||
return result;
|
||||
if (flag) {
|
||||
i++;
|
||||
continue;
|
||||
}
|
||||
|
||||
},
|
||||
/**
|
||||
* | CharCode | 符号 |
|
||||
* | :--------- | :----- |
|
||||
* | 033 -> 047 | ! -> / |
|
||||
* | 048 -> 057 | 0 -> 9 |
|
||||
* | 058 -> 064 | : -> @ |
|
||||
* | 065 -> 090 | A -> Z |
|
||||
* | 091 -> 096 | [ -> ` |
|
||||
* | 097 -> 122 | a -> z |
|
||||
* | 123 -> 127 | { -> |
|
||||
*/
|
||||
|
||||
result += String.fromCharCode(num);
|
||||
}
|
||||
|
||||
if (caseSensitive === false) {
|
||||
result = (lowerCase ? result.toLocaleLowerCase() : result.toUpperCase());
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.content {
|
||||
max-width: 30rem;
|
||||
max-width: 30rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,93 +1,93 @@
|
||||
<template>
|
||||
<div class="tool-page">
|
||||
<div class="tool-page">
|
||||
|
||||
<div class="info">
|
||||
<div class="title">信息</div>
|
||||
<div class="content">
|
||||
<div class="link">
|
||||
<span class="label">目标链接：</span>
|
||||
<el-input v-model="info.link" type="text" placeholder="需要包含协议（例如 https://）" />
|
||||
</div>
|
||||
<div class="size">
|
||||
<span class="label">窗口大小：</span>
|
||||
<el-input v-model="info.size.width" type="number" min="1" placeholder="宽度（默认 400）" />
|
||||
<el-input v-model="info.size.height" type="number" min="1" placeholder="高度（默认 300）" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="title">信息</div>
|
||||
<div class="content">
|
||||
<div class="link">
|
||||
<span class="label">目标链接：</span>
|
||||
<el-input v-model="info.link" type="text" placeholder="需要包含协议（例如 https://）" />
|
||||
</div>
|
||||
|
||||
<div class="action">
|
||||
<div class="title">操作</div>
|
||||
<div class="content">
|
||||
<el-button type="primary" @click="btnOpen()">打开</el-button>
|
||||
<el-button type="danger" @click="btnClear()">清空</el-button>
|
||||
</div>
|
||||
<div class="size">
|
||||
<span class="label">窗口大小：</span>
|
||||
<el-input v-model="info.size.width" type="number" min="1" placeholder="宽度（默认 400）" />
|
||||
<el-input v-model="info.size.height" type="number" min="1" placeholder="高度（默认 300）" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action">
|
||||
<div class="title">操作</div>
|
||||
<div class="content">
|
||||
<el-button type="primary" @click="btnOpen()">打开</el-button>
|
||||
<el-button type="danger" @click="btnClear()">清空</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'OtherNewWindow',
|
||||
data() {
|
||||
return {
|
||||
info: {
|
||||
link: '',
|
||||
size: {
|
||||
width: '',
|
||||
height: ''
|
||||
}
|
||||
}
|
||||
name: 'OtherNewWindow',
|
||||
data() {
|
||||
return {
|
||||
info: {
|
||||
link: '',
|
||||
size: {
|
||||
width: '',
|
||||
height: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 打开
|
||||
btnOpen() {
|
||||
var link = this.info.link || 'https://github.com/Frost-ZX';
|
||||
var width = this.info.size.width || '400';
|
||||
var height = this.info.size.height || '300';
|
||||
var features = `height=${height}, width=${width}, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=yes, status=yes`;
|
||||
|
||||
window.open(link, '_blank', features);
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 打开
|
||||
btnOpen() {
|
||||
var link = this.info.link || 'https://github.com/Frost-ZX';
|
||||
var width = this.info.size.width || '400';
|
||||
var height = this.info.size.height || '300';
|
||||
var features = `height=${height}, width=${width}, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=yes, status=yes`;
|
||||
|
||||
window.open(link, '_blank', features);
|
||||
},
|
||||
|
||||
// 清空
|
||||
btnClear() {
|
||||
// 重置 info
|
||||
this.info = {
|
||||
link: '',
|
||||
size: {
|
||||
width: '',
|
||||
height: ''
|
||||
}
|
||||
};
|
||||
// 清空
|
||||
btnClear() {
|
||||
// 重置 info
|
||||
this.info = {
|
||||
link: '',
|
||||
size: {
|
||||
width: '',
|
||||
height: ''
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.content {
|
||||
max-width: 40rem;
|
||||
max-width: 40rem;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
width: 5rem;
|
||||
}
|
||||
.label {
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
width: 5rem;
|
||||
}
|
||||
|
||||
.el-input {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
.el-input {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,34 +1,36 @@
|
||||
<template>
|
||||
<div class="tool-page">
|
||||
|
||||
<!-- 输入 -->
|
||||
<div class="input">
|
||||
<div class="title">代码</div>
|
||||
<div class="text">
|
||||
<textarea ref="jsInput" placeholder="代码"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作 -->
|
||||
<div class="action">
|
||||
<div class="title">操作</div>
|
||||
<div class="btns">
|
||||
<el-button type="primary" @click="btnRun()">执行</el-button>
|
||||
<el-button type="danger" @click="btnClear()">清空</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输出 -->
|
||||
<div class="output">
|
||||
<div class="title">输出</div>
|
||||
<div class="text">
|
||||
<p v-for="line in output.lines" :key="line.id"
|
||||
:class="['line', line.type]"
|
||||
>{{ line.message }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tool-page">
|
||||
|
||||
<!-- 输入 -->
|
||||
<div class="input">
|
||||
<div class="title">代码</div>
|
||||
<div class="text">
|
||||
<textarea ref="jsInput" placeholder="代码"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作 -->
|
||||
<div class="action">
|
||||
<div class="title">操作</div>
|
||||
<div class="btns">
|
||||
<el-button type="primary" @click="btnRun()">执行</el-button>
|
||||
<el-button type="danger" @click="btnClear()">清空</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输出 -->
|
||||
<div class="output">
|
||||
<div class="title">输出</div>
|
||||
<div class="text">
|
||||
<p
|
||||
v-for="line in output.lines"
|
||||
:key="line.id"
|
||||
:class="['line', line.type]"
|
||||
>{{ line.message }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -37,144 +39,144 @@ import 'codemirror/mode/javascript/javascript';
|
||||
import 'codemirror/lib/codemirror.css';
|
||||
|
||||
export default {
|
||||
name: 'OtherRunJS',
|
||||
data() {
|
||||
return {
|
||||
input: {
|
||||
editor: null,
|
||||
value: ''
|
||||
},
|
||||
output: {
|
||||
id: 0,
|
||||
lines: []
|
||||
}
|
||||
name: 'OtherRunJS',
|
||||
data() {
|
||||
return {
|
||||
input: {
|
||||
editor: null,
|
||||
value: ''
|
||||
},
|
||||
output: {
|
||||
id: 0,
|
||||
lines: []
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 初始化
|
||||
init() {
|
||||
var jsInput = this.$refs['jsInput'];
|
||||
var datas = this.input;
|
||||
|
||||
datas.editor = CodeMirror.fromTextArea(jsInput, {
|
||||
indentWithTabs: false,
|
||||
indentUnit: 4,
|
||||
lineNumbers: true,
|
||||
mode: 'javascript',
|
||||
theme: 'default'
|
||||
});
|
||||
|
||||
datas.editor.setOption('extraKeys', {
|
||||
// Tab 转空格
|
||||
Tab: function(cm) {
|
||||
var spaces = Array(cm.getOption('indentUnit') + 1).join(' ');
|
||||
cm.replaceSelection(spaces);
|
||||
}
|
||||
});
|
||||
|
||||
datas.editor.on('change', function (instance) {
|
||||
// 同步 value
|
||||
datas.value = instance.doc.getValue();
|
||||
});
|
||||
},
|
||||
mounted () {
|
||||
this.init();
|
||||
|
||||
// 运行
|
||||
btnRun() {
|
||||
var output = this.output;
|
||||
|
||||
output.lines = [];
|
||||
|
||||
try {
|
||||
|
||||
window.eval(this.input.value);
|
||||
|
||||
} catch (err) {
|
||||
|
||||
let time = new Date();
|
||||
|
||||
output.id += 1;
|
||||
output.lines.push({
|
||||
id: output.id + '_' + time.getTime(),
|
||||
message: err.message,
|
||||
stack: err.stack,
|
||||
type: 'error'
|
||||
});
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 初始化
|
||||
init() {
|
||||
var jsInput = this.$refs['jsInput'];
|
||||
var datas = this.input;
|
||||
// 清空
|
||||
btnClear() {
|
||||
this.$confirm('确定要清空输入和输出的内容吗？', '', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
|
||||
datas.editor = CodeMirror.fromTextArea(jsInput, {
|
||||
indentWithTabs: false,
|
||||
indentUnit: 4,
|
||||
lineNumbers: true,
|
||||
mode: 'javascript',
|
||||
theme: 'default'
|
||||
});
|
||||
this.input.editor.doc.setValue('');
|
||||
this.output.lines = [];
|
||||
this.$message({
|
||||
message: '已清除',
|
||||
type: 'success'
|
||||
});
|
||||
|
||||
datas.editor.setOption('extraKeys', {
|
||||
// Tab 转空格
|
||||
Tab: function(cm) {
|
||||
var spaces = Array(cm.getOption('indentUnit') + 1).join(' ');
|
||||
cm.replaceSelection(spaces);
|
||||
}
|
||||
});
|
||||
}).catch(() => {
|
||||
|
||||
datas.editor.on('change', function (instance) {
|
||||
// 同步 value
|
||||
datas.value = instance.doc.getValue();
|
||||
});
|
||||
},
|
||||
this.$message({
|
||||
message: '取消清除',
|
||||
type: 'info'
|
||||
});
|
||||
|
||||
// 运行
|
||||
btnRun() {
|
||||
var output = this.output;
|
||||
});
|
||||
}
|
||||
|
||||
output.lines = [];
|
||||
|
||||
try {
|
||||
|
||||
window.eval(this.input.value);
|
||||
|
||||
} catch (err) {
|
||||
|
||||
let time = new Date();
|
||||
|
||||
output.id += 1;
|
||||
output.lines.push({
|
||||
id: output.id + '_' + time.getTime(),
|
||||
message: err.message,
|
||||
stack: err.stack,
|
||||
type: 'error'
|
||||
});
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
// 清空
|
||||
btnClear() {
|
||||
this.$confirm('确定要清空输入和输出的内容吗？', '', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
|
||||
this.input.editor.doc.setValue('');
|
||||
this.output.lines = [];
|
||||
this.$message({
|
||||
message: '已清除',
|
||||
type: 'success'
|
||||
});
|
||||
|
||||
}).catch(() => {
|
||||
|
||||
this.$message({
|
||||
message: '取消清除',
|
||||
type: 'info'
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tool-page {
|
||||
@lineHeight: 1.25rem;
|
||||
@lineHeight: 1.25rem;
|
||||
|
||||
padding-bottom: 5rem;
|
||||
padding-bottom: 5rem;
|
||||
|
||||
> div {
|
||||
.text {
|
||||
line-height: @lineHeight;
|
||||
font-family: monospace;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
> div {
|
||||
.text {
|
||||
line-height: @lineHeight;
|
||||
font-family: monospace;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
/deep/ .CodeMirror {
|
||||
width: 100%;
|
||||
height: calc(@lineHeight * 20 + 0.5rem);
|
||||
box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);
|
||||
line-height: @lineHeight;
|
||||
}
|
||||
}
|
||||
|
||||
.output {
|
||||
.text {
|
||||
padding: 1rem;
|
||||
height: calc(@lineHeight * 10);
|
||||
border: 0.1rem solid #EEE;
|
||||
border-radius: 0.32rem;
|
||||
overflow: auto;
|
||||
user-select: text;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.input {
|
||||
/deep/ .CodeMirror {
|
||||
width: 100%;
|
||||
height: calc(@lineHeight * 20 + 0.5rem);
|
||||
box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);
|
||||
line-height: @lineHeight;
|
||||
}
|
||||
}
|
||||
|
||||
.output {
|
||||
.text {
|
||||
padding: 1rem;
|
||||
height: calc(@lineHeight * 10);
|
||||
border: 0.1rem solid #EEE;
|
||||
border-radius: 0.32rem;
|
||||
overflow: auto;
|
||||
user-select: text;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.line {
|
||||
&.error {
|
||||
color: @colorRed;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
&.error {
|
||||
color: @colorRed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user