更新时间：2024-07-03 GMT+08:00
使用JS面板
在常规代码开发中，我们需要为某个区块或者某个元素添加一些事件，比如单击事件，同一个页面的事件会统一保存到对应的页面JS中。
很多时候我们需要自定义一些方法去复用一些逻辑，也需要用到页面JS。
需要注意的是当前的页面JS只能使用声明函数，不能使用函数表达式声明函数，也不能在页面JS中定义其他的变量。
页面JS中可以通过this访问当前页面的state，全局的stores， 以及t函数（获取国际化词条）。
下面将通过两个示例分别展示如何使用。
为组件添加单击事件
- 参考登录AstroPro界面中操作，登录AstroPro界面。
- 在左侧导航栏中，选择“前端应用”。
- 单击待编辑应用模块内的“应用开发”，进入设计器。
- 选中组件，在组件属性设置面板选择“高级”。
- 鼠标悬停在“绑定事件”上，将显示事件列表。
- 在事件列表中，选择onClick事件。
- 在弹框中设置绑定事件。
- 方法名称：选择已有方法或者添加新方法，如果选项添加新方法，单击“确定”之后将在JS面板中创建一个该名称的新方法。
- 扩展参数：调用当前事件传入的真实参数，数组格式，追加在原有事件参数之后如: onClickNew(eventArgs, extParam1, extParam2, ...)。
图1 设置绑定事件
- 单击“确定”，弹出JS面板，刚创建的onClickNew事件已存在JS面板中。
- 在JS面板中编写绑定方法的具体逻辑。
图2 实现逻辑编写
- 单击“保存”，绑定事件完成。
创建普通方法在生命周期中使用
- 参考登录AstroPro界面中操作，登录AstroPro界面。
- 在左侧导航栏中，选择“前端应用”。
- 单击待编辑应用模块内的“应用开发”，进入设计器。
- 在左侧插件栏中，单击
，展开JS页面。 - 在JS页面中添加getA方法。
- 在左侧插件栏中，单击
，进入“页面管理”页面。 - 鼠标悬浮到当前页面名称上，将显示操作按钮，单击
，进入页面设置页面。 - 单击“添加页面生命周期”，选择setup。
- 在setup函数使用getA()，单击“保存”。
出码结果
在顶部工具栏单击“下载源码”，查看出码结果。
<template>
<div>
<span>{{ state.testValue }}</span>
<img
src="/images/1.jpg"
style="width: 200px; height: 200px"
@click="(...eventArgs) => getA(eventArgs, 12)"
/>
</div>
</template>
<script setup>
import * as vue from 'vue'
import { defineProps, defineEmits } from 'vue'
import { I18nInjectionKey } from 'vue-i18n'
const props = defineProps({})
const emit = defineEmits([])
const { t, lowcodeWrap, stores } = vue.inject(I18nInjectionKey).lowcode()
const wrap = lowcodeWrap(props, { emit }, t)
const state = vue.reactive({
testValue: {}
})
const getA = wrap(function (eventArgs, args0) {
const testData = {
name: 'rico',
age: 18
}
return testData
})
wrap({
stores,
state,
getA
})
const setup = wrap(function setup({ props, state, watch, onMounted }) {
state.testValue = getA()
})
setup({ props, context: { emit }, state, ...vue })
</script>
如上代码所示：在设计器中编辑的方法，为组件添加的单击事件等都有生成，并且会默认暴露出t函数（国际化，具体可参考如何使用国际化词条）和全局stores(pinia)状态。
