Ali Ranjbar
3 سال پیش توسط Ali Ranjbar مطرح شد
1 پاسخ

اجرای فایل جاوا اسکریپت در کامپوننت vue

سلام
من یه قالب اماده دارم که توی این قالب در یک سری فایل جاوا اسکریپت توابعی برای نمودارها و... نوشته شده.
پروژه من با استفاده از vue و جنگو رست فریمورک هست و در یکی از کامپوننتها میخوام که از نمودارهایی که خود قالب طراحی کرده استفاده کنم. اما مشکل اینجاس که توابع توی فایل جاوا اسکریپت به صورت IIFE یعنی به این فرمت:

!function (t) {
    var e = {};

    function r(o) {
        if (e[o]) return e[o].exports;
        var n = e[o] = {i: o, l: !1, exports: {}};
        return t[o].call(n.exports, n, n.exports, r), n.l = !0, n.exports
    }

    r.m = t, r.c = e, r.d = function (t, e, o) {
        r.o(t, e) || Object.defineProperty(t, e, {enumerable: !0, get: o})
    }, r.r = function (t) {
        "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(t, Symbol.toStringTag, {value: "Module"}), Object.defineProperty(t, "__esModule", {value: !0})
    }, r.t = function (t, e) {
        if (1 & e && (t = r(t)), 8 & e) return t;
        if (4 & e && "object" == typeof t && t && t.__esModule) return t;
        var o = Object.create(null);
        if (r.r(o), Object.defineProperty(o, "default", {
            enumerable: !0,
            value: t
        }), 2 & e && "string" != typeof t) for (var n in t) r.d(o, n, function (e) {
            return t[e]
        }.bind(null, n));
        return o
    }, r.n = function (t) {
        var e = t && t.__esModule ? function () {
            return t.default
        } : function () {
            return t
        };
        return r.d(e, "a", e), e
    }, r.o = function (t, e) {
        return Object.prototype.hasOwnProperty.call(t, e)
    }, r.p = "/", r(r.s = 53)
}({
    53: function (t, e, r) {
        t.exports = r(54)
    }, 54: function (t, e) {
        $((function (t) {
            "use strict";
            (e = $("#btc-market")).height(50);
            new Chart(e, {
                type: "line",
                data: {
                    labels: ["شهریور","مرداد","تیر","خرداد","اردیبهشت","فروردین","اسفند","بهمن","دی","آذر","آبان","مهر"],
                    type: "line",
                    datasets: [{
                        data: [85, 75, 96, 84, 85, 92, 79, 78, 74, 85, 86, 80],
                        label: "قیمت اتریوم",
                        backgroundColor: "rgba(98, 89, 202, 0.2)",
                        borderColor: "#6259ca",
                        borderWidth: "2",
                        pointBorderColor: "transparent",
                        pointBackgroundColor: "transparent"
                    }]
                },
                options: {
                    maintainAspectRatio: !1,
                    legend: {display: !1},
                    responsive: !0,
                    tooltips: {
                        mode: "index",
                        titleFontSize: 12,
                        titleFontColor: "#7886a0",
                        bodyFontColor: "#7886a0",
                        backgroundColor: "#fff",
                        titleFontFamily: "iransans",
                        bodyFontFamily: "iransans",
                        cornerRadius: 3,
                        intersect: !1
                    },
                    scales: {
                        xAxes: [{
                            gridLines: {color: "transparent", zeroLineColor: "transparent"},
                            ticks: {fontSize: 2, fontColor: "transparent"}
                        }], yAxes: [{display: !1, ticks: {display: !1}}]
                    },
                    title: {display: !1},
                    elements: {line: {borderWidth: 1}, point: {radius: 4, hitRadius: 10, hoverRadius: 4}}
                }
            });
            (e = $("#ethereum-market")).height(50);
            new Chart(e, {
                type: "line",
                data: {
                    labels: ["شهریور","مرداد","تیر","خرداد","اردیبهشت","فروردین","اسفند","بهمن","دی","آذر","آبان","مهر"],
                    type: "line",
                    datasets: [{
                        data: [34, 23, 54, 34, 56, 76, 34, 76, 34, 55, 23, 76],
                        label: "قیمت اتریوم",
                        backgroundColor: "rgba(98, 89, 202, 0.2)",
                        borderColor: "#6259ca",
                        borderWidth: "2",
                        pointBorderColor: "transparent",
                        pointBackgroundColor: "transparent"
                    }]
                },
                options: {
                    maintainAspectRatio: !1,
                    legend: {display: !1},
                    responsive: !0,
                    tooltips: {
                        mode: "index",
                        titleFontSize: 12,
                        titleFontColor: "#7886a0",
                        bodyFontColor: "#7886a0",
                        backgroundColor: "#fff",
                        titleFontFamily: "iransans",
                        bodyFontFamily: "iransans",
                        cornerRadius: 3,
                        intersect: !1
                    },
                    scales: {
                        xAxes: [{
                            gridLines: {color: "transparent", zeroLineColor: "transparent"},
                            ticks: {fontSize: 2, fontColor: "transparent"}
                        }], yAxes: [{display: !1, ticks: {display: !1}}]
                    },
                    title: {display: !1},
                    elements: {line: {borderWidth: 1}, point: {radius: 4, hitRadius: 10, hoverRadius: 4}}
                }
            });
            (e = $("#xrp-market")).height(50);
            var e;
            new Chart(e, {
                type: "line",
                data: {
                    labels: ["شهریور","مرداد","تیر","خرداد","اردیبهشت","فروردین","اسفند","بهمن","دی","آذر","آبان","مهر"],
                    type: "line",
                    datasets: [{
                        data: [7, 5, 7, 3, 5, 2, 5, 3, 9, 6, 5, 9, 7, 3, 5, 2, 7, 10],
                        label: "قیمت اتریوم",
                        backgroundColor: "rgba(98, 89, 202, 0.2)",
                        borderColor: "#6259ca",
                        borderWidth: "2",
                        pointBorderColor: "transparent",
                        pointBackgroundColor: "transparent"
                    }]
                },
                options: {
                    maintainAspectRatio: !1,
                    legend: {display: !1},
                    responsive: !0,
                    tooltips: {
                        mode: "index",
                        titleFontSize: 12,
                        titleFontColor: "#7886a0",
                        bodyFontColor: "#7886a0",
                        backgroundColor: "#fff",
                        titleFontFamily: "iransans",
                        bodyFontFamily: "iransans",
                        cornerRadius: 3,
                        intersect: !1
                    },
                    scales: {
                        xAxes: [{
                            gridLines: {color: "transparent", zeroLineColor: "transparent"},
                            ticks: {fontSize: 2, fontColor: "transparent"}
                        }], yAxes: [{display: !1, ticks: {display: !1}}]
                    },
                    title: {display: !1},
                    elements: {line: {borderWidth: 1}, point: {radius: 4, hitRadius: 10, hoverRadius: 4}}
                }
            });
            (e = $("#ltc-market")).height(50);
            new Chart(e, {
                type: "line",
                data: {
                    labels: ["شهریور","مرداد","تیر","خرداد","اردیبهشت","فروردین","اسفند","بهمن","دی","آذر","آبان","مهر"],
                    type: "line",
                    datasets: [{
                        data: [15, 6, 16, 11, 12, 15, 10, 19, 16, 13, 12, 15, 7, 16, 11],
                        label: "قیمت اتریوم",
                        backgroundColor: "rgba(98, 89, 202, 0.2)",
                        borderColor: "#6259ca",
                        borderWidth: "2",
                        pointBorderColor: "transparent",
                        pointBackgroundColor: "transparent"
                    }]
                },
                options: {
                    maintainAspectRatio: !1,
                    legend: {display: !1},
                    responsive: !0,
                    tooltips: {
                        mode: "index",
                        titleFontSize: 12,
                        titleFontColor: "#7886a0",
                        bodyFontColor: "#7886a0",
                        backgroundColor: "#fff",
                        titleFontFamily: "iransans",
                        bodyFontFamily: "iransans",
                        cornerRadius: 3,
                        intersect: !1
                    },
                    scales: {
                        xAxes: [{
                            gridLines: {color: "transparent", zeroLineColor: "transparent"},
                            ticks: {fontSize: 2, fontColor: "transparent"}
                        }], yAxes: [{display: !1, ticks: {display: !1}}]
                    },
                    title: {display: !1},
                    elements: {line: {borderWidth: 1}, point: {radius: 4, hitRadius: 10, hoverRadius: 4}}
                }
            })
        }))
    }
});

حالا من میخوام این تابع رو توی کامپوننت زمانی که mount میشه فراخوانی کنم ولی واقعا نمیدونم چه تغییری باید توی فایل یا کدها بدم.
ممنون میشم اگه کسی همچین مشکلی داشته راهنمایی کنه.


ثبت پرسش جدید
سبحان مولایی
تخصص : برنامه‌نویس وب: Python ::...
@websaz 3 سال پیش مطرح شد
0

سلام فکر کنم این پلاگین به شما کمک کند.
@aranjbar1372


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام