Skip to content

V
vue3-quasar-ts-study01
Commit 4fda92ed authored by hucy's avatar hucy ☘
Browse files
Options

fix:提交

parent cc5d4896
Show whitespace changes
Inline Side-by-side
Showing with 387 additions and 176 deletions
package-lock.json
View file @ 4fda92ed
...@@ -11,20 +11,18 @@ ...@@ -11,20 +11,18 @@
"@antv/x6": "^1.32.11", "@antv/x6": "^1.32.11",
"@quasar/extras": "^1.0.0", "@quasar/extras": "^1.0.0",
"ag-grid-community": "^28.0.0", "ag-grid-community": "^28.0.0",
"ag-grid-enterprise": "^28.0.0",
"ag-grid-vue3": "^28.0.0", "ag-grid-vue3": "^28.0.0",
"animejs": "^3.2.1", "animejs": "^3.2.1",
"axios": "^0.27.2", "axios": "^0.27.2",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"decimal.js": "^10.4.2", "decimal.js": "^10.4.2",
"echarts": "^5.3.2", "echarts": "^5.3.2",
"gsap": "^3.11.3",
"hover-effect": "^1.1.0",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"mitt": "^3.0.0", "mitt": "^3.0.0",
"pinia": "^2.0.14", "pinia": "^2.0.14",
"quasar": "^2.6.0", "quasar": "^2.6.0",
"swiper": "^8.4.5", "swiper": "^8.4.5",
"three": "^0.147.0",
"vue": "^3.0.0", "vue": "^3.0.0",
"vue-i18n": "^9.2.2", "vue-i18n": "^9.2.2",
"vue-router": "^4.0.0", "vue-router": "^4.0.0",
...@@ -3259,6 +3257,11 @@ ...@@ -3259,6 +3257,11 @@
"integrity": "sha512-ovatVo8iGbJZHQRY2ga92IXLSPiLq8zzKIHsli4DU073P/e334gGrk9aTjAD0N0qRie+iKCvkQiZFPo07Wzl1Q==", "integrity": "sha512-ovatVo8iGbJZHQRY2ga92IXLSPiLq8zzKIHsli4DU073P/e334gGrk9aTjAD0N0qRie+iKCvkQiZFPo07Wzl1Q==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/ag-grid-enterprise": {
"version": "28.0.0",
"resolved": "https://registry.npmjs.org/ag-grid-enterprise/-/ag-grid-enterprise-28.0.0.tgz",
"integrity": "sha512-bTyTU+Fc6aw8aXgbaIlsuDsQ9mPXjTOQpEQm3J6cg947iEhO6W/74VWh+MicYZaEKK2/wDkcchhVgDADUOpe+A=="
},
"node_modules/ag-grid-vue3": { "node_modules/ag-grid-vue3": {
"version": "28.0.0", "version": "28.0.0",
"resolved": "https://registry.npmjs.org/ag-grid-vue3/-/ag-grid-vue3-28.0.0.tgz", "resolved": "https://registry.npmjs.org/ag-grid-vue3/-/ag-grid-vue3-28.0.0.tgz",
...@@ -6500,11 +6503,6 @@ ...@@ -6500,11 +6503,6 @@
"dev": true, "dev": true,
"license": "ISC" "license": "ISC"
}, },
"node_modules/gsap": {
"version": "3.11.3",
"resolved": "https://registry.npmjs.org/gsap/-/gsap-3.11.3.tgz",
"integrity": "sha512-xc/iIJy+LWiMbRa4IdMtdnnKa/7PXEK6NNzV71gdOYUVeTZN7UWnLU0fB7Hi1iwiz4ZZoYkBZPPYGg+2+zzFHA=="
},
"node_modules/gzip-size": { "node_modules/gzip-size": {
"version": "6.0.0", "version": "6.0.0",
"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz", "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
...@@ -6594,25 +6592,6 @@ ...@@ -6594,25 +6592,6 @@
"he": "bin/he" "he": "bin/he"
} }
}, },
"node_modules/hover-effect": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/hover-effect/-/hover-effect-1.1.0.tgz",
"integrity": "sha512-172ezjW88PYOHEerHzQWmkMXaAx4hOerE+BQ3iAN+n3Xza+TczuJKgkYlCaHhcGFUdG7is/1UcepCJECNeFscg==",
"dependencies": {
"gsap": "^2.0.2",
"three": "^0.99.0"
}
},
"node_modules/hover-effect/node_modules/gsap": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/gsap/-/gsap-2.1.3.tgz",
"integrity": "sha512-8RFASCqi2FOCBuv7X4o7M6bLdy+1hbR0azg+MG7zz+EVsI+OmJblYsTk0GEepQd2Jg/ItMPiVTibF7r3EVxjZQ=="
},
"node_modules/hover-effect/node_modules/three": {
"version": "0.99.0",
"resolved": "https://registry.npmjs.org/three/-/three-0.99.0.tgz",
"integrity": "sha512-DmNNq6H6nRGaqxScJ8x7v5VjdtDZR72oTVwDdKbB2BYNFxCkAoo9vdFAznEsMu9YzTV2yFvbVs7qHRzvJZzTIg=="
},
"node_modules/hpack.js": { "node_modules/hpack.js": {
"version": "2.1.6", "version": "2.1.6",
"resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz", "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
...@@ -10561,11 +10540,6 @@ ...@@ -10561,11 +10540,6 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/three": {
"version": "0.147.0",
"resolved": "https://registry.npmjs.org/three/-/three-0.147.0.tgz",
"integrity": "sha512-LPTOslYQXFkmvceQjFTNnVVli2LaVF6C99Pv34fJypp8NbQLbTlu3KinZ0zURghS5zEehK+VQyvWuPZ/Sm8fzw=="
},
"node_modules/through": { "node_modules/through": {
"version": "2.3.8", "version": "2.3.8",
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
...@@ -13964,6 +13938,11 @@ ...@@ -13964,6 +13938,11 @@
"resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-28.0.0.tgz", "resolved": "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-28.0.0.tgz",
"integrity": "sha512-ovatVo8iGbJZHQRY2ga92IXLSPiLq8zzKIHsli4DU073P/e334gGrk9aTjAD0N0qRie+iKCvkQiZFPo07Wzl1Q==" "integrity": "sha512-ovatVo8iGbJZHQRY2ga92IXLSPiLq8zzKIHsli4DU073P/e334gGrk9aTjAD0N0qRie+iKCvkQiZFPo07Wzl1Q=="
}, },
"ag-grid-enterprise": {
"version": "28.0.0",
"resolved": "https://registry.npmjs.org/ag-grid-enterprise/-/ag-grid-enterprise-28.0.0.tgz",
"integrity": "sha512-bTyTU+Fc6aw8aXgbaIlsuDsQ9mPXjTOQpEQm3J6cg947iEhO6W/74VWh+MicYZaEKK2/wDkcchhVgDADUOpe+A=="
},
"ag-grid-vue3": { "ag-grid-vue3": {
"version": "28.0.0", "version": "28.0.0",
"resolved": "https://registry.npmjs.org/ag-grid-vue3/-/ag-grid-vue3-28.0.0.tgz", "resolved": "https://registry.npmjs.org/ag-grid-vue3/-/ag-grid-vue3-28.0.0.tgz",
...@@ -16175,11 +16154,6 @@ ...@@ -16175,11 +16154,6 @@
"integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==", "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
"dev": true "dev": true
}, },
"gsap": {
"version": "3.11.3",
"resolved": "https://registry.npmjs.org/gsap/-/gsap-3.11.3.tgz",
"integrity": "sha512-xc/iIJy+LWiMbRa4IdMtdnnKa/7PXEK6NNzV71gdOYUVeTZN7UWnLU0fB7Hi1iwiz4ZZoYkBZPPYGg+2+zzFHA=="
},
"gzip-size": { "gzip-size": {
"version": "6.0.0", "version": "6.0.0",
"resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz", "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
...@@ -16237,27 +16211,6 @@ ...@@ -16237,27 +16211,6 @@
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
"dev": true "dev": true
}, },
"hover-effect": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/hover-effect/-/hover-effect-1.1.0.tgz",
"integrity": "sha512-172ezjW88PYOHEerHzQWmkMXaAx4hOerE+BQ3iAN+n3Xza+TczuJKgkYlCaHhcGFUdG7is/1UcepCJECNeFscg==",
"requires": {
"gsap": "^2.0.2",
"three": "^0.99.0"
},
"dependencies": {
"gsap": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/gsap/-/gsap-2.1.3.tgz",
"integrity": "sha512-8RFASCqi2FOCBuv7X4o7M6bLdy+1hbR0azg+MG7zz+EVsI+OmJblYsTk0GEepQd2Jg/ItMPiVTibF7r3EVxjZQ=="
},
"three": {
"version": "0.99.0",
"resolved": "https://registry.npmjs.org/three/-/three-0.99.0.tgz",
"integrity": "sha512-DmNNq6H6nRGaqxScJ8x7v5VjdtDZR72oTVwDdKbB2BYNFxCkAoo9vdFAznEsMu9YzTV2yFvbVs7qHRzvJZzTIg=="
}
}
},
"hpack.js": { "hpack.js": {
"version": "2.1.6", "version": "2.1.6",
"resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz", "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
...@@ -18914,11 +18867,6 @@ ...@@ -18914,11 +18867,6 @@
"integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
"dev": true "dev": true
}, },
"three": {
"version": "0.147.0",
"resolved": "https://registry.npmjs.org/three/-/three-0.147.0.tgz",
"integrity": "sha512-LPTOslYQXFkmvceQjFTNnVVli2LaVF6C99Pv34fJypp8NbQLbTlu3KinZ0zURghS5zEehK+VQyvWuPZ/Sm8fzw=="
},
"through": { "through": {
"version": "2.3.8", "version": "2.3.8",
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
......
src/modules/page9/IndexPage.vue
View file @ 4fda92ed
...@@ -9,7 +9,7 @@ import WorkingDigitalClock from './element/WorkingDigitalClock .vue'; ...@@ -9,7 +9,7 @@ import WorkingDigitalClock from './element/WorkingDigitalClock .vue';
import SvgLineDrawingAnimation from './element/SvgLineDrawingAnimation.vue'; import SvgLineDrawingAnimation from './element/SvgLineDrawingAnimation.vue';
import FlyingTextAnimationEffects from './element/FlyingTextAnimationEffects.vue'; import FlyingTextAnimationEffects from './element/FlyingTextAnimationEffects.vue';
import TransformationAnimation from './element/TransformationAnimation.vue'; import TransformationAnimation from './element/TransformationAnimation.vue';
import ImageDistortionHoverEffects from './element/ImageDistortionHoverEffects.vue'; import AgGridStudy from './element/AgGridStudy2.vue';
const listData = [ const listData = [
{ {
...@@ -33,12 +33,12 @@ const listData = [ ...@@ -33,12 +33,12 @@ const listData = [
name: 'transformation-animation', name: 'transformation-animation',
}, },
{ {
title: '图像悬停扭曲效果', title: 'AG grid',
name: 'image-distortion-hover-effects', name: 'ag-grid-study',
}, },
]; ];
const isShow = ref(true); const isShow = ref(true);
const elementName = ref('image-distortion-hover-effects'); const elementName = ref('ag-grid-study');
const elementTitle = ref(''); const elementTitle = ref('');
function onclick(data: any) { function onclick(data: any) {
...@@ -76,9 +76,7 @@ function goBack() { ...@@ -76,9 +76,7 @@ function goBack() {
<transformation-animation <transformation-animation
v-if="elementName === 'transformation-animation'" v-if="elementName === 'transformation-animation'"
/> />
<image-distortion-hover-effects <ag-grid-study v-if="elementName === 'ag-grid-study'" />
v-if="elementName === 'image-distortion-hover-effects'"
/>
</div> </div>
</div> </div>
<div v-else> <div v-else>
......
src/modules/page9/element/AgGridStudy.vue 0 → 100644
View file @ 4fda92ed
<!--
* AG-grid学习
* https://www.ag-grid.com/vue-data-grid/getting-started/
-->
<script setup lang="ts">
import { h, ref, reactive, onMounted } from 'vue';
import { AgGridVue } from 'ag-grid-vue3';
import 'ag-grid-enterprise';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import AgGridStudyCom from './AgGridStudyCom.vue';
const defaultColDef = {
sortable: true,
filter: true,
enableRowGroup: true,
};
const SimpleComp = {
setup(props: any) {
const { params } = props;
return () => h('span', { class: 'text-red' }, params.value);
},
};
const gridApi = ref<any>(null);
const state = reactive({
columnDefs: [
{ field: 'age' },
{ field: 'year' },
{
field: 'country',
cellRenderer: AgGridStudyCom,
cellRendererParams: {
config: {
color: 'primary',
textColor: 'white',
square: true,
},
},
},
{
field: 'sport',
cellRenderer: SimpleComp,
},
{ field: 'gold' },
{ field: 'silver' },
{
field: 'bronze',
cellRendererSelector: (data: any) => {
if (data.value > 2) {
return { component: SimpleComp };
} else {
return {
component: AgGridStudyCom,
params: { config: { square: true } },
};
}
},
},
],
rowData: [],
});
onMounted(() => {
fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
.then((result) => result.json())
.then((remoteRowData) => (state.rowData = remoteRowData));
});
function cellWasClicked(event: any) {
console.log('cellWasClicked >>>>', event);
}
function onGridReady(params: any) {
gridApi.value = params.api;
}
function deselectRows() {
gridApi.value.deselectAll();
}
</script>
<template>
<div class="box">
<div>
<q-btn label="取消选择行" color="primary" @click="deselectRows" />
</div>
<!--
rowSelection="multiple"：多选，按住control键多选；【control+shift+鼠标点击】可选中多行
animateRows=true：启用行动画
分组：https://ag-grid.com/vue-data-grid/grouping-group-panel/
【rowGroup: true】 【enableRowGroup: true】 【rowGroupPanelShow="always"】
-->
<div>
<ag-grid-vue
style="height: 500px"
class="ag-theme-alpine"
:columnDefs="state.columnDefs"
:rowData="state.rowData"
:defaultColDef="defaultColDef"
rowSelection="multiple"
:animateRows="true"
rowGroupPanelShow="always"
@cell-clicked="cellWasClicked"
@grid-ready="onGridReady"
>
</ag-grid-vue>
</div>
</div>
</template>
<style lang="scss" scoped></style>
src/modules/page9/element/AgGridStudy2.vue 0 → 100644
View file @ 4fda92ed
<!--
* AG-grid学习
* https://www.ag-grid.com/vue-data-grid/getting-started/
-->
<script setup lang="ts">
import { h, ref, reactive, onMounted } from 'vue';
import { AgGridVue } from 'ag-grid-vue3';
import 'ag-grid-enterprise';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import AgGridStudyCom from './AgGridStudyCom.vue';
import AgGridStudyYearFilter from './AgGridStudyYearFilter.vue';
/**
* filter 过滤器
* https://ag-grid.com/vue-data-grid/filtering/#provided-filters
*
* agNumberColumnFilter: 一个用于数字比较的过滤器
* agTextColumnFilter: 一个用于字符串比较的过滤器
* agDateColumnFilter: 一个用于日期比较的过滤器
* agSetColumnFilter: 一个受Microsoft Excel中过滤器工作方式影响的过滤器。这是一个AG网格企业的功能。
* **/
const defaultColDef = {
flex: 1,
filterParams: {
buttons: ['apply', 'reset', 'clear'],
// debounceMs: 0, // 当`apply`按钮存在时，`debounceMs`被忽略
},
floatingFilter: true,
};
const SimpleComp = {
setup(props: any) {
const { params } = props;
return () => h('span', { class: 'text-red' }, params.value);
},
};
const gridApi = ref<any>(null);
const savedFilterModel = ref<any>(null);
const state = reactive({
columnDefs: [
{ field: 'age', filter: 'agNumberColumnFilter' },
// { field: 'year', filter: 'agSetColumnFilter' }, // 企业版 https://ag-grid.com/vue-data-grid/filter-set/
{
field: 'year',
filter: AgGridStudyYearFilter,
filterParams: {
title: '标题',
},
},
{
field: 'date',
filter: 'agDateColumnFilter',
// https://ag-grid.com/vue-data-grid/filter-date/#date-filter-comparator
// add extra parameters for the date filter
filterParams: {
// provide comparator function
comparator: (filterLocalDateAtMidnight: any, cellValue: any) => {
const dateAsString = cellValue;
if (dateAsString == null) {
return 0;
}
// In the example application, dates are stored as dd/mm/yyyy
// We create a Date object for comparison against the filter date
const dateParts = dateAsString.split('/');
const year = Number(dateParts[2]);
const month = Number(dateParts[1]) - 1;
const day = Number(dateParts[0]);
const cellDate = new Date(year, month, day);
// Now that both parameters are Date objects, we can compare
if (cellDate < filterLocalDateAtMidnight) {
return -1;
} else if (cellDate > filterLocalDateAtMidnight) {
return 1;
}
return 0;
},
},
},
{
field: 'country',
filter: 'agMultiColumnFilter', // 企业版 https://ag-grid.com/vue-data-grid/filter-multi/
cellRenderer: AgGridStudyCom,
cellRendererParams: {
config: {
color: 'primary',
textColor: 'white',
square: true,
},
},
},
{
field: 'sport',
cellRenderer: SimpleComp,
},
{ field: 'gold' },
{ field: 'silver' },
{
field: 'bronze',
cellRendererSelector: (data: any) => {
if (data.value > 2) {
return { component: SimpleComp };
} else {
return {
component: AgGridStudyCom,
params: { config: { square: true } },
};
}
},
},
],
rowData: [],
popupParent: document.body, // https://ag-grid.com/vue-data-grid/column-menu/#popup-parent
});
onMounted(() => {
fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
.then((result) => result.json())
.then((remoteRowData) => (state.rowData = remoteRowData));
});
function cellWasClicked(event: any) {
console.log('cellWasClicked >>>>', event);
}
function onGridReady(params: any) {
gridApi.value = params.api;
}
function deselectRows() {
gridApi.value.deselectAll();
}
function savaFilterState() {
const filterModel = gridApi.value.getFilterModel();
savedFilterModel.value = filterModel;
}
function applyFilterState() {
const filterModel = savedFilterModel.value;
gridApi.value.setFilterModel(filterModel);
}
</script>
<template>
<div class="box">
<div>
<q-btn label="取消选择行" color="primary" @click="deselectRows" />
<q-btn label="保存" color="primary" @click="savaFilterState" />
<q-btn label="应用" color="primary" @click="applyFilterState" />
</div>
<!--
rowSelection="multiple"：多选，按住control键多选；`control+shift+鼠标点击`可选中多行
animateRows=true：启用行动画
分组：https://ag-grid.com/vue-data-grid/grouping-group-panel/
`rowGroup: true` `enableRowGroup: true` `rowGroupPanelShow="always"`
-->
<div>
<ag-grid-vue
style="height: 500px"
class="ag-theme-alpine"
:popupParent="state.popupParent"
:columnDefs="state.columnDefs"
:rowData="state.rowData"
:defaultColDef="defaultColDef"
:animateRows="true"
@cell-clicked="cellWasClicked"
@grid-ready="onGridReady"
>
</ag-grid-vue>
</div>
</div>
</template>
<style lang="scss" scoped></style>
src/modules/page9/element/AgGridStudyCom.vue 0 → 100644
View file @ 4fda92ed
<script setup lang="ts">
// import { reactive } from 'vue';
const props = defineProps<{
params: any;
}>();
</script>
<template>
<div>
<q-chip v-bind="props.params.config">{{ props.params.value }}</q-chip>
</div>
</template>
<style lang="scss" scoped></style>
src/modules/page9/element/AgGridStudyYearFilter.vue 0 → 100644
View file @ 4fda92ed
<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<!--
https://www.youtube.com/watch?v=ftNiT22mAng&list=PLsZlhayVgqNz5iC0wFQDgixcAepFyrWbP&index=8
-->
<script setup lang="ts">
import { ref } from 'vue';
const props = defineProps<{
params: any;
}>();
const filterState = ref('Filter off');
const filterOptions = ['Filter off', '2004', '2008'];
function updateFilter() {
props.params.filterChangedCallback();
}
function isFilterActive() {
return filterState.value !== 'Filter on';
}
function doesFilterPass(params: any) {
const field = props.params.colDef?.field;
return params.data[field] == filterState.value;
}
function getModel() {
return undefined;
}
function setModel() {
//
}
</script>
<template>
<div>
<div class="filter-title">{{ props.params.title }}</div>
<label v-for="(value, index) in filterOptions" :key="index">
<input
type="radio"
:value="value"
v-model="filterState"
@change="updateFilter"
/>
{{ value }}
</label>
</div>
</template>
<style lang="scss" scoped></style>
src/modules/page9/element/ImageDistortionHoverEffects.vue deleted 100644 → 0
View file @ cc5d4896
<!--
* 图像悬停扭曲效果
* https://www.youtube.com/@OnlineTutorialsYT/playlists
* https://www.youtube.com/watch?v=ZcJ4ANTP8zk&list=PL5e68lK9hEzdwblnDobNUCJKm6mFoWP8m&index=2
* https://github.com/robin-dela/hover-effect
-->
<script setup lang="ts">
import { onMounted } from 'vue';
import hoverEffect from 'hover-effect';
onMounted(() => {
Array.from(document.querySelectorAll('.img-box')).forEach((e) => {
const imgs = Array.from(e.querySelectorAll('img'));
new hoverEffect({
parent: e,
intensity: 0.3,
image1: imgs[0].getAttribute('src'),
image2: imgs[1].getAttribute('src'),
displacementImage: imgs[0].getAttribute('src'),
});
});
});
</script>
<template>
<div class="box">
<div class="container">
<div class="img-box">
<img src="../imgs/2.jpg" alt="" />
<img src="../imgs/4.jpg" alt="" />
</div>
<div class="img-box">
<img src="../imgs/5.jpg" alt="" />
<img src="../imgs/6.jpg" alt="" />
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container {
position: relative;
width: 1480px;
display: flex;
justify-content: space-between;
align-items: center;
.img-box {
position: relative;
width: 700px;
height: 400px;
margin: 20px;
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
// https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit
object-fit: cover;
display: none;
}
}
}
</style>
src/router/routes.ts
View file @ 4fda92ed
...@@ -10,7 +10,7 @@ const routes: RouteRecordRaw[] = [ ...@@ -10,7 +10,7 @@ const routes: RouteRecordRaw[] = [
path: '', path: '',
name: 'LaoutIndexPage', name: 'LaoutIndexPage',
component: () => import('pages/IndexPage.vue'), component: () => import('pages/IndexPage.vue'),
redirect: '/page6', redirect: '/page9',
children: [ children: [
{ {
path: 'page1', path: 'page1',
......
yarn.lock
View file @ 4fda92ed
...@@ -1769,6 +1769,11 @@ ...@@ -1769,6 +1769,11 @@
"resolved" "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-28.0.0.tgz" "resolved" "https://registry.npmjs.org/ag-grid-community/-/ag-grid-community-28.0.0.tgz"
"version" "28.0.0" "version" "28.0.0"
"ag-grid-enterprise@^28.0.0":
"integrity" "sha512-bTyTU+Fc6aw8aXgbaIlsuDsQ9mPXjTOQpEQm3J6cg947iEhO6W/74VWh+MicYZaEKK2/wDkcchhVgDADUOpe+A=="
"resolved" "https://registry.npmjs.org/ag-grid-enterprise/-/ag-grid-enterprise-28.0.0.tgz"
"version" "28.0.0"
"ag-grid-vue3@^28.0.0": "ag-grid-vue3@^28.0.0":
"integrity" "sha512-qQQEuOiiJLkK1l4aHIo7PMG6iU7QHZHOMvYPnKDHjdEKvEU3NKuw6pJB4Ot7EdUnnqSBJOKx7/FMibHelerijw==" "integrity" "sha512-qQQEuOiiJLkK1l4aHIo7PMG6iU7QHZHOMvYPnKDHjdEKvEU3NKuw6pJB4Ot7EdUnnqSBJOKx7/FMibHelerijw=="
"resolved" "https://registry.npmjs.org/ag-grid-vue3/-/ag-grid-vue3-28.0.0.tgz" "resolved" "https://registry.npmjs.org/ag-grid-vue3/-/ag-grid-vue3-28.0.0.tgz"
...@@ -3448,16 +3453,6 @@ ...@@ -3448,16 +3453,6 @@
"resolved" "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz" "resolved" "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz"
"version" "4.2.10" "version" "4.2.10"
"gsap@^2.0.2":
"integrity" "sha512-8RFASCqi2FOCBuv7X4o7M6bLdy+1hbR0azg+MG7zz+EVsI+OmJblYsTk0GEepQd2Jg/ItMPiVTibF7r3EVxjZQ=="
"resolved" "https://registry.npmjs.org/gsap/-/gsap-2.1.3.tgz"
"version" "2.1.3"
"gsap@^3.11.3":
"integrity" "sha512-xc/iIJy+LWiMbRa4IdMtdnnKa/7PXEK6NNzV71gdOYUVeTZN7UWnLU0fB7Hi1iwiz4ZZoYkBZPPYGg+2+zzFHA=="
"resolved" "https://registry.npmjs.org/gsap/-/gsap-3.11.3.tgz"
"version" "3.11.3"
"gzip-size@^6.0.0": "gzip-size@^6.0.0":
"integrity" "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==" "integrity" "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q=="
"resolved" "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz" "resolved" "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz"
...@@ -3514,14 +3509,6 @@ ...@@ -3514,14 +3509,6 @@
"resolved" "https://registry.npmjs.org/he/-/he-1.2.0.tgz" "resolved" "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
"version" "1.2.0" "version" "1.2.0"
"hover-effect@^1.1.0":
"integrity" "sha512-172ezjW88PYOHEerHzQWmkMXaAx4hOerE+BQ3iAN+n3Xza+TczuJKgkYlCaHhcGFUdG7is/1UcepCJECNeFscg=="
"resolved" "https://registry.npmjs.org/hover-effect/-/hover-effect-1.1.0.tgz"
"version" "1.1.0"
dependencies:
"gsap" "^2.0.2"
"three" "^0.99.0"
"hpack.js@^2.1.6": "hpack.js@^2.1.6":
"integrity" "sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==" "integrity" "sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ=="
"resolved" "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz" "resolved" "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz"
...@@ -5698,16 +5685,6 @@ ...@@ -5698,16 +5685,6 @@
"resolved" "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz" "resolved" "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz"
"version" "0.2.0" "version" "0.2.0"
"three@^0.147.0":
"integrity" "sha512-LPTOslYQXFkmvceQjFTNnVVli2LaVF6C99Pv34fJypp8NbQLbTlu3KinZ0zURghS5zEehK+VQyvWuPZ/Sm8fzw=="
"resolved" "https://registry.npmjs.org/three/-/three-0.147.0.tgz"
"version" "0.147.0"
"three@^0.99.0":
"integrity" "sha512-DmNNq6H6nRGaqxScJ8x7v5VjdtDZR72oTVwDdKbB2BYNFxCkAoo9vdFAznEsMu9YzTV2yFvbVs7qHRzvJZzTIg=="
"resolved" "https://registry.npmjs.org/three/-/three-0.99.0.tgz"
"version" "0.99.0"
"through@^2.3.6": "through@^2.3.6":
"integrity" "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==" "integrity" "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
"resolved" "https://registry.npmjs.org/through/-/through-2.3.8.tgz" "resolved" "https://registry.npmjs.org/through/-/through-2.3.8.tgz"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment