Vue implementiert Div-Rad zum Vergrößern und Verkleinern

Vue von „vue“ importieren
App aus „./App“ importieren
Router aus „./router“ importieren
Vue.config.productionTip = falsch

// ich anzeigen
Importiere ViewUI aus „View-Design“.
importiere „view-design/dist/styles/iview.css“;
Vue.use (Ansichtsbenutzeroberfläche)

// Ziehen, Zoomen, Canvas-Plugin, importiere VueDraggableResizable von „vue-draggable-resizable“
importiere „vue-draggable-resizable/dist/VueDraggableResizable.css“
Vue.component('vue-draggable-resizable', VueDraggableResizable)

neuer Vue({
  el: '#app',
  Router,
  Komponenten: { App },
  Vorlage: '<App/>'
})

<Vorlage>
    <div Klasse="ist">
        <div
            Stil="Höhe: 800px; Breite: 100 %; Rahmen: 1px durchgezogen #000; Position: relativ; Überlauf: ausgeblendet;"
        >
            <!-- Komponenten importieren. :lock-aspect-ratio="true": Seitenverhältnis sperren:resizable="false": nicht skalierbar -->
            <vue-ziehbar-größenveränderbar
                w="auto"
                h="auto"
                :Raster="[20,40]"
                :x="10"
                :y="10"
                :resizable="false"
            >
                <div Klasse="Tabelle" ref="Tabelle" @wheel.prevent="handleTableWheel($event)">
                 <-- iview-Tabelle, egal, jedes div reicht aus -->
                    <Tabelle
                        :Spalten="Spalten1"
                        :Daten="Daten1"
                        Größe="klein"
                        :disabled-hover="wahr"
                        Grenze
                    >
                        <template slot-scope="{ Zeile, Index }" slot="Name">
                            <Tooltip :content="row.name" placement="top" übertragen>
                                <span class="name" @click="handleCellClick(row)">{{ row.name }}</span>
                            </Tooltip>
                        </Vorlage>
                    </Tabelle>
                </div>
            </vue-draggable-resizable>
        </div>
    </div>
</Vorlage>

<Skript>
importiere VueDraggableResizable von „vue-draggable-resizable“;
Standard exportieren {
    Name: "ist",
    Daten() {
        zurückkehren {
            Spalten1: [
                {
                    Titel: "Name",
                    Steckplatz: "Name",
                    Breite: 120
                },
                {
                    Titel: "Alter",
                    Schlüssel: "Alter",
                    Breite: 120
                },
                {
                    Titel: "Adresse",
                    Schlüssel: "Adresse",
                    Breite: 120
                },
                {
                    Titel: "Name",
                    Schlüssel: "Name",
                    Breite: 120
                },
                {
                    Titel: "Alter",
                    Schlüssel: "Alter",
                    Breite: 120
                },
                {
                    Titel: "Adresse",
                    Schlüssel: "Adresse",
                    Breite: 120
                },
                {
                    Titel: "Name",
                    Schlüssel: "Name",
                    Breite: 120
                },
                {
                    Titel: "Alter",
                    Schlüssel: "Alter",
                    Breite: 120
                },
                {
                    Titel: "Adresse",
                    Schlüssel: "Adresse",
                    Breite: 120
                }
            ],
            Daten1: [
                {
                    Name: "John Brown",
                    Alter: 18,
                    Adresse: "New York No. 1 Lake Park"
                },
                {
                    Name: "Jim Green",
                    Alter: 25,
                    Adresse: "London No. 1 Lake Park",
                    Zellklassenname: {
                        Alter: "Demo-Tabelle-Info-Zellen-Alter",
                        Adresse: "Demo-Tabelle-Info-Zellenadresse"
                    }
                },
                {
                    Name: "Joe Black",
                    Alter: 30,
                    Adresse: "Sydney No. 1 Lake Park"
                },
                {
                    Name: "Jon Snow",
                    Alter: 26,
                    Adresse: "Ottawa No. 2 Lake Park",
                    Zellklassenname: {
                        Name: "Demo-Tabelleninfo-Zellenname"
                    }
                },
                {
                    Name: "John Brown",
                    Alter: 18,
                    Adresse: "New York No. 1 Lake Park"
                },
                {
                    Name: "Jim Green",
                    Alter: 25,
                    Adresse: "London No. 1 Lake Park",
                    Zellklassenname: {
                        Alter: "Demo-Tabelle-Info-Zellen-Alter",
                        Adresse: "Demo-Tabelle-Info-Zellenadresse"
                    }
                },
                {
                    Name: "Joe Black",
                    Alter: 30,
                    Adresse: "Sydney No. 1 Lake Park"
                },
                {
                    Name: "Jon Snow",
                    Alter: 26,
                    Adresse: "Ottawa No. 2 Lake Park",
                    Zellklassenname: {
                        Name: "Demo-Tabelleninfo-Zellenname"
                    }
                }
            ]
        };
    },
    montiert() {},
    Methoden: {
        handleTableWheel(Ereignis) {
            lass obj = diese.$refs.table;
            gib dies zurück.tableZoom(Objekt, Ereignis);
        },
        tableZoom(Objekt, Ereignis) {
            // Der Standardwert liegt am Anfang bei 100 %
            lass zoom = parseInt(obj.style.zoom, 10) || 100;
            //Drehen Sie das Rad einmal und der Wert von wheelDelta erhöht oder verringert sich um 120
            zoom += event.wheelDelta / 12;
            wenn (Zoom > 0) {
                obj.style.zoom = zoom + "%";
            }
            gibt false zurück;
        },
        //Klick-Zellenereignis (wird verwendet, um zu testen, ob Ziehen das Standardereignis der Tabelle blockiert, was irrelevant ist)
        handleCellClick(Zeile) {
            this.$Message.info("Sie haben geklickt" + row.name);
        }
    }
};
</Skript>

<style scoped lang="weniger">
.Ist {
    .Tisch {
        .Name {
            Cursor: Zeiger;
        }
    }
}
// iview-Tabellenstil: einfach von der offiziellen iview-Website kopieren, es spielt keine Rolle/tief/ .ivu-table {
    .demo-table-info-row td {
        Hintergrundfarbe: #2db7f5;
        Farbe: #fff;
    }
    td.demo-Tabelle-Info-Spalte {
        Hintergrundfarbe: #2db7f5;
        Farbe: #fff;
    }
    .demo-table-error-row td {
        Hintergrundfarbe: #ff6600;
        Farbe: #fff;
    }
    .demo-table-info-cell-name {
        Hintergrundfarbe: #2db7f5;
        Farbe: #fff;
    }
    .demo-table-info-cell-age {
        Hintergrundfarbe: #ff6600;
        Farbe: #fff;
    }
    .demo-table-info-cell-address {
        Hintergrundfarbe: #187;
        Farbe: #fff;
    }
}
// Entferne den Div-Rand im canvas.vdr {
    Rand: keiner;
}
</Stil>