我在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中使用辅助函数
答案 0 :(得分:2)
关于从vue模板访问和数据或功能的问题确保该属性在数据选项中 或在方法下列出。 假设我们有以下辅助函数
//Helper JS file
const utilFunc = num => {
if (num < 0) {
return "negetive";
}
return "posetive";
};
export { utilFunc };
在yout 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,这正是我们需要 components 的原因。
所以我强烈建议你将它重构为spinner组件 自己的。
<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>
这是一个sandbox来试验。
注意:请考虑检查官方的代码可重用性部分 documentation使用directives, vue mixins 和 vue plugins 代码可重用性。