在 Laravel Nova 中更改供应商/中的 vue 组件

Question

我正在尝试修改Laravel Nova 组件：

\n

我进入供应商目录

\n

cd vendor/coroowicaksono/chart-js-integration/\n

\n

有2个文件：

\n

资源/js/chart-js-integration.js

\n

import StackedChart from \'./components/StackedChart\'\nimport BarChart from \'./components/BarChart\'\nimport LineChart from \'./components/StripeChart\'\nimport DoughnutChart from \'./components/DoughnutChart\'\nimport PieChart from \'./components/PieChart\'\nimport PolarAreaChart from \'./components/PolarAreaChart\'\nimport ScatterChart from \'./components/ScatterChart\'\n\nNova.booting((Vue, router, store) => {\n    Vue.component(\'stacked-chart\', StackedChart);\n    Vue.component(\'bar-chart\', BarChart);\n    Vue.component(\'stripe-chart\', LineChart);\n    Vue.component(\'doughnut-chart\', DoughnutChart);\n    Vue.component(\'pie-chart\', PieChart);\n    Vue.component(\'polar-area-chart\', PolarAreaChart);\n    Vue.component(\'scatter-chart\', ScatterChart);\n})\n

\n

资源/js/components/BarChart.vue

\n

<template>\n    <card class="p-10 h-20">\n      <div class="stay-right">\n        <a @click="fillData()" class="btn-refresh" v-show="buttonRefresh">\n          <i class="fas fa-sync"></i>\n        </a>\n        <a @click="reloadPage()" class="btn-refresh" v-show="buttonReload">\n          <i class="fas fa-sync"></i>\n        </a>\n        <a :href="externalLink" :target="externalLinkIn" class="btn-external" v-show="btnExtLink">\n          <i class="fas fa-external-link-alt"></i>\n        </a>\n        <select @change="fillData()" v-model="advanceFilterSelected" v-show="showAdvanceFilter" class="select-box-sm ml-auto min-w-24 h-6 text-xs appearance-none bg-40 pl-2 pr-6 active:outline-none active:shadow-outline focus:outline-none focus:shadow-outline">\n          <option v-for="filter in advanceFilter" v-bind:value="filter.value" :key="filter.key">\n            {{ filter.text }}\n          </option>\n        </select>\n      </div>\n      <h4 class="chart-js-dashboard-title">{{ checkTitle }} </h4>\n      <line-chart :chart-data="datacollection" :options="options"></line-chart>\n    </card>\n</template>\n\n<style>\n  @import \'../../css/main.css\';\n</style>\n\n<script>\n  import LineChart from \'../bar-chart.js\'\n\n  export default {\n    components: {\n      LineChart\n    },\n    data () {\n      this.card.options = this.card.options != undefined ? this.card.options : false;\n\n      // setup btn filter list\n      const btnFilterList = this.card.options.btnFilterList;\n      let filledAdvancedList = [];\n      let i = 0;\n\n      for ( var index in btnFilterList ) {\n        filledAdvancedList[i] = {value: index, text: btnFilterList[index]};\n        i++;\n      }\n\n      return {\n        datacollection: {},\n        options: {},\n        buttonRefresh: this.card.options.btnRefresh,\n        buttonReload: this.card.options.btnReload,\n        btnExtLink: this.card.options.extLink != undefined ? true : false,\n        externalLink: this.card.options.extLink,\n        externalLinkIn: this.card.options.extLinkIn != undefined ? this.card.options.extLinkIn : \'_self\',\n        chartTooltips: this.card.options.tooltips != undefined ? this.card.options.tooltips : undefined,\n        sweetAlert: this.card.options.sweetAlert2 != undefined ? this.card.options.sweetAlert2 : undefined,\n        chartLayout: this.card.options.layout != undefined ? this.card.options.layout :\n          {\n            padding: {\n              left: 20,\n              right: 20,\n              top: 0,\n              bottom: 10\n            }\n          },\n        chartLegend: this.card.options.legend != undefined ? this.card.options.legend :\n          {\n            display: true,\n            position: \'left\',\n            labels: {\n                fontColor: \'#7c858e\',\n                fontFamily: "\'Nunito\'"\n            }\n          },\n        showAdvanceFilter: this.card.model == \'custom\' || this.card.model == undefined ? false : this.card.options.btnFilter == true ? true : false ,\n        advanceFilterSelected: this.card.options.btnFilterDefault != undefined ? this.card.options.btnFilterDefault : \'QTD\',\n        advanceFilter: this.card.options.btnFilterList != undefined ? filledAdvancedList : [\n          { text: \'Year to Date\', value: \'YTD\' },\n          { text: \'Quarter to Date\', value: \'QTD\' },\n          { text: \'Month to Date\', value: \'MTD\' },\n          { text: \'30 Days\', value: 30 },\n          { text: \'60 Days\', value: 60 },\n          { text: \'365 Days\', value: 365 },\n        ],\n      }\n    },\n    computed: {\n      checkTitle() {\n        return this.card.title !== undefined ? this.card.title : \'Chart JS Integration\';\n      }\n    },\n    props: [\n        \'card\'\n    ],\n    mounted () {\n      this.fillData();\n    },\n    methods: {\n      reloadPage(){\n        window.location.reload()\n      },\n      fillData () {\n        this.options = {\n          layout: this.chartLayout,\n          legend: this.chartLegend,\n          scales: {\n            yAxes: [{\n              ticks: {\n                maxTicksLimit: 5,\n                fontSize: 10,\n                callback: function(num, index, values) {\n                  if (num >= 1000000000) {\n                    return (num / 1000000000).toFixed(1).replace(/\\.0$/, \'\') + \'G\';\n                  }\n                  if (num >= 1000000) {\n                    return (num / 1000000).toFixed(1).replace(/\\.0$/, \'\') + \'M\';\n                  }\n                  if (num >= 1000) {\n                    return (num / 1000).toFixed(1).replace(/\\.0$/, \'\') + \'K\';\n                  }\n                  return num;\n                }\n              }\n            }],\n            xAxes: [ {\n              ticks: {\n                lineHeight: 0.8,\n                fontSize: 10,\n              }\n            }]\n          },\n          responsive: true,\n          maintainAspectRatio: false,\n        };\n\n        if(this.chartTooltips !== undefined){\n          this.options.tooltips = this.chartTooltips;\n          const tooltiplist = ["custom", "itemSort", "filter"];\n          var z;\n          for (z = 0; z < tooltiplist.length; z++) {\n            if(this.options.tooltips[tooltiplist[z]] != undefined){\n              if(this.options.tooltips[tooltiplist[z]].search("function") != -1){\n                eval("this.options.tooltips." + tooltiplist[z] + " = " + this.options.tooltips[tooltiplist[z]]);\n              }\n            }\n          }\n\n          if(this.chartTooltips.callbacks !== undefined){\n            const callbacklist = ["beforeTitle", "title", "afterTitle", "beforeBody", "beforeLabel", "label", "labelColor", "labelTextColor", "afterLabel", "afterBody", "beforeFooter", "footer", "afterFooter"];\n            var i;\n            for (i = 0; i < callbacklist.length; i++) {\n              if(this.options.tooltips.callbacks[callbacklist[i]] != undefined){\n                if(this.options.tooltips.callbacks[callbacklist[i]].search("function") != -1){\n                  eval("this.options.tooltips.callbacks." + callbacklist[i] + " = " + this.options.tooltips.callbacks[callbacklist[i]]);\n                }\n              }\n            }\n          }\n        }\n\n        if(this.card.model == \'custom\' || this.card.model == undefined){\n        // Custom Data\n          this.title = this.card.title,\n          this.datacollection = {\n            labels: this.card.options.xaxis.categories,\n            datasets: this.card.series,\n          }\n\n          // START == SETUP POPUP\n          const sweetAlertWithLink = this.sweetAlert;\n          if(sweetAlertWithLink != undefined) {\n            this.options.onClick = function (event) {\n              let element = this.getElementAtEvent(event);\n              if (element.length > 0) {\n              var series= element[0]._model.datasetLabel;\n              var label = element[0]._model.label;\n              var value = this.data.datasets[element[0]._datasetIndex].data[element[0]._index];\n\n              const toLink = sweetAlertWithLink.linkTo != undefined ? sweetAlertWithLink.linkTo : "https://coroo.github.io/nova-chartjs/";\n              const { linkTo, ...sweetAlert } = sweetAlertWithLink;\n\n              const Swal = require(\'sweetalert2\')\n              Swal.fire({\n                title: sweetAlert.title != undefined ? sweetAlert.title : \'<strong>\'+value+\'</strong>\',\n                icon: sweetAlert.icon != undefined ? sweetAlert.icon : \'info\',\n                html: sweetAlert.html != undefined ? sweetAlert.html : series == undefined ? \'You can see detail by click below button:\' : \'<b>\' + series + \'</b> in \'+label+\'<br/> \',\n                showCloseButton: sweetAlert.showCloseButton != undefined ? sweetAlert.showCloseButton : true,\n                showCancelButton: sweetAlert.showCancelButton != undefined ? sweetAlert.showCancelButton : true,\n                focusConfirm: sweetAlert.focusConfirm != undefined ? sweetAlert.focusConfirm : false,\n                confirmButtonText: sweetAlert.confirmButtonText != undefined ? sweetAlert.confirmButtonText : \'<i class="fas fa-external-link-alt"></i> See Detail\',\n                confirmButtonAriaLabel: sweetAlert.confirmButtonAriaLabel != undefined ? sweetAlert.confirmButtonAriaLabel : \'See Detail\',\n                cancelButtonAriaLabel: sweetAlert.cancelButtonAriaLabel != undefined ? sweetAlert.cancelButtonAriaLabel : \'Cancel\',\n                footer: sweetAlert.footer != undefined ? sweetAlert.footer : \'<a href="https://coroo.github.io/nova-chartjs/" target="_blank" style="text-decoration:none; color:#777; font-size:14px">Nova Chart JS \xc2\xa9 \' + new Date().getFullYear() + \'</a>\',\n                ...sweetAlert\n              }).then((result) => {\n                if (result.value) {\n                  window.location = toLink;\n                }\n              })}\n            };\n          };\n          // END == SETUP POPUP\n\n        } else {\n          if(this.showAdvanceFilter == true) this.card.options.advanceFilterSelected = this.advanceFilterSelected != undefined ? this.advanceFilterSelected : false;\n\n          // Use Model\n          Nova.request().get("/coroowicaksono/check-data/endpoint/", {\n            params: {\n                model: this.card.model,\n                series: this.card.series,\n                options: this.card.options,\n                join: this.card.join,\n                expires: 0,\n            },\n          })\n          .then(({ data }) => {\n            this.datacollection = {\n              labels: data.dataset.xAxis,\n              datasets: data.dataset.yAxis,\n            };\n\n            // START == SETUP POPUP\n            const sweetAlertWithLink = this.sweetAlert;\n            if(sweetAlertWithLink != undefined) {\n              this.options.onClick = function (event) {\n                let element = this.getElementAtEvent(event);\n                if (element.length > 0) {\n                var series= element[0]._model.datasetLabel;\n                var label = element[0]._model.label;\n                var value = this.data.datasets[element[0]._datasetIndex].data[element[0]._index];\n\n                const toLink = sweetAlertWithLink.linkTo != undefined ? sweetAlertWithLink.linkTo : "https://coroo.github.io/nova-chartjs/";\n                const { linkTo, ...sweetAlert } = sweetAlertWithLink;\n\n                const Swal = require(\'sweetalert2\')\n                Swal.fire({\n                  title: sweetAlert.title != undefined ? sweetAlert.title : \'<strong>\'+value+\'</strong>\',\n                  icon: sweetAlert.icon != undefined ? sweetAlert.icon : \'info\',\n                  html: sweetAlert.html != undefined ? sweetAlert.html : series == undefined ? \'You can see detail by click below button:\' : \'<b>\' + series + \'</b> in \'+label+\'<br/> \',\n                  showCloseButton: sweetAlert.showCloseButton != undefined ? sweetAlert.showCloseButton : true,\n                  showCancelButton: sweetAlert.showCancelButton != undefined ? sweetAlert.showCancelButton : true,\n                  focusConfirm: sweetAlert.focusConfirm != undefined ? sweetAlert.focusConfirm : false,\n                  confirmButtonText: sweetAlert.confirmButtonText != undefined ? sweetAlert.confirmButtonText : \'<i class="fas fa-external-link-alt"></i> See Detail\',\n                  confirmButtonAriaLabel: sweetAlert.confirmButtonAriaLabel != undefined ? sweetAlert.confirmButtonAriaLabel : \'See Detail\',\n                  cancelButtonAriaLabel: sweetAlert.cancelButtonAriaLabel != undefined ? sweetAlert.cancelButtonAriaLabel : \'Cancel\',\n                  footer: sweetAlert.footer != undefined ? sweetAlert.footer : \'<a href="https://coroo.github.io/nova-chartjs/" target="_blank" style="text-decoration:none; color:#777; font-size:14px">Nova Chart JS \xc2\xa9 \' + new Date().getFullYear() + \'</a>\',\n                  ...sweetAlert\n                }).then((result) => {\n                  if (result.value) {\n                    window.location = toLink;\n                  }\n                })}\n              };\n            };\n            // END == SETUP POPUP\n\n          })\n          .catch(({ response }) => {\n            this.$set(this, "errors", response.data.errors)\n          })\n        }\n      },\n    },\n  }\n</script>\n

\n

当我换行resources/js/chart-js-integration.js并运行时npm run watch

\n

我可以在屏幕上看到修改。

\n

但是当我尝试添加一行时BarChart.vue

\n

      <h4 class="chart-js-dashboard-title">{{ checkTitle }} extraText blabla</h4>\n

\n

之后我在屏幕上看不到它npm run watch

\n

为什么会这样？

\n