js练习

src/components/carousel-warp/CarouselWarp.vue → src/components/chart-carousel-warp/ChartCarouselWarp.vue

 <!--
- * 轮播图
+ * 动态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

@@ -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

 // 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

@@ -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

@@ -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

 <!--
- * 轮播图
+ * 动态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

+<!--
+ * 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>