<template>
<div class="page">
<button class="btn" @click="test()">模板内调用方法</button>
<!-- 其他一大堆元素,内容超过一屏 -->
<!-- aaaaa-->
<!-- aaaaa-->
<!-- aaaaa-->
<!-- aaaaa-->
<!-- aaaaa-->
<!-- aaaaa-->
<!-- aaaaa-->
<!-- aaaaa-->
<!-- aaaaa-->
<!-- aaaaa-->
<!-- aaaaa-->
<!-- aaaaa-->
<!-- aaaaa-->
<!-- aaaaa-->
<!-- aaaaa-->
<!-- aaaaa-->
<!-- aaaaa-->
<!-- aaaaa-->
<!-- aaaaa-->
<!-- aaaaa-->
<!-- aaaaa-->
<!-- aaaaa-->
</div>
</template>
<script>
export default {
data() {
return {
// 这里一堆变量
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
}
},
created() {
this.test();
},
methods: {
test() {
console.log("test");
// 这是test方法的内容,里面一堆代码
//
//
//
//
},
func2(){
this.test();
},
//其他的一大堆function...
//
//
//
//
}
}
</script>
<style lang="scss" scoped>
.page{
.btn{
//btn的样式,里面一堆代码
//
//
//
//
}
{
//其他一大堆元素的样式...
//
//
//
//
//
//
}
}
</style>
- 发布:2022-08-02 11:17
- 更新:2022-12-16 15:08
- 阅读:476
产品分类: HbuilderX
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10 21H1
HBuilderX版本号: 3.5.3
示例代码:
操作步骤:
如上代码所示,按着alt键,鼠标指向class="btn"的div中的test方法,点击鼠标,编辑器会跳转到test方法的位置,但是test方法的代码块没有在屏幕中间或上方的位置显示,只有test方法代码块的第一行出现在屏幕的最下方
或者按着alt键,鼠标指向class="btn"的div中的btn类名,点击鼠标,编辑器会跳转到btn样式的位置,但是btn的样式代码块没有在屏幕中间或上方的位置显示,只有btn样式代码块的第一行出现在屏幕的最下方
如上代码所示,按着alt键,鼠标指向class="btn"的div中的test方法,点击鼠标,编辑器会跳转到test方法的位置,但是test方法的代码块没有在屏幕中间或上方的位置显示,只有test方法代码块的第一行出现在屏幕的最下方
或者按着alt键,鼠标指向class="btn"的div中的btn类名,点击鼠标,编辑器会跳转到btn样式的位置,但是btn的样式代码块没有在屏幕中间或上方的位置显示,只有btn样式代码块的第一行出现在屏幕的最下方
预期结果:
test方法或btn样式的代码块定位到编辑器屏幕中间或上方的位置,能直接一看看到这段代码的全部内容,不需要再手动往上滚动
test方法或btn样式的代码块定位到编辑器屏幕中间或上方的位置,能直接一看看到这段代码的全部内容,不需要再手动往上滚动
实际结果:
test方法或btn样式的代码块定位到了屏幕的最下方,其他内容在屏幕之外,只有往上滚动才能看到此段代码的内容,非常不方便查看和修改
test方法或btn样式的代码块定位到了屏幕的最下方,其他内容在屏幕之外,只有往上滚动才能看到此段代码的内容,非常不方便查看和修改
wyyx50 (作者)
好的
2022-08-03 08:54