时间戳

首页 > 解决方案 > 直接在 HTML 标签中使用 Vue-JS 自定义辅助函数

javascript - 直接在 HTML 标签中使用 Vue-JS 自定义辅助函数

问题描述

我在 VueJS 中有我的辅助函数，我可以在 JavaScript 中调用它，但不能在 HTML 标记中使用它。以下是我的 helper.js 函数。

//Helper JS file
const allowNumbers = e => {
  var key = e.which || e.keyCode;

  if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
  // numbers   
      key >= 48 && key <= 57 ||
  // Numeric keypad
      key >= 96 && key <= 105 ||
  // comma, period and minus, . on keypad
    key == 190 || key == 188 || key == 109 || key == 110 ||
  // Backspace and Tab and Enter
    key == 8 || key == 9 || key == 13 ||
  // Home and End
    key == 35 || key == 36 ||
  // left and right arrows
    key == 37 || key == 39 ||
  // Del and Ins
    key == 46 || key == 45)
      return true
  e.preventDefault()
  return false
}
export {
  allowNumbers
}

我将它导入到 Vue 组件中，但它给出了“未定义函数”的错误。我的 Vue 文件是。

<!-- Vue component file -->
<input maxlength="4" type="text" @keydown="allowNumbers" />

<script>
import {allowNumbers} from '@/helpers'
</script>

注意：我已经更新了我的代码，但我仍然需要一些方法来直接在 HTML 中使用辅助函数

标签： javascriptfunctionvue.jsvuejs2vue-component

解决方案

至于您从 vue 模板访问数据或功能的问题，请确保该属性在数据选项中或在方法下列出。 假设我们有以下辅助函数

//Helper JS file
const utilFunc = num => {
  if (num < 0) {
    return "negetive";
  }
  return "posetive";
};
export { utilFunc };

在你的 vue 组件中

<template>
  <div id="app">
  {{val}}
  {{proxyUtilFunc(-9)}}
  </div>
</template>

<script>
import { utilFunc } from "@/helpers";
export default {
  name: "App",
   methods: {
      proxyUtilFunc: utilFunc
  },
  data() {
    return {
      val: utilFunc(5)
    };
  }
};
</script>

但正如我所注意到的，您正在尝试使用动态样式值呈现 HTML，这正是我们需要组件的原因。

因此，我强烈建议您将其重构为自己的微调器组件。

<template>
  <div>
    <i v-bind:style="{fontSize: size + 'px' }" class='fa fa-spinner fa-spin'></i>
  </div>
</template>

<script>

export default {
  name: "MySpinner",
  props: {
    size: {
      type: Number
    }
  }
};
</script>

这是一个可供试验的沙箱。

注意：考虑查看官方 文档的代码可重用性部分 use directives，vue mixins and vue plugins for code reusblity 。

推荐阅读