在 Vuejs 和 Laravel 中扩展来自供应商的 mixins 脚本答案

【问题标题】：Extend a mixins script from vendor in Vuejs and Laravel在 Vuejs 和 Laravel 中扩展来自供应商的 mixins 脚本
【发布时间】：2019-01-05 23:26:58
【问题描述】：

我的供应商文件中有一个原始脚本 (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 数组中的函数。

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

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

感谢您的帮助！

【问题讨论】：

标签： javascript laravel vue.js laravel-spark

【解决方案1】：

您需要发布 Spark 资产才能执行此操作。 Laravel 包含一个命令作为 artisan 的一部分，它允许您将任何可发布的文件从作曲家包复制到您的项目中。

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 混合文件。

【讨论】：