решение, когда добавить html2canvas с Vue. js - PullRequest
0 голосов
/ 18 апреля 2020

enter image description here когда я нажимаю exportpcImage, а затем отображается ошибка, кто-нибудь, помогите мне, как это исправить

vue.esm.js:1743 ReferenceError: exportpcImage is not defined
    at click (eval at createFunction (VM7245 vue.esm.js:NaN), <anonymous>:3:484)
    at invokeWithErrorHandling (VM7245 vue.esm.js:1711)
    at HTMLDivElement.invoker (VM7245 vue.esm.js:1934)
    at HTMLDivElement.original._wrapper (VM7245 vue.esm.js:6957)

php

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

<div  class="v8builder-content v8builder-content-layout-1" id="v8builder-<?php echo esc_attr($id); ?>" data-id="<?php echo esc_attr($id); ?>">
    <div @click="exportpcImage()" type="download" class="v8b-btn-icon v8b-btn-icon__add_photo output2"><?php esc_html_e('', 'v8builder') ?> 
        <i class="material-icons">add_a_photo</i>
    </div>
</div>

Vue


"use strict"; 

// Import Vue
import Vue from 'vue'
import VModal from 'vue-js-modal'
import ProductItem from './components/front-product.vue'
import ProductLayout2Item from './components/product-layout-2.vue'
import Html2canvas from './components/html2canvas.min.js'

import Cookies from 'js-cookie'

(function($) { 
"use strict"; 

    Vue.config.strict = true;
    Vue.config.debug = false;
    Vue.use(VModal);

    $(document).ready(function($) {

        $('.v8builder-content-layout-1').each( function() {

            var id = $(this).data('id');

            new Vue({
                components: {
                    ProductItem
                },
                el: '#v8builder-' + id,
                data: {
                    id: id,
                    ajax_url: v8builder.ajax_url,
                    ajax_security: v8builder.security,
                    ajax_action: 'v8builder_shortcode_v8buider',
                    expands: [],
                    isCached: false,
                    isLoading: false,
                    search_input: '',
                    search_timeout: null,
                    selectedFilter: [],
                    products: [],
                    filters: [],
                    builder: [],
                    order: {name: '', type: 0},
                    carts: [],
                    cart_total: 0,
                    page: 1,
                    perpage: 20
                },
                computed: {
                    cookie_cart_name() {

                        return 'v8b_carts_' + this.id;
                    }
                },
                mounted() {

                    var carts = this.getLocalStorage();

                    if( _.isArray(carts) ) {

                        this.carts = carts;

                    }

                    this.setUp();

                    jQuery(this.$el).css('visibility', 'visible');
                },
                methods: {

JS

                    exportpcImage(){
                            document.getElementById("download").addEventListener("click", function() 
                            {
                                html2canvas(document.getElementById("v8builder-3679"), {allowTaint: true}).then(function(canvas) 
                                {
                                    document.getElementById("output2").appendChild(canvas);
                                saveAs(canvas.toDataURL(), 'build-pc.png');

                                });
                            });

                            function saveAs(uri, filename) {

                                var link = document.createElement('a');

                                if (typeof link.download === 'string') {

                                    link.href = uri;
                                    link.download = filename;

                                    //Firefox requires the link to be in the body
                                    document.body.appendChild(link);

                                    //simulate click
                                    link.click();

                                    //remove the link when done
                                    document.body.removeChild(link);

                                } else {

                                    window.open(uri);

                                }
                            }
                    },      
...