Vue div 롤러 확대 축소 실현
1.플러그 인 vue-draggable-resizable 을 도입 하고 저 를 눌 러 서 들 어 갑 니 다GitHub 주소.
1)、npm install --save vue-draggable-resizable
2),main.js 파일 중
import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
Vue.component('vue-draggable-resizable', VueDraggableResizable)
3)vue 파일 에서 사용
main.js:
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
// iview
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
Vue.use(ViewUI)
// ・ ・
import VueDraggableResizable from 'vue-draggable-resizable'
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
Vue.component('vue-draggable-resizable', VueDraggableResizable)
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
vue 파일:구성 요소 vue-draggable-resizable 설정 항목 과 handle TableWheel,tableZoom 방법 을 도입 하 는 것 에 만 관심 을 가지 면 됩 니 다.
<template>
<div class="is">
<div
style="height: 800px; width: 100%; border: 1px solid #000; position: relative; overflow: hidden;"
>
<!-- . :lock-aspect-ratio="true": :resizable="false": -->
<vue-draggable-resizable
w="auto"
h="auto"
:grid="[20,40]"
:x="10"
:y="10"
:resizable="false"
>
<div class="table" ref="table" @wheel.prevent="handleTableWheel($event)">
<-- iview , , div -->
<Table
:columns="columns1"
:data="data1"
size="small"
:disabled-hover="true"
border
>
<template slot-scope="{ row, index }" slot="name">
<Tooltip :content="row.name" placement="top" transfer>
<span class="name" @click="handleCellClick(row)">{{ row.name }}</span>
</Tooltip>
</template>
</Table>
</div>
</vue-draggable-resizable>
</div>
</div>
</template>
<script>
import VueDraggableResizable from "vue-draggable-resizable";
export default {
name: "is",
data() {
return {
columns1: [
{
title: "Name",
slot: "name",
width: 120
},
{
title: "Age",
key: "age",
width: 120
},
{
title: "Address",
key: "address",
width: 120
},
{
title: "Name",
key: "name",
width: 120
},
{
title: "Age",
key: "age",
width: 120
},
{
title: "Address",
key: "address",
width: 120
},
{
title: "Name",
key: "name",
width: 120
},
{
title: "Age",
key: "age",
width: 120
},
{
title: "Address",
key: "address",
width: 120
}
],
data1: [
{
name: "John Brown",
age: 18,
address: "New York No. 1 Lake Park"
},
{
name: "Jim Green",
age: 25,
address: "London No. 1 Lake Park",
cellClassName: {
age: "demo-table-info-cell-age",
address: "demo-table-info-cell-address"
}
},
{
name: "Joe Black",
age: 30,
address: "Sydney No. 1 Lake Park"
},
{
name: "Jon Snow",
age: 26,
address: "Ottawa No. 2 Lake Park",
cellClassName: {
name: "demo-table-info-cell-name"
}
},
{
name: "John Brown",
age: 18,
address: "New York No. 1 Lake Park"
},
{
name: "Jim Green",
age: 25,
address: "London No. 1 Lake Park",
cellClassName: {
age: "demo-table-info-cell-age",
address: "demo-table-info-cell-address"
}
},
{
name: "Joe Black",
age: 30,
address: "Sydney No. 1 Lake Park"
},
{
name: "Jon Snow",
age: 26,
address: "Ottawa No. 2 Lake Park",
cellClassName: {
name: "demo-table-info-cell-name"
}
}
]
};
},
mounted() {},
methods: {
handleTableWheel(event) {
let obj = this.$refs.table;
return this.tableZoom(obj, event);
},
tableZoom(obj, event) {
// 100%
let zoom = parseInt(obj.style.zoom, 10) || 100;
// wheelDelta 120
zoom += event.wheelDelta / 12;
if (zoom > 0) {
obj.style.zoom = zoom + "%";
}
return false;
},
// ( , )
handleCellClick(row) {
this.$Message.info(" " + row.name);
}
}
};
</script>
<style scoped lang="less">
.is {
.table {
.name {
cursor: pointer;
}
}
}
// iview :iview ,
/deep/ .ivu-table {
.demo-table-info-row td {
background-color: #2db7f5;
color: #fff;
}
td.demo-table-info-column {
background-color: #2db7f5;
color: #fff;
}
.demo-table-error-row td {
background-color: #ff6600;
color: #fff;
}
.demo-table-info-cell-name {
background-color: #2db7f5;
color: #fff;
}
.demo-table-info-cell-age {
background-color: #ff6600;
color: #fff;
}
.demo-table-info-cell-address {
background-color: #187;
color: #fff;
}
}
// div
.vdr {
border: none;
}
</style>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.