Question

我的供应商文件中有一个原始脚本（stripe.js）。直接在供应商文件中对其进行编辑不是解决方案。

我希望可以更改所需的功能（createCardElement）。

/*stripe.js*/

module.exports = {
/**
 * The mixin's data.
 */
data() {
    return {
        stripe: Spark.stripeKey ? Stripe(Spark.stripeKey) : null
    }
},


methods: {
    /**
     * Create a Stripe Card Element.
     */
    createCardElement(container){
        if (!this.stripe) {
            throw "Invalid Stripe Key/Secret";
        }

        var card = this.stripe.elements().create('card', {
            hideIcon: false,
            hidePostalCode: true,
            style: {
                base: {
                    '::placeholder': {
                        color: '#aab7c4'
                    },
                    fontFamily: 'Whitney, Lato, -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol"',
                    color: '#495057',
                    fontSize: '15px'
                }
            }
        });

        card.mount(container);

        return card;
    }
},
};

此文件已导入另一个文件（register-stripe.js）

module.exports = {
    /**
     * Load mixins for the component.
     */
    mixins: [
        require('./../mixins/register'),
        require('./../mixins/plans'),
        require('./../mixins/vat'),
        require('./../mixins/stripe')
    ],
    selectedPlan(val){
                if (!val || val.price == 0) {
                    this.cardElement = null;
                    return;
                }

                if (!this.cardElement) {
                    this.$nextTick(()=> {
                        this.cardElement = this.createCardElement('#card-element');
                    });
                }
            }
        },
    }

我可以访问文件，也可以覆盖register-stripe.js中的函数，但是我不知道如何覆盖mixins数组中的函数。

Register-stripe.js（我可以编辑的版本）

var base = require('auth/register-stripe');

Vue.component('spark-register-stripe', {
    mixins: [base]
});

谢谢您的帮助！

Answer 1

您需要发布Spark资产才能执行此操作。 Laravel作为artisan的一部分包含了一个命令，该命令使您可以将任何可发布的文件从composer程序包复制到项目中。

Spark将其用于视图，css，js和图像。要发布资产，请浏览到您的项目目录（您的artisan文件所在的位置）并运行：

php artisan vendor:publish

根据您的Laravel和Spark版本，您将获得：

要导入的可用软件包的列表（在这种情况下，您只需输入要导入的软件包旁边的数字，然后按Enter键即可）
从spark导入的文件列表。

您可以通过浏览到resources / assets / js目录来确认它是否已正确导入，该目录现在应该具有一个spark和spark-components目录。

您将在`resources / assets / js / spark / mixins /目录中找到stripe.js mixin文件。

扩展Vuejs和Laravel中供应商的mixins脚本

1 个答案: