完善页面
This commit is contained in:
@@ -1,14 +1,142 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="detail-elem">
|
<div class="tool-elem">
|
||||||
开发中,敬请期待。
|
|
||||||
|
<!-- 输入 -->
|
||||||
|
<div class="input">
|
||||||
|
<div class="title">代码</div>
|
||||||
|
<el-input v-model="input.value" type="textarea" class="text"
|
||||||
|
:placeholder="input.placeholder" rows="10"
|
||||||
|
></el-input>
|
||||||
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'OtherRunJS'
|
name: 'OtherRunJS',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
input: {
|
||||||
|
value: '',
|
||||||
|
placeholder: '请在此处输入 JavaScript 代码'
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
id: 0,
|
||||||
|
lines: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
// 运行
|
||||||
|
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.value = '';
|
||||||
|
this.output.lines = [];
|
||||||
|
this.$message({
|
||||||
|
message: '已清除',
|
||||||
|
type: 'success'
|
||||||
|
});
|
||||||
|
|
||||||
|
}).catch(() => {
|
||||||
|
|
||||||
|
this.$message({
|
||||||
|
message: '取消清除',
|
||||||
|
type: 'info'
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
.tool-elem {
|
||||||
|
@lineHeight: 1.2rem;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
.text {
|
||||||
|
line-height: @lineHeight;
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
/deep/ .text textarea {
|
||||||
|
padding: 0.75rem;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@@ -23,13 +23,12 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 弹出 -->
|
<!-- 弹出 -->
|
||||||
<el-drawer direction="btt" size="100%" :append-to-body="true" :destroy-on-close="true"
|
<el-drawer custom-class="drawer-full" direction="btt" size="100%"
|
||||||
:title="detail.title" :visible.sync="detail.show" :before-close="closeDetail"
|
:append-to-body="true" :destroy-on-close="true" :title="detail.title"
|
||||||
|
:visible.sync="detail.show" :before-close="closeDetail"
|
||||||
>
|
>
|
||||||
<!-- 内容页 -->
|
<!-- 内容 -->
|
||||||
<div class="tool-content">
|
<router-view></router-view>
|
||||||
<router-view></router-view>
|
|
||||||
</div>
|
|
||||||
</el-drawer>
|
</el-drawer>
|
||||||
|
|
||||||
</el-container>
|
</el-container>
|
||||||
@@ -207,8 +206,4 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tool-content {
|
|
||||||
padding: 0 2rem 2rem 2rem;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
@@ -1,18 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="tools-detail">
|
<div class="tools-detail">
|
||||||
<component :is="detailElem" />
|
<component :is="toolElem" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ToolsDetail',
|
name: 'ToolsDetail',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
utils: this.$root.utils,
|
utils: this.$root.utils,
|
||||||
routeQuery: {},
|
routeQuery: {},
|
||||||
detailElem: null
|
toolElem: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeRouteEnter(to, from, next) {
|
beforeRouteEnter(to, from, next) {
|
||||||
@@ -23,7 +22,7 @@ export default {
|
|||||||
console.log('[打开工具] params', params);
|
console.log('[打开工具] params', params);
|
||||||
console.log('[打开工具] query', query);
|
console.log('[打开工具] query', query);
|
||||||
|
|
||||||
vm.detailElem = () => {
|
vm.toolElem = () => {
|
||||||
// 动态引入组件
|
// 动态引入组件
|
||||||
var elem = import(`@/components/tools/${query.component}.vue`);
|
var elem = import(`@/components/tools/${query.component}.vue`);
|
||||||
|
|
||||||
@@ -35,5 +34,22 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
.tools-detail {
|
||||||
|
display: flex;
|
||||||
|
align-items: top;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/deep/ .tool-elem {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 60rem;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
> .title {
|
||||||
|
padding: 1rem 0;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
Reference in New Issue
Block a user