<template>
|
<div class='cof'>
|
<v-header
|
title="本地配置"
|
headerBtn
|
:headerText="[{title:'初始化'}]"
|
@btn-click="onReset"
|
></v-header>
|
<v-header
|
title="网络请求设置"
|
bold
|
mini
|
></v-header>
|
<div class="fm">
|
<section class="sec">
|
<p class="label">请求数据加载动画：</p>
|
<article>
|
<el-radio
|
v-model="a1"
|
label="1"
|
>开启</el-radio>
|
<el-radio
|
v-model="a1"
|
label="2"
|
>关闭</el-radio>
|
</article>
|
</section>
|
<section
|
class="sec"
|
v-if="a1==='1'"
|
>
|
<p class="label">请求数据加载时间/毫秒：</p>
|
<article>
|
<el-input
|
size="small"
|
placeholder="请输入时间/毫秒"
|
v-model="timeout"
|
@keyup.native.13="checkTimeout"
|
></el-input>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label">基础数据请求时间段/分：</p>
|
<article>
|
<el-input
|
size="small"
|
placeholder="请输入时间段/分钟"
|
v-model="wait_time"
|
@keyup.native.13="checkWaitTimeout"
|
></el-input>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label">debug模式：</p>
|
<article>
|
<el-radio
|
v-model="a2"
|
label="1"
|
>开启</el-radio>
|
<el-radio
|
v-model="a2"
|
label="2"
|
>关闭</el-radio>
|
</article>
|
</section>
|
</div>
|
<v-header
|
title="全局图片查看设置"
|
bold
|
mini
|
></v-header>
|
<div class="fm">
|
<section class="sec">
|
<p class="label">放大缩小倍数：</p>
|
<article>
|
<el-input
|
size="small"
|
type="number"
|
step="0.1"
|
placeholder="请输入单次放大/缩小倍数"
|
v-model="image.scale"
|
@keyup.native.13="setImageScale"
|
></el-input>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label">复位按钮：</p>
|
<article>
|
<el-radio
|
v-model="image.reset"
|
label="1"
|
>开启</el-radio>
|
<el-radio
|
v-model="image.reset"
|
label="2"
|
>关闭</el-radio>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label">方向按钮：</p>
|
<article>
|
<el-radio
|
v-model="image.dire"
|
label="1"
|
>开启</el-radio>
|
<el-radio
|
v-model="image.dire"
|
label="2"
|
>关闭</el-radio>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label">键盘操作：</p>
|
<article>
|
<el-radio
|
v-model="image.key"
|
label="1"
|
>开启</el-radio>
|
<el-radio
|
v-model="image.key"
|
label="2"
|
>关闭</el-radio>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label">横向操作距离/px：</p>
|
<article>
|
<el-input
|
size="small"
|
type="number"
|
step="1"
|
min="1"
|
placeholder="请输入单次横向操作距离"
|
v-model="image.x"
|
@keyup.native.13="setImageX"
|
></el-input>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label">纵向操作距离/px：</p>
|
<article>
|
<el-input
|
size="small"
|
type="number"
|
step="1"
|
min="1"
|
placeholder="请输入单次纵向操作距离"
|
v-model="image.y"
|
@keyup.native.13="setImageY"
|
></el-input>
|
</article>
|
</section>
|
</div>
|
<v-header
|
title="主题设置"
|
bold
|
mini
|
></v-header>
|
<div class="fm">
|
<section class="sec">
|
<p class="label">导航条：</p>
|
<article></article>
|
</section>
|
<section class="sec">
|
<p class="label">标题背景</p>
|
<article class="flex">
|
<el-color-picker
|
v-model="theme.nav.header"
|
size="mini"
|
:predefine="predefineColors"
|
show-alpha
|
></el-color-picker>
|
<el-input
|
size="small"
|
v-model="theme.nav.header"
|
readonly
|
></el-input>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label">标题字体</p>
|
<article class="flex">
|
<el-color-picker
|
v-model="theme.nav.headerColor"
|
size="mini"
|
:predefine="predefineColors"
|
show-alpha
|
></el-color-picker>
|
<el-input
|
size="small"
|
v-model="theme.nav.headerColor"
|
readonly
|
></el-input>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label">导航条背景</p>
|
<article class="flex">
|
<el-color-picker
|
v-model="theme.nav.body"
|
size="mini"
|
:predefine="predefineColors"
|
show-alpha
|
></el-color-picker>
|
<el-input
|
size="small"
|
v-model="theme.nav.body"
|
readonly
|
></el-input>
|
</article>
|
</section>
|
<section class="sec">
|
<p class="label">选中导航背景</p>
|
<article class="flex">
|
<el-color-picker
|
v-model="theme.nav.child"
|
size="mini"
|
:predefine="predefineColors"
|
show-alpha
|
></el-color-picker>
|
<el-input
|
size="small"
|
v-model="theme.nav.child"
|
readonly
|
></el-input>
|
</article>
|
</section>
|
</div>
|
<v-header
|
title="历史操作记录"
|
bold
|
mini
|
headerBtn
|
:headerText="[{title:'清除'}]"
|
@btn-click="onHistoryReset"
|
v-if="history.length"
|
></v-header>
|
<div class="history">
|
<ul>
|
<li
|
v-for="(x,u) in history"
|
:key="u+'-history'"
|
@click.stop="onHistoryDetail(x)"
|
>
|
<span class="name">{{x.title}}</span>
|
<span class="time">{{times(x.timeout)}}</span>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {},
|
components: {},
|
data() {
|
return {
|
a1: "2",
|
a2: "2",
|
timeout: 800,
|
wait_time: 0,
|
history: [],
|
image: { scale: "", reset: "2", x: "", y: "", dire: "2", key: "2" },
|
predefineColors: ["rgb(1,21,40)", "#38f", "rgb(2,34,63)"],
|
theme: {
|
nav: {
|
body: "rgb(1,21,40)",
|
child: "#38f",
|
header: "rgb(2,34,63)",
|
headerColor: "#fff",
|
},
|
},
|
};
|
},
|
watch: {
|
a1(n) {
|
demo.$local.set("loading", n === "1");
|
},
|
a2(n) {
|
demo.$local.set("debug", n === "1");
|
console.clear();
|
},
|
"image.dire"(n) {
|
demo.$local.set("image-watch-dire", n === "1");
|
},
|
"image.reset"(n) {
|
demo.$local.set("image-watch-reset", n === "1");
|
},
|
"image.key"(n) {
|
demo.$local.set("image-watch-key", n === "1");
|
},
|
"theme.nav": {
|
handler(n) {
|
demo.$local.set("theme-nav-color", n);
|
this.$store.dispatch("setTheme", Date.now());
|
},
|
deep: true,
|
},
|
},
|
methods: {
|
onReset() {
|
this.$js.model("初始化操作", "是否进行初始化操作", (res) => {
|
if (res) {
|
demo.$local.clear([
|
"loading-time",
|
"wait-time",
|
"loading",
|
"debug",
|
"image-watch-scale",
|
"image-watch-x",
|
"image-watch-y",
|
"image-watch-reset",
|
"image-watch-dire",
|
"image-watch-key",
|
"theme-nav-color",
|
]);
|
this.$js.history.clear();
|
demo.location(window.location.href);
|
}
|
});
|
},
|
times(v) {
|
return demo.timeout(v);
|
},
|
checkTime(v, fn, min) {
|
min = min || 1;
|
if (isNaN(v)) {
|
demo.toast("请输入正整数");
|
return 0;
|
}
|
if (+v < min) {
|
demo.toast("请输入大于" + min + "的数值");
|
return 0;
|
}
|
fn();
|
},
|
// 请求 loading 显示时间
|
checkTimeout() {
|
let v = this.timeout;
|
this.checkTime(
|
v,
|
() => {
|
demo.$local.set("loading-time", +v);
|
demo.toast("设置成功");
|
},
|
200
|
);
|
},
|
// 不常用数据 缓存 请求时间 分
|
checkWaitTimeout() {
|
let v = this.wait_time;
|
this.checkTime(v, () => {
|
demo.$local.set("wait-time", +v);
|
demo.toast("设置成功");
|
});
|
},
|
// 清除 历史浏览
|
onHistoryReset() {
|
this.$js.model("清除历史浏览记录", "是否清除", (res) => {
|
if (res) {
|
this.history = this.$js.history.clear();
|
}
|
});
|
},
|
// 跳转 历史浏览
|
onHistoryDetail(v) {
|
this.$router.push(this.$nav.url(v.url));
|
},
|
// 设置 全局图片盒子 倍数
|
setImageScale() {
|
if (+this.image.scale < 0.1) {
|
demo.toast("请输入不小于0.1的倍数");
|
return 0;
|
}
|
demo.$local.set("image-watch-scale", this.image.scale);
|
demo.toast("设置成功");
|
},
|
setImageX() {
|
if (+this.image.x < 1) {
|
demo.toast("请输入不小于1的正整数");
|
return 0;
|
}
|
demo.$local.set("image-watch-x", this.image.x);
|
demo.toast("设置成功");
|
},
|
setImageY() {
|
if (+this.image.y < 1) {
|
demo.toast("请输入不小于1的正整数");
|
return 0;
|
}
|
demo.$local.set("image-watch-y", this.image.y);
|
demo.toast("设置成功");
|
},
|
},
|
mounted() {
|
let v = demo.$local.get("loading-time");
|
let v2 = demo.$local.get("wait-time");
|
this.a1 = demo.$local.get("loading") === true ? "1" : "2";
|
this.a2 = demo.$local.get("debug") === true ? "1" : "2";
|
this.timeout = v > 200 ? v : 500;
|
this.wait_time = v2 < 1 ? 120 : v2;
|
this.history = this.$js.history.get();
|
this.image.scale = demo.$local.get("image-watch-scale") || 0.1;
|
this.image.x = demo.$local.get("image-watch-x") || 1;
|
this.image.y = demo.$local.get("image-watch-y") || 1;
|
this.image.reset =
|
demo.$local.get("image-watch-reset") === true ? "1" : "2";
|
this.image.dire = demo.$local.get("image-watch-dire") === true ? "1" : "2";
|
this.image.key = demo.$local.get("image-watch-key") === true ? "1" : "2";
|
let tn = demo.$local.get("theme-nav-color") || {};
|
if (tn.body) {
|
this.theme.nav = tn;
|
}
|
},
|
};
|
</script>
|
<style lang='less' scoped>
|
.cof {
|
font-size: 14px;
|
overflow-y: auto;
|
.el-radio {
|
margin-top: 10px;
|
}
|
.fm {
|
width: 500px;
|
.sec .label {
|
width: 200px;
|
font-size: 12px;
|
font-weight: 700;
|
}
|
.flex {
|
display: flex;
|
.el-input,
|
.el-color-picker {
|
margin-left: 5px;
|
}
|
}
|
}
|
.history {
|
max-width: 400px;
|
li {
|
height: 30px;
|
line-height: 30px;
|
margin-bottom: 2px;
|
box-sizing: border-box;
|
padding: 0 5px;
|
display: flex;
|
cursor: pointer;
|
border-bottom: 1px solid rgba(204, 204, 204, 0.5);
|
&:hover {
|
color: rgb(37, 179, 101);
|
}
|
.name {
|
flex: 1;
|
}
|
.time {
|
font-size: 12px;
|
color: #999;
|
padding: 0 10px;
|
}
|
}
|
}
|
}
|
</style>
|
