Skip to content

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

promise学习

parent 2f37a34b
Hide whitespace changes
Inline Side-by-side
Showing with 305 additions and 53 deletions
src/modules/page6/IndexPage.vue
View file @ 5b4aac46
......@@ -15,8 +15,8 @@ export default {
// import CanvasStudy from './element/CanvasStudyCopy1.vue';
// import CanvasStudy from './element/CanvasCurve.vue';
// import SubComponents from './element/AsyncAwait.vue';
import SubComponents from './element/equipment/IndexPage.vue';
import SubComponents from './element/AsyncAwait.vue';
// import SubComponents from './element/equipment/IndexPage.vue';
</script>
<template>
<div class="page6 container-height">
......
src/modules/page6/config.ts
View file @ 5b4aac46
......@@ -526,12 +526,12 @@ export const machineList1 = [
{
code: 'Z02',
state: 'run',
color: 'red',
color: 'pink',
},
{
code: 'Z03',
state: 'run',
color: 'red',
color: 'green',
},
{
code: 'Z04',
......@@ -573,4 +573,129 @@ export const machineList1 = [
state: 'run',
color: 'red',
},
{
code: 'Z012',
state: 'run',
color: 'red',
},
{
code: 'Z013',
state: 'run',
color: 'red',
},
];
// 机台列表测试数据2
export const machineList2 = [
{
code: 'B01',
state: 'run',
color: 'pink',
},
{
code: 'B02',
state: 'run',
color: 'pink',
},
{
code: 'B03',
state: 'run',
color: 'pink',
},
{
code: 'B04',
state: 'run',
color: 'pink',
},
{
code: 'B05',
state: 'run',
color: 'pink',
},
// {
// code: 'B06',
// state: 'run',
// color: 'pink',
// },
// {
// code: 'B07',
// state: 'run',
// color: 'pink',
// },
// {
// code: 'B08',
// state: 'run',
// color: 'pink',
// },
// {
// code: 'B09',
// state: 'run',
// color: 'pink',
// },
// {
// code: 'B010',
// state: 'run',
// color: 'pink',
// },
// {
// code: 'B011',
// state: 'run',
// color: 'pink',
// },
// // 分割
// {
// code: 'B012',
// state: 'run',
// color: 'pink',
// },
// {
// code: 'B013',
// state: 'run',
// color: 'pink',
// },
// {
// code: 'B014',
// state: 'run',
// color: 'pink',
// },
// {
// code: 'B015',
// state: 'run',
// color: 'pink',
// },
// {
// code: 'B016',
// state: 'run',
// color: 'pink',
// },
// {
// code: 'B017',
// state: 'run',
// color: 'pink',
// },
// {
// code: 'B018',
// state: 'run',
// color: 'pink',
// },
// {
// code: 'B019',
// state: 'run',
// color: 'pink',
// },
// {
// code: 'B020',
// state: 'run',
// color: 'pink',
// },
// {
// code: 'B021',
// state: 'run',
// color: 'pink',
// },
// {
// code: 'B022',
// state: 'run',
// color: 'pink',
// },
];
src/modules/page6/element/AsyncAwait.vue
View file @ 5b4aac46
<!-- eslint-disable @typescript-eslint/no-unused-vars -->
<!--
* async await return
-->
......@@ -9,12 +10,12 @@ const msg = ref('');
const requestMsg = ref('');
onMounted(() => {
fun();
fun1();
});
function getMag(name: any) {
return `Hello, my name is ${name}.`;
}
function fun() {
function fun1() {
const name = '张三';
const msg = getMag(name);
console.log(msg); // Hello, my name is 张三.
......@@ -61,22 +62,64 @@ function heavyLoad() {
}
function fetchApi() {
const fetchPromise = fetch(
'https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json'
fn().then(
function (data) {
console.log('resolve回调', data);
// console.log(somedata); // somedata未定义
},
function (error) {
console.log('reject回调', error);
}
);
}
console.log(fetchPromise);
fetchPromise.then((response) => {
console.log(`已收到响应：${response.status}`);
function fn() {
return new Promise((resolve, reject) => {
setTimeout(() => {
// Math.random 生成0~1的随机数
// Math.ceil 向上取整
let num = Math.ceil(Math.random() * 10); // 生成1~10的随机整数
if (num <= 5) {
resolve(`执行成功，num的值为:${num}`);
} else {
reject(`执行失败，该数字大于5，num的值为${num}`);
}
}, 1000);
});
}
console.log('已发送请求……');
async function fetchProducts() {
try {
// 在这一行之后，我们的函数将等待 `fetch()` 调用完成
// 调用 `fetch()` 将返回一个“响应”或抛出一个错误
const response = await fetch(
'https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json'
);
if (!response.ok) {
throw new Error(`HTTP 请求错误：${response.status}`);
} else {
console.log(response);
}
// 在这一行之后，我们的函数将等待 `response.json()` 的调用完成
// `response.json()` 调用将返回 JSON 对象或抛出一个错误
const json = await response.json();
console.log(json[0].name);
} catch (error) {
console.error(`无法获取产品列表：${error}`);
}
}
// await fetchAPI示例
</script>
<template>
<div class="fit">
<div class="q-mb-md">async await return</div>
<div class="q-mb-md">
<a
href="https://blog.csdn.net/huchaoyue_/article/details/127686795"
target="_blank"
>详细内容请查看CSDN</a
>
</div>
<div class="content q-gutter-md">
<q-card class="my-card bg-primary text-white">
<q-card-section>
......@@ -129,6 +172,20 @@ function fetchApi() {
</div>
</q-card-section>
</q-card>
<q-card class="my-card bg-pink-3 text-white">
<q-card-section>
<div class="q-mb-md q-gutter-sm">
<q-btn
no-caps
color="white"
text-color="pink-3"
label="async await"
@click="fetchProducts"
/>
</div>
</q-card-section>
</q-card>
</div>
</div>
</template>
......
src/modules/page6/element/equipment/EquipmentPage.vue
View file @ 5b4aac46
......@@ -15,43 +15,70 @@ const slide = ref('1');
watch(
() => props.list,
() => {
listChange();
(newVal, oldVal) => {
listChange(newVal, oldVal);
}
);
function listChange() {
console.log('999', props.list);
function listChange(newVal: any, oldVal: any) {
console.log('newVal', newVal.length, 'oldVal', oldVal.length);
if (oldVal.length < newVal.length && oldVal.length === 1) {
setTimeout(() => {
slide.value = '2';
}, props.autoplay);
}
if (newVal.length < Number(slide.value)) {
slide.value = '1';
}
}
function clickPoint(value: string) {
if (value !== slide.value) {
slide.value = value;
}
}
</script>
<template>
<div class="my-carousel-box">
<div class="content">
<q-carousel
v-model="slide"
transition-prev="slide-right"
transition-next="slide-left"
animated
infinite
class="my-carousel"
>
<q-carousel-slide name="1" class="my-carousel-slide">
<div class="item">
<div class="item-equipment">
<div class="pic"></div>
<div class="item-name">Z01</div>
<template v-if="props.list.length > 0">
<div class="content">
<q-carousel
v-model="slide"
transition-prev="slide-right"
transition-next="slide-left"
animated
infinite
:keep-alive="false"
:autoplay="props.autoplay"
class="my-carousel"
>
<q-carousel-slide
:name="String(index + 1)"
class="my-carousel-slide"
v-for="(item, index) in props.list"
:key="index"
>
<div class="item-carousel-content">
<div class="item" v-for="(ele, el_index) in item" :key="el_index">
<div class="pic"></div>
<div class="item-name" :style="{ backgroundColor: ele.color }">
{{ ele.code }}
</div>
</div>
</div>
</div>
</q-carousel-slide>
<q-carousel-slide name="2" class="my-carousel-slide">
<div class="item">888</div>
</q-carousel-slide>
<q-carousel-slide name="3" class="my-carousel-slide">
<div class="item">999</div>
</q-carousel-slide>
</q-carousel>
</div>
<div class="points">导航</div>
</q-carousel-slide>
</q-carousel>
</div>
<div class="points">
<div
class="cursor-pointer"
:class="{ active: slide === String(index + 1) }"
v-for="(i, index) in props.list"
:key="index"
@click="clickPoint(String(index + 1))"
></div>
</div>
</template>
</div>
</template>
......@@ -73,7 +100,7 @@ function listChange() {
.my-carousel-slide {
padding: 0 !important;
}
.item {
.item-carousel-content {
width: 100%;
height: 100%;
overflow: hidden;
......@@ -82,14 +109,15 @@ function listChange() {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(2, 1fr);
// grid-template-columns: repeat(2, 1fr);
// grid-template-rows: repeat(2, 1fr);
grid-gap: 5px 5px;
}
.item-equipment {
border: 1px solid red;
.item {
display: flex;
flex-flow: column nowrap;
.pic {
width: 100%;
background-color: pink;
background-image: url('https://img0.baidu.com/it/u=925843206,3288141497&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666803600&t=81f620f962ec6a70673c05d6a55328b5');
background-size: 100% 100%;
flex: 1;
......@@ -99,7 +127,26 @@ function listChange() {
display: flex;
justify-content: center;
align-items: center;
background-color: yellow;
}
}
.points {
padding: 5px;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
// 小圆点
.cursor-pointer {
height: 4px;
width: 40px;
margin-right: 5px;
border-radius: 50px;
background-color: rgba($color: #3ecdff, $alpha: 0.3);
cursor: pointer;
transition: all 0.5s;
}
.active {
background-color: #3ecdff;
}
</style>
src/modules/page6/element/equipment/IndexPage.vue
View file @ 5b4aac46
......@@ -3,7 +3,7 @@
-->
<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import { machineList1 } from '../../config';
import { machineList1, machineList2 } from '../../config';
import EquipmentPage from './EquipmentPage.vue';
const state = reactive({
......@@ -17,18 +17,22 @@ onMounted(() => {
});
function handleMachineList(data: any) {
const step = 3;
const step = 10; // 10个一组
const length = data.length;
const divisionRes = division(length, step);
console.log(divisionRes);
let DATA = JSON.parse(JSON.stringify(data));
let arr = [] as any;
for (let i = 0; i < divisionRes.int; i++) {
return;
const newArr = DATA.slice(i * step, (i + 1) * step);
arr.push(newArr);
}
const last = divisionRes.int * step;
if (DATA.slice(last).length > 0) {
arr.push(DATA.slice(last));
}
return DATA;
return arr;
}
// 取整 取余
......@@ -40,9 +44,28 @@ function division(n: number, m: number) {
int,
};
}
function changeData1() {
state.list = handleMachineList(machineList2);
}
function resetData() {
state.list = handleMachineList(machineList1);
}
function changeTime1() {
state.autoplay = 1000;
}
function changeTime2() {
state.autoplay = 5000;
}
</script>
<template>
<div>机台列表</div>
<div>
<q-btn label="改变数据1" color="primary" @click="changeData1" />
<q-btn label="重置" color="primary" @click="resetData" />
<q-btn label="改变轮播时间1000" color="orange" @click="changeTime1" />
<q-btn label="改变轮播时间5000" color="orange" @click="changeTime2" />
</div>
<div class="my-warp-box">
<equipment-page :list="state.list" :autoplay="state.autoplay" />
</div>
......@@ -53,6 +76,6 @@ function division(n: number, m: number) {
width: 500px;
height: 300px;
border: 1px solid red;
background-color: yellowgreen;
background-color: black;
}
</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