我正在使用 Vue CLI 创建一个应用程序，并且在某些时候我希望用户能够即时修改和运行一个函数。更具体地说，我的 App Updates
effetcs/effect.ts在我的 import {
HexColor,
HSLColor,
PixelColor,
PixelColorArray,
RGBColor,
} from "./color";
import { CustomizationOptions } from "./customization-options";
export class DefaultRainbowEffect extends Effect {
constructor() {
super("Default rainbow effect", {
staticEffect: false,
colors: (prevColors: PixelColorArray, length: number) => {
let hue = prevColors.colors[0].color.toHSL().h + 1;
const arr: PixelColor[] = [];
for (let i = 0; i < length; ++i) {
arr.push(new PixelColor(i, new HSLColor(hue, 100, 50).toRGB()));
hue += 10;
}
return new PixelColorArray(arr);
},
});
}
}
中，我将 Home.vue 函数绑定到输入的 colors，以便用户可以修改和运行它。当我在输入中打印它时，它看起来像这样 -
v-model我注意到 Webpack 更改了导入，这看起来很麻烦。有什么方法可以在函数内编写实际的类名，如 function colors(prevColors, length) {
var hue = prevColors.colors[0].color.toHSL().h + 1;
var arr = [];
for (var i = 0; i < length; ++i) {
arr.push(new _color__WEBPACK_IMPORTED_MODULE_5__["PixelColor"](i, new _color__WEBPACK_IMPORTED_MODULE_5__["HSLColor"](hue, 100, 50).toRGB()));
hue += 10;
}
return new _color__WEBPACK_IMPORTED_MODULE_5__["PixelColorArray"](arr);
}
并在 RGBColor 或 eval 构造函数中使用它？或者，也许我在函数体中写了名字，并在将它们传递给 eval 之前有某种方法将它们转换为它们的 webpack 等效项？