文档首页/ Astro企业应用 AstroPro/ 用户指南/ 前端应用管理/ 使用JS面板
更新时间：2024-12-25 GMT+08:00
查看PDF
分享

使用JS面板

在常规代码开发中，您需要为某个区块或者某个元素添加一些事件，比如单击事件，同一个页面的事件会统一保存到对应的页面JS中。

很多时候您需要自定义一些方法去复用一些逻辑，也需要用到页面JS。

需要注意的是当前的页面JS只能使用声明函数，不能使用函数表达式声明函数，也不能在页面JS中定义其他的变量。

页面JS中可以通过this访问当前页面的state，全局的stores， 以及t函数（获取国际化词条）。

下面将通过两个示例分别展示如何使用JS面板。

为组件添加单击事件

  1. 参考登录AstroPro界面中操作，登录AstroPro界面。
  2. 在左侧导航栏中，选择“前端开发平台 > 前端应用”。
  3. 单击待编辑应用模块内的“开发应用”，进入设计器。
  4. 选中组件，在组件属性设置面板选择“高级”。
  5. 鼠标悬停在“绑定事件”上，将显示事件列表。
  6. 在事件列表中，选择onClick事件。
  7. 在弹框中设置绑定事件。

    • 方法名称：选择已有方法或者添加新方法，如果选项添加新方法，单击“确定”之后将在JS面板中创建一个该名称的新方法。
    • 扩展参数：调用当前事件传入的真实参数，数组格式，追加在原有事件参数之后如: onClickNew(eventArgs, extParam1, extParam2, ...)。
    图1 设置绑定事件

  8. 单击“确定”，弹出JS面板，刚创建的onClickNew事件已存在JS面板中。
  9. 在JS面板中编写绑定方法的具体逻辑。

    图2 实现逻辑编写

  10. 单击“保存”，绑定事件完成。

创建普通方法在生命周期中使用

  1. 参考登录AstroPro界面中操作，登录AstroPro界面。
  2. 在左侧导航栏中，选择“前端开发平台 > 前端应用”。
  3. 单击待编辑应用模块内的“开发应用”，进入设计器。
  4. 在左侧插件栏中，单击，展开JS页面。
  5. 在JS页面中添加getA方法。
  6. 在左侧插件栏中，单击，进入“页面管理”页面。
  7. 鼠标悬浮到当前页面名称上，将显示操作按钮，单击，进入页面设置页面。
  8. 单击“添加页面生命周期”，选择setup。
  9. 在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)状态。

父主题： 前端应用管理

相关文档