Skip to content

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

js练习

parent 841aaffb
Hide whitespace changes
Inline Side-by-side
Showing with 224 additions and 89 deletions
src/components/carousel-warp/CarouselWarp.vue → src/components/chart-carousel-warp/ChartCarouselWarp.vue
View file @ df0d23cf
<!--
* 轮播图
* 动态echar轮播图
-->
<script setup lang="ts">
import {
ref,
reactive,
onMounted,
onBeforeUnmount,
watch,
nextTick,
markRaw,
} from 'vue';
import { ref, reactive, onBeforeUnmount, watch, nextTick, markRaw } from 'vue';
import { isEmpty } from 'src/common/utils';
import * as echarts from 'echarts';
......@@ -28,7 +20,7 @@ const props = withDefaults(defineProps<Props>(), {
navigation: false,
});
const DOM_PIE_KEY = 'chart-pie-dom-';
const DOM_PIE_KEY = 'chart-dom-';
const pointActive = ref<any>(1);
const lastIndex = ref(0);
......@@ -47,10 +39,6 @@ watch(
}
);
onMounted(() => {
//
});
onBeforeUnmount(() => {
offTimer();
});
......@@ -101,7 +89,6 @@ function listChange() {
if (condition && option) {
// console.log('设置了', myChart);
myChart.resize();
myChart.clear();
myChart.setOption(option);
}
......@@ -218,7 +205,7 @@ function resetIndex() {
}
</script>
<template>
<div class="carousel-box">
<div class="chart-carousel-box">
<div class="carousel">
<div class="carousel-content">
<div class="carousel-item-box">
......@@ -256,13 +243,15 @@ function resetIndex() {
@keyframes opacity-in {
0% {
opacity: 0.5;
transform: rotateY(180deg);
}
100% {
opacity: 1;
transform: rotateY(0);
}
}
.carousel-box {
.chart-carousel-box {
width: 100%;
height: 100%;
}
......
src/components/index.ts
View file @ df0d23cf
......@@ -3,7 +3,7 @@ import BaiduMap from './BaiduMap.vue';
import MyForm from './MyForm.vue';
import MyTooltip from './MyTooltip.vue';
import CanvasStaticRoute from './canvas-static-route/CanvasStaticRoute.vue';
import CarouselWarp from './carousel-warp/CarouselWarp.vue';
import ChartCarouselWarp from './chart-carousel-warp/ChartCarouselWarp.vue';
export {
DateTimePick as ComDateTimePick,
......@@ -11,7 +11,7 @@ export {
MyForm as ComForm,
MyTooltip as ComTooltip,
CanvasStaticRoute as ComCanvasStaticRoute,
CarouselWarp as ComCarouselWarp,
ChartCarouselWarp as ComChartCarouselWarp,
};
export default {
......@@ -20,5 +20,5 @@ export default {
MyForm,
MyTooltip,
CanvasStaticRoute,
CarouselWarp,
ChartCarouselWarp,
};
src/css/app.scss
View file @ df0d23cf
// app global css in SCSS form
a:link {
color: $primary;
} /* 未访问的链接 */
a:visited {
color: $primary;
} /* 已访问的链接 */
a:hover {
opacity: 0.8;
} /* 鼠标移动到链接上 */
// 布局
.center {
display: flex;
......
src/modules/page6/IndexPage.vue
View file @ df0d23cf
......@@ -10,14 +10,16 @@ export default {
// import ArrayOutOfOrder from './element/ArrayOutOfOrder.vue';
// import CanvasStaticRoute from './element/CanvasStaticRoute.vue';
// import MorphBox from './element/MorphBox.vue';
import CarouselWarp from './element/CarouselWarp.vue';
// import CarouselWarp from './element/CarouselWarp.vue';
import DataResponsive from './element/DataResponsive.vue';
</script>
<template>
<div class="page6 container-height">
<!-- <array-out-of-order /> -->
<!-- <canvas-static-route /> -->
<!-- <morph-box /> -->
<carousel-warp />
<!-- <carousel-warp /> -->
<data-responsive />
</div>
</template>
......
src/modules/page6/config.ts
View file @ df0d23cf
......@@ -15,9 +15,11 @@ const COLORLIST = [
export const WarpTestData = [
{
id: 1,
seq: 1,
label: '1号',
url: require('./element/imgs/carousel-1.jpg'),
option: {
animation: false,
color: COLORLIST,
title: {
text: '1号',
......@@ -46,9 +48,11 @@ export const WarpTestData = [
},
{
id: 2,
seq: 2,
label: '2号',
url: require('./element/imgs/carousel-2.jpg'),
option: {
animation: false,
color: COLORLIST,
title: {
text: '2号',
......@@ -103,9 +107,11 @@ export const WarpTestData = [
},
{
id: 3,
seq: 3,
label: '3号',
url: require('./element/imgs/carousel-3.jpg'),
option: {
animation: false,
color: COLORLIST,
title: {
text: '3号',
......@@ -146,9 +152,11 @@ export const WarpTestData = [
},
{
id: 4,
seq: 4,
label: '4号',
url: require('./element/imgs/carousel-4.jpg'),
option: {
animation: false,
color: COLORLIST,
title: {
text: '4号',
......@@ -185,9 +193,11 @@ export const WarpTestData = [
export const WarpTestData2 = [
{
id: 1,
seq: 1,
label: '1号',
url: require('./element/imgs/carousel-1.jpg'),
option: {
animation: false,
color: COLORLIST,
title: {
text: '1号-测试数据2',
......@@ -216,9 +226,11 @@ export const WarpTestData2 = [
},
{
id: 2,
seq: 2,
label: '2号',
url: require('./element/imgs/carousel-2.jpg'),
option: {
animation: false,
color: COLORLIST,
title: {
text: '2号-测试数据2',
......@@ -273,9 +285,11 @@ export const WarpTestData2 = [
},
{
id: 3,
seq: 3,
label: '3号-测试数据2',
url: require('./element/imgs/carousel-3.jpg'),
option: {
animation: false,
color: COLORLIST,
title: {
text: '3号-测试数据2',
......@@ -316,9 +330,11 @@ export const WarpTestData2 = [
},
{
id: 4,
seq: 4,
label: '4号',
url: require('./element/imgs/carousel-4.jpg'),
option: {
animation: false,
color: COLORLIST,
title: {
text: '4号-测试数据2',
......@@ -350,9 +366,11 @@ export const WarpTestData2 = [
},
{
id: 5,
seq: 5,
label: '5号',
url: require('./element/imgs/carousel-4.jpg'),
option: {
animation: false,
color: COLORLIST,
title: {
text: '5号-测试数据2',
......@@ -397,9 +415,11 @@ export const WarpTestData2 = [
export const WarpTestData3 = [
{
id: 1,
seq: 1,
label: '1号',
url: require('./element/imgs/carousel-1.jpg'),
option: {
animation: false,
color: COLORLIST,
title: {
text: '1号-测试数据3',
......
src/modules/page6/element/CarouselWarp.vue
View file @ df0d23cf
<!--
* 轮播图
* 动态echar轮播图
-->
<script setup lang="ts">
import { reactive, onMounted, onBeforeUnmount } from 'vue';
import Com from 'src/components';
import { WarpTestData, WarpTestData2, WarpTestData3 } from '../config';
import * as echarts from 'echarts';
const state = reactive({
list: [] as any,
times: 5000,
testChart: null as any,
});
onMounted(() => {
test111();
initData();
});
......@@ -45,65 +42,17 @@ function onSetToEnpty() {
function onChangeTimers() {
state.times = 2000;
}
function test111() {
let chartDom: any = document.getElementById('test111');
state.testChart = echarts.init(chartDom);
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
},
],
};
state.testChart.setOption(option);
}
function onDestructionChart() {
state.testChart.dispose();
}
function onResetChart() {
test111();
}
function onResetData() {
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
data: [300, 300, 300, 300, 300, 300, 300],
type: 'line',
},
],
};
state.testChart.setOption(option);
}
function onView() {
console.log('查看 =', state.testChart);
}
</script>
<template>
<div class="fit">
<div class="my-warp-box">
<Com.CarouselWarp
<Com.ChartCarouselWarp
navigation
item-key="id"
item-key="seq"
:list="state.list"
:times="state.times"
>
</Com.CarouselWarp>
</Com.ChartCarouselWarp>
</div>
<div class="btns">
<q-btn
......@@ -124,21 +73,10 @@ function onView() {
<q-btn label="将数据置为空" @click="onSetToEnpty" color="primary" />
<q-btn label="改变轮播时间" @click="onChangeTimers" color="orange" />
</div>
<q-btn label="销毁图表" @click="onDestructionChart" color="orange" />
<q-btn label="重绘图表" @click="onResetChart" color="orange" />
<q-btn label="重新设置数据" @click="onResetData" color="orange" />
<q-btn label="查看" @click="onView" color="orange" />
<div class="test111" id="test111"></div>
</div>
</template>
<style lang="scss" scoped>
.test111 {
width: 500px;
height: 500px;
border: 1px solid red;
}
.my-warp-box {
width: 500px;
height: 300px;
......
src/modules/page6/element/DataResponsive.vue 0 → 100644
View file @ df0d23cf
<!--
* vue3的数据响应性
-->
<script setup lang="ts">
import { ref, unref, reactive, toRaw } from 'vue';
import { useMessage } from 'src/common/hooks';
const { info } = useMessage();
const text = ref('夕阳西下');
const refObj = ref({
name: '张三',
age: 18,
});
const state = reactive({
name: '李四',
age: 49,
childs: {
name: '李白',
age: 111,
},
});
function onView1() {
console.log('查看1 =', text);
}
function onView2() {
console.log('查看2 =', refObj);
}
function onChange() {
text.value = '改变改变';
info(unref(text));
}
function onViewState() {
console.log('state', state);
}
function onToRawState() {
console.log('toRaw(state) =', toRaw(state));
}
function onViewDefineProperty() {
let o = {
name: '张三',
age: 18,
};
myreactive(o, 'name', 'zhang san');
console.log('o >>>>', o.name);
o.age = 20;
}
// 响应式函数
function myreactive(obj: any, key: any, value: any) {
Object.defineProperty(obj, key, {
get() {
console.log(`访问了${key}属性`);
return value;
},
set(val) {
console.log(`将${key}由->${value}->设置成->${val}`);
if (value !== val) {
value = val;
}
},
});
}
function onViewEffect() {
let name = '孙师傅';
let age = 18;
let money = 200;
let res1 = null;
let res2 = null;
let dep: any = new Set();
const effect1 = () => {
res1 = `${name}，今年${age}，有${money}元`;
};
const effect2 = () => {
res2 = `刚满${age}岁没多少年的${name}，已经拥有了巨额存款${money}元`;
};
// 收集依赖
(function track() {
dep.add(effect1);
dep.add(effect2);
})();
console.log('dep >>>>', dep);
// 通知变了进行更新
function trigger() {
for (let item of dep) {
item();
}
}
trigger(); // 第一次执行，初始化
console.log(res1);
console.log(res2);
money = 400;
age = 40;
trigger(); // 数据更新
console.log(res1);
console.log(res2);
}
</script>
<template>
<div class="fit">
<div class="title">数据响应性</div>
<div>
<a href="https://juejin.cn/post/7001999813344493581" target="_blank"
>参考链接</a
>
</div>
<div class="q-mb-md">
<q-card>
<q-card-section>
<div>
<q-btn label="查看1" color="primary" @click="onView1" />
<q-btn label="查看2" color="primary" @click="onView2" />
<q-btn label="改变数据" color="primary" @click="onChange" />
</div>
<div>
<q-chip square>{{ text }}</q-chip>
</div>
</q-card-section>
</q-card>
</div>
<div class="q-mb-md">
<q-card>
<q-card-section>
<q-btn label="查看state" color="primary" @click="onViewState" />
<q-btn label="toRaw(state)" color="primary" @click="onToRawState" />
</q-card-section>
</q-card>
</div>
<div class="q-mb-md">
<q-card>
<q-card-section>
<div>
<q-chip square>Object.defineProperty</q-chip>
</div>
<div>
<q-btn label="查看" color="primary" @click="onViewDefineProperty" />
</div>
</q-card-section>
</q-card>
</div>
<div class="q-mb-md">
<q-card>
<q-card-section>
<div>
<q-btn
label="订阅与更新简单版"
color="primary"
@click="onViewEffect"
/>
</div>
</q-card-section>
</q-card>
</div>
</div>
</template>
<style lang="scss" scoped>
.title {
font-size: 22px;
color: #424242;
margin-bottom: $padding-md;
}
</style>
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