将锚点代码集成到页面左侧的目录中 - 快速教程
<template>
<div>
<t-anchor :bounds="150">
<t-anchor-item href="#基础锚点" title="基础锚点"></t-anchor-item>
<t-anchor-item href="#多级锚点" title="多级锚点"></t-anchor-item>
<t-anchor-item href="#指定容器锚点" title="指定容器锚点"></t-anchor-item>
<t-anchor-item href="#特定交互锚点" title="特定交互锚点"></t-anchor-item>
<t-anchor-item href="#尺寸" title="尺寸"></t-anchor-item>
</t-anchor>
</div>
</template>
<script>
export default {};
</script>
集成到如下代码中，作为目录放在页面左侧
<template>
<t-card :bordered="false">
<t-form
ref="form"
:data="formData"
:rules="FORM_RULES"
label-align="top"
:label-width="100"
@reset="onReset"
@submit="onSubmit"
>
<div class="form-basic-container">
<div class="form-basic-item">
<div class="form-basic-container-title">模板信息【UUID:{{template.template_uuid}}】</div>
<t-form-item label="模板名" name="templateTitle">
<t-input v-model="formData.templateTitle" :style="{ width: '322px' }" />
</t-form-item>
<t-form-item label="模板描述" name="templateDescription">
<t-textarea v-model="formData.templateDescription" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="模板描述" />
</t-form-item>
<pre><code> <div class="form-basic-container-title" style="font-size: 28px; margin-bottom: 0px;">探索配置</div>
<div class="form-basic-item">
<!-- 表单内容 -->
<t-row class="row-gap" :gutter="[16, 24]">
<t-col :span="12">
<div class="form-basic-container-title" style="font-size: 24px;">探索范围配置</div>
<t-form-item label="控件白名单" name="controlWhitelist">
<t-textarea v-model="formData.controlWhitelist" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="控件白名单" />
</t-form-item>
<t-form-item label="控件黑名单" name="controlBlacklist">
<t-textarea v-model="formData.controlBlacklist" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="控件黑名单" />
</t-form-item>
<t-form-item label="界面白名单" name="interfaceWhitelist">
<t-textarea v-model="formData.interfaceWhitelist" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="界面白名单" />
</t-form-item>
<t-form-item label="界面黑名单" name="interfaceBlacklist">
<t-textarea v-model="formData.interfaceBlacklist" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="界面黑名单" />
</t-form-item>
</t-col>
</t-row>
<t-row class="row-gap" :gutter="[16, 24]">
<t-col :span="12">
<div class="form-basic-container-title" style="font-size: 24px;">定向操作配置</div>
<t-form ref="formRef" :model="formData" label-width="100px">
<div style="font-size: 16px; margin-bottom: 20px;">识别器</div>
<t-form-item label="所在界面名" prop="interfaceName">
<t-input v-model="formData.interfaceName" style="width: 322px; font-size: 14px;" placeholder="所在界面名" />
</t-form-item>
<t-form-item label="包含元素" prop="includedElements">
<t-input v-model="formData.includedElements" style="width: 322px; font-size: 14px;" placeholder="包含元素" />
</t-form-item>
<div style="font-size: 16px; margin-bottom: 20px;">操作器</div>
<t-form-item label="点击" prop="click">
<t-input v-model="formData.click" style="width: 322px; font-size: 14px;" placeholder="点击" />
</t-form-item>
<t-form-item label="滑动" prop="slide">
<t-input v-model="formData.slide" style="width: 322px; font-size: 14px;" placeholder="滑动" />
</t-form-item>
<t-form-item label="重启" prop="restart">
<t-input v-model="formData.restart" style="width: 322px; font-size: 14px;" placeholder="重启" />
</t-form-item>
<t-form-item label="post" prop="post">
<t-input v-model="formData.post" style="width: 322px; font-size: 14px;" placeholder="post" />
</t-form-item>
<t-form-item label="shell" prop="shell">
<t-input v-model="formData.shell" style="width: 322px; font-size: 14px;" placeholder="shell" />
</t-form-item>
</t-form>
</t-col>
</t-row>
<t-row class="row-gap" :gutter="[16, 24]">
<t-col :span="12">
<div class="form-basic-container-title" style="font-size: 24px;">定时操作配置</div>
<t-form-item label="开始时" name="controlWhitelist">
<t-textarea v-model="formData.controlWhitelist" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="开始时" />
</t-form-item>
<t-form-item label="定时操作" name="controlBlacklist">
<t-textarea v-model="formData.controlBlacklist" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="定时操作" />
</t-form-item>
<t-form-item label="结束时" name="interfaceWhitelist">
<t-textarea v-model="formData.interfaceWhitelist" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="结束时" />
</t-form-item>
</t-col>
</t-row>
<t-row class="row-gap" :gutter="[16, 24]">
<t-col :span="12">
<div class="form-basic-container-title" style="font-size: 24px;">预设通用配置</div>
<t-form-item label="登录方式" name="login_method">
<t-radio-group v-model="formData.login_method">
<t-radio value="0">微信登录</t-radio>
<t-radio value="1">QQ登录</t-radio>
</t-radio-group>
</t-form-item>
<t-form-item label="账号-密码" name="controlWhitelist">
<t-textarea v-model="formData.Accounts" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入账号密码" />
</t-form-item>
</t-col>
</t-row>
<t-row class="row-gap" :gutter="[16, 24]">
<t-col :span="12">
<div class="form-basic-container-title" style="font-size: 24px;">AI配置</div>
<t-form-item label="AI生成配置" name="AIGenConfig">
<t-textarea v-model="formData.AIGenConfig" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="Al生成配置" />
</t-form-item>
<t-form-item label="AI引导操作" name="AIBootOpera">
<t-textarea v-model="formData.AIBootOpera" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="AI引导操作" />
</t-form-item>
</t-col>
</t-row>
</div>
<div class="form-basic-container-title" style="font-size: 28px; margin-bottom: 20px;">环境配置</div>
<t-form-item label="弱网配置" name="networkConfig">
<t-input v-model="formData.networkConfig" :style="{ width: '322px' }" placeholder="弱网配置" />
</t-form-item>
<div class="form-basic-container-title" style="font-size: 28px; margin-bottom: 20px;">数据回收配置</div>
<div style="font-size: 16px; margin-bottom: 20px;">截图频率</div>
<t-form-item label="操作时" prop="DurOperation">
<t-input v-model="formData.DurOperation" style="width: 322px; font-size: 14px;" placeholder="操作时" />
</t-form-item>
<t-form-item label="定时频率" prop="TimingFrequency">
<t-input v-model="formData.TimingFrequency" style="width: 322px; font-size: 14px;" placeholder="定时频率" />
</t-form-item>
<div style="font-size: 16px; margin-bottom: 20px;">故障监控方式</div>
<t-form-item label="系统日志监控" prop="SystemLogMonitoring">
<t-input v-model="formData.SystemLogMonitoring" style="width: 322px; font-size: 14px;" placeholder="系统日志监控" />
</t-form-item>
<t-form-item label="ilogs查找" prop="IlogsSearch">
<t-input v-model="formData.IlogsSearch" style="width: 322px; font-size: 14px;" placeholder="uin 配置" />
</t-form-item>
<div class="form-basic-container-title" style="font-size: 28px; margin-bottom: 20px;">故障提单配置</div>
<div style="font-size: 16px; margin-bottom: 20px;">提单模板</div>
<t-form-item label="tapd" prop="tapd">
<t-input v-model="formData.tapd" style="width: 322px; font-size: 14px;" placeholder="tapd" />
</t-form-item>
<t-form-item label="提单人" prop="Presenter">
<t-input v-model="formData.Presenter" style="width: 322px; font-size: 14px;" placeholder="提单人" />
</t-form-item>
<t-form-item label="关注人" prop="FollowPeople">
<t-input v-model="formData.FollowPeople" style="width: 322px; font-size: 14px;" placeholder="关注人" />
</t-form-item>
<t-form-item label="内容" prop="Content">
<t-input v-model="formData.Content" style="width: 322px; font-size: 14px;" placeholder="内容" />
</t-form-item>
<div style="font-size: 16px; margin-bottom: 20px;">提单过滤</div>
<t-form-item label="重复单聚类" prop="DuplicateOrderClustering">
<t-input v-model="formData.DuplicateOrderClustering" style="width: 322px; font-size: 14px;" placeholder="重复单聚类" />
</t-form-item>
<t-form-item label="非重点故障过滤" prop="NonkeyFaultFiltering">
<t-input v-model="formData.NonkeyFaultFiltering" style="width: 322px; font-size: 14px;" placeholder="非重点故障过滤" />
</t-form-item>
</div>
</div>
<div class="form-submit-container">
<div class="form-submit-sub">
<div class="form-submit-left">
<t-button theme="primary" class="form-submit-confirm" type="submit"> 提交 </t-button>
<t-button type="reset" class="form-submit-cancel" theme="default" variant="base"> 取消 </t-button>
</div>
</div>
</div>
</t-form>
</code></pre>
</t-card>
</template>
```
<pre><code class="language-javascript"><script>
import { prefix } from '@/config/global';
const INITIAL_DATA = {
templateTitle: '',
templateDescription: '',
controlWhitelist: '',
controlBlacklist: '',
interfaceWhitelist: '',
interfaceBlacklist: '',
recognizer: '',
operator: '',
timingOperation: '',
presetConfig: '',
aiConfig: '',
networkConfig: '',
screenshotFrequency: '',
faultMonitoring: '',
ticketTemplate: '',
ticketFilter: '',
tapd:'',
Presenter:'',
FollowPeople:'',
Content:'',
DuplicateOrderClustering:'',
NonkeyFaultFiltering:'',
Accounts:'',
};
const FORM_RULES = {
appIdentifier: [{ required: true, message: '请输入app的标识符', type: 'error' }],
};
export default {
name: 'FormBase',
data() {
return {
prefix,
stepSuccess: true,
formData: { ...INITIAL_DATA },
FORM_RULES,
dataLoading: false,
template: { },
};
},
watch: {
// eslint-disable-next-line func-names
'$route': function(to, from) {
if (to.path.endsWith('/explore_config_details')) {
console.log("to explore_config_detail")
// 只有在 /tasks 路由的参数改变时才执行
this.getTemplate();
}
}
},
mounted() {
console.log("this is template detail page")
this.getTemplate()
},
methods: {
getTemplate() {
this.dataLoading = true;
this.$request
.get(`/web/projects/${this.$route.params.id}/tasks/${this.$route.params.tid}/explore_config_templates/${this.$route.params.pid}`, {
headers: {
},
withCredentials: true
})
.then((res) => {
console.log(res)
if (res.status === 200) {
const tp = res.data;
console.log(tp)
this.template = tp;
this.formData.templateTitle = this.template.template_title;
this.formData.templateDescription = this.template.template_description;
const content = JSON.parse(this.template.content)
if (content !== null && typeof content!== 'undefined') {
this.formData.appIdentifier = content.app_identifier
this.formData.initCommandDescription = content.init_command_description
this.formData.formulatedCommandDescription = content.formulated_command_description
}
}
})
.catch((e) => {
console.log(e);
})
.finally(() => {
this.dataLoading = false;
});
},
handleFail({ file }) {
this.$message.error(`文件 ${file.name} 上传失败`);
},
beforeUpload(file) {
if (!/.(pdf)$/.test(file.name)) {
this.$message.warning('请上传pdf文件');
return false;
}
return true;
},
// 用于格式化接口响应值，error 会被用于上传失败的提示文字；url 表示文件/图片地址
formatResponse(res) {
return { ...res, error: '上传失败，请重试', url: res.url };
},
changeStatus() {
this.stepSuccess = !this.stepSuccess;
},
onReset() {
this.$message.warning('取消新建');
},
onSubmit({ validateResult }) {
if (validateResult === true) {
const contentData = {
app_identifier : this.formData.appIdentifier,
init_command_description : this.formData.initCommandDescription,
formulated_command_description : this.formData.formulatedCommandDescription
}
this.$request
.put(`/web/projects/${this.$route.params.id}/tasks/${this.$route.params.tid}/explore_config_templates/${this.$route.params.pid}`, {
template_title: this.formData.templateTitle,
template_description: this.formData.templateDescription,
content: JSON.stringify(contentData)
}, {
withCredentials: true
})
.then((res) => {
console.log(res)
if (res.status === 200) {
this.$message.success('保存成功');
}
})
.catch((e) => {
console.log(e);
this.$message.error('保存失败');
})
.finally(() => {
console.log("save");
});
}
},
},
};
</script>
<style lang="less" scoped>
@import './index';
main {
padding: 24px;
}
.form-basic-container-title {
font-size: 18px;
color: #333;
margin-bottom: 16px;
}
</style>
内容：将锚点代码集成到页面左侧的目录中，可以按照以下步骤进行操作：
1. 在页面左侧的目录位置，找到需要插入锚点的位置。
2. 将锚点代码<template>...</template>放置在目录位置中，替换原有的内容。
3. 将锚点代码<script>...</script>放置在目录位置中，替换原有的内容。
4. 根据需要修改锚点的标题和链接。
修改后的代码如下所示：
```html
<template>
<div>
<t-anchor :bounds="150">
<t-anchor-item href="#基础锚点" title="基础锚点"></t-anchor-item>
<t-anchor-item href="#多级锚点" title="多级锚点"></t-anchor-item>
<t-anchor-item href="#指定容器
</code></pre>
原文地址: https://www.cveoy.top/t/topic/qyQX 著作权归作者所有。请勿转载和采集!