rsgl/VueProject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source 
fix CustomPoem
This commit is contained in:
rsgltzyd 2024-09-17 19:49:30 +08:00
parent 07d748cb0a
commit 627384bfb9
12 changed files with 509 additions and 479 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -28,3 +28,4 @@ coverage
*.sw?
*.tsbuildinfo
/package-lock.json

0
.prettierrc.json → .prettierrc
View File

3
src/App.vue
View File

@ -1,6 +1,5 @@
<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
@ -8,8 +7,6 @@ import HelloWorld from './components/HelloWorld.vue'
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<HelloWorld msg="You did it!" />
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>

2
src/assets/main.css
View File

@ -28,8 +28,6 @@ a,
}
#app {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
}
}

18
src/components/ContentCard.vue
View File

@ -1,20 +1,19 @@
<script>
import { defineComponent } from 'vue';
import Post from '../utils/Post.js';
import { defineComponent } from 'vue'
export default defineComponent({
props: {
post: { type: Post, required: true },
post: { type: null, required: true }
},
data() {
return {
childPost: {}
};
}
},
created() {
this.childPost = this.post;
},
});
this.childPost = this.post
}
})
</script>
<template>
<div class="card">
@ -31,7 +30,7 @@ export default defineComponent({
<style scoped>
.card {
box-sizing: border-box;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, .24);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.24);
border-radius: 4px;
padding: 8px;
cursor: pointer;
@ -44,14 +43,13 @@ export default defineComponent({
line-height: 24px;
/* margin-bottom: 4px; */
padding-bottom: 4px;
border-bottom: 1px solid rgba(0, 0, 0, .24);
border-bottom: 1px solid rgba(0, 0, 0, 0.24);
}
.card .title:hover {
color: burlywood;
}
.card .content {
padding: 4px;
/* height: 100%; */

80
src/components/CustomCalendar.js
View File

@ -1,21 +1,19 @@
const weekDayNumber = 7;
const week_zh_cn = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
const week_en_us = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
const weekDayNumber = 7
const week_zh_cn = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
const week_en_us = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']
class Day {
constructor(year, month, day, content, isCurrentMonth = false, isCurrentDay = false) {
this.year = year;
this.month = month;
this.day = day;
this.content = content;
this.isCurrentMonth = isCurrentMonth;
this.year = year
this.month = month
this.day = day
this.content = content
this.isCurrentMonth = isCurrentMonth
this.isCurrentDay = isCurrentDay
}
}
const defaultDate = new Date();
const defaultDate = new Date()
const defaultYear = defaultDate.getFullYear()
const defaultMonth = defaultDate.getMonth()
const defaultDay = defaultDate.getDate()
@ -28,54 +26,48 @@ const defaultDay = defaultDate.getDate()
* @param {number} [day = defaultDay]
* @returns {[Day]}
*/
function initDay(currentDays = new Array(42), year = defaultYear, month = defaultMonth, day = defaultDay) {
function initDay(
currentDays = new Array(42),
year = defaultYear,
month = defaultMonth,
day = defaultDay
) {
if (!Array.isArray(currentDays)) {
currentDays = new Array(42);
} else if (currentDays.length != 42) {
console.log(currentDays);
throw new Error(currentDays)
currentDays = new Array(42)
} else if (currentDays.length !== 42) {
console.log(currentDays)
throw new Error('currentDays:' + currentDays)
} else {
currentDays = [...currentDays];
currentDays = [...currentDays]
}
const days = currentDays;
const lastDayOfLastMonth = new Date(year, month, 0);
const firstDayOfMonth = new Date(year, month, 1);
const lastDayOfMonth = new Date(year, month + 1, 0);
const currentDaysOfMonth = lastDayOfMonth.getDate();
const daysOfLastMonth = lastDayOfLastMonth.getDate();
const days = currentDays
const lastDayOfLastMonth = new Date(year, month, 0)
const firstDayOfMonth = new Date(year, month, 1)
const lastDayOfMonth = new Date(year, month + 1, 0)
const currentDaysOfMonth = lastDayOfMonth.getDate()
const daysOfLastMonth = lastDayOfLastMonth.getDate()
for (let i = 0; i < firstDayOfMonth.getDay(); i++) {
const weekDay = firstDayOfMonth.getDay() - 1;
days[i] = new Day(year, month - 1, daysOfLastMonth - weekDay + i, week_zh_cn[i]);
const weekDay = firstDayOfMonth.getDay() - 1
days[i] = new Day(year, month - 1, daysOfLastMonth - weekDay + i, week_zh_cn[i])
}
for (let i = 0; i < currentDaysOfMonth; i++) {
const weekDay = (firstDayOfMonth.getDay() + i) % weekDayNumber;
days[firstDayOfMonth.getDay() + i] = new Day(year, month, i + 1, week_zh_cn[weekDay], true);
const weekDay = (firstDayOfMonth.getDay() + i) % weekDayNumber
days[firstDayOfMonth.getDay() + i] = new Day(year, month, i + 1, week_zh_cn[weekDay], true)
if (i === day - 1) {
days[firstDayOfMonth.getDay() + i].isCurrentDay = true;
days[firstDayOfMonth.getDay() + i].isCurrentDay = true
}
}
for (let i = currentDaysOfMonth + firstDayOfMonth.getDay(); i < days.length; i++) {
const extraDay = i - currentDaysOfMonth - firstDayOfMonth.getDay() + 1;
const weekDay = i % weekDayNumber;
days[i] = new Day(year, month + 1, extraDay, week_zh_cn[weekDay]);
const extraDay = i - currentDaysOfMonth - firstDayOfMonth.getDay() + 1
const weekDay = i % weekDayNumber
days[i] = new Day(year, month + 1, extraDay, week_zh_cn[weekDay])
}
return currentDays;
return currentDays
}
export { week_zh_cn, week_en_us, defaultYear, defaultMonth, defaultDay, initDay };
export { week_zh_cn, week_en_us, defaultYear, defaultMonth, defaultDay, initDay }

19
src/components/CustomCalendar.vue
View File

@ -14,11 +14,21 @@ const day = ref(defaultDay)
const editMonth = {
add: () => {
month.value >= 11 ? ((month.value = 0), (year.value += 1)) : (month.value += 1)
if (month.value >= 11) {
month.value = 0
year.value += 1
} else {
month.value += 1
}
dayArray.value = initDay(dayArray.value, year.value, month.value, day.value)
},
sub: () => {
month.value <= 0 ? ((month.value = 11), (year.value -= 1)) : (month.value -= 1)
if (month.value <= 0) {
month.value = 11
year.value -= 1
} else {
month.value -= 1
}
dayArray.value = initDay(dayArray.value, year.value, month.value, day.value)
}
}
@ -73,8 +83,10 @@ const handleDayClick = (date) => {
justify-content: space-around;
width: 100%;
}
text-align: center;
}
#calendar .title {
> button {
height: 20px;
@ -89,6 +101,7 @@ const handleDayClick = (date) => {
.content {
display: grid;
grid-template-columns: repeat(7, 1fr);
> div {
outline: 1px solid;
display: flex;
@ -103,6 +116,7 @@ const handleDayClick = (date) => {
#calendar {
width: 280px;
}
.content {
height: 240px;
}
@ -112,6 +126,7 @@ const handleDayClick = (date) => {
#calendar {
max-width: 350px;
}
.content {
height: 300px;
}

64
src/components/CustomPoem.vue
View File

@ -1,15 +1,8 @@
<script>
import { defineComponent } from 'vue';
export default defineComponent({
props: {
poemTitle: {
type: String,
default: '雨霖铃·寒蝉凄切'
},
poemBody: {
type: Array,
default: () => [
<script setup>
import { reactive } from 'vue'
const poem = reactive({
title: '雨霖铃·寒蝉凄切',
body: [
'寒蝉凄切，对长亭晚，骤雨初歇。',
'都门帐饮无绪，留恋处，兰舟催发。',
'执手相看泪眼，竟无语凝噎。',
@ -18,25 +11,23 @@ export default defineComponent({
'今宵酒醒何处？杨柳岸，晓风残月。',
'此去经年，应是良辰好景虚设。',
'便纵有千种风情，更与何人说？'
],
}
},
data() {
return {
]
})
};
},
});
console.log(poem.body)
</script>
<template>
<div class="poem">
<h2 class="poem-title">
{{ this.poemTitle }}
</h2>
<ul class="poem-body">
<li v-for="{poem, index} in this.poemBody" :key="index">
{{ poem }}
<h2 class="poem_title">{{ poem.title }}</h2>
<ul class="poem_body">
<li v-for="(line, index) in poem.body" :key="index">
<span
v-for="(char, charIndex) in line.split('')"
:key="charIndex"
:style="{ animationDelay: charIndex * 0.1 + 's' }"
>{{ char }}</span
>
</li>
</ul>
</div>
@ -44,7 +35,7 @@ export default defineComponent({
<style scoped>
* {
/* box-sizing: border-box; */
box-sizing: border-box;
font-family: 'Ma Shan Zheng', cursive;
margin: 0;
padding: 0;
@ -60,17 +51,14 @@ ul {
width: 280px;
border-radius: 4px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.poem-title {
text-align: center;
> .poem_title {
white-space: nowrap;
padding-top: 10px;
font-size: 24px;
width: 100%;
}
.poem-body {
> .poem_body {
text-align: center;
white-space: nowrap;
font-size: 16px;
@ -79,5 +67,17 @@ ul {
> li {
margin: 5px auto;
}
> li span {
opacity: 0;
animation: fadeIn 1s forwards;
}
}
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
</style>

23
src/components/PersonInfo.vue
View File

@ -1,23 +0,0 @@
<script>
import { defineComponent } from 'vue';
export default defineComponent({
props: {
},
data() {
return {
};
},
});
</script>
<template>
<div>
PersonInfoHHHHH
</div>
</template>
<style scoped>
</style>

28
src/components/TestApi.vue
View File

@ -1,5 +1,5 @@
<script>
import { defineComponent } from "vue";
import { defineComponent } from 'vue'
export default defineComponent({
data() {
@ -9,27 +9,27 @@ export default defineComponent({
},
methods: {
testapi() {
fetch("http://127.0.0.1:3000/user")
.then(res => res.json())
.then(data => {
this.test = data;
fetch('http://127.0.0.1:3000/user')
.then((res) => res.json())
.then((data) => {
this.test = data
})
.catch(err => console.log('Request Failed', err))
.catch((err) => console.log('Request Failed', err))
}
}
});
})
</script>
<template>
<button @click="testapi">测试接口调用</button>
<p v-if="this.test != ''">
{{ this.test[0].name }}<br>
{{ this.test[0].birth }}<br>
{{ this.test[0].gender }}<br>
{{ this.test[0].name }}<br>
{{ this.test[0].password }}<br>
{{ this.test[0].register_date }}<br>
{{ this.test[0].status }}<br>
{{ this.test[0].name }}<br />
{{ this.test[0].birth }}<br />
{{ this.test[0].gender }}<br />
{{ this.test[0].name }}<br />
{{ this.test[0].password }}<br />
{{ this.test[0].register_date }}<br />
{{ this.test[0].status }}<br />
</p>
</template>

100
src/components/XiaoMiLogin.vue
View File

@ -1,15 +1,16 @@
<script>
import { defineComponent } from 'vue';
import { defineComponent } from 'vue'
export default defineComponent({
props: {
welcome: {
type: String,
default: '你好',
default: '你好'
},
url: {
type: String,
default: 'http://127.0.0.1:3000/login',
},
default: 'http://127.0.0.1:3000/login'
}
},
data() {
return {
@ -20,69 +21,79 @@ export default defineComponent({
accountShow: true,
passwordShow: true,
account: '',
password: '',
};
password: ''
}
},
watch: {
account(val) {
val.length > 0 ? (this.showAccountError = false, this.accountShow = false) :
(this.showAccountError = false, this.accountShow = false);
if (val.length > 0) {
this.showAccountError = false
this.accountShow = false
} else {
this.showAccountError = false
this.accountShow = false
}
},
password(val) {
val.length > 0 ? (this.showPasswordError = false, this.passwordShow = false) :
(this.showPasswordError = false, this.passwordShow = false);
},
if (val.length > 0) {
this.showPasswordError = false
this.passwordShow = false
} else {
this.showPasswordError = false
this.passwordShow = false
}
}
},
methods: {
accountFocus() {
if (this.account.length <= 0) {
this.accountShow = true;
this.accountAbove = true;
this.showAccountError = true;
this.accountShow = true
this.accountAbove = true
this.showAccountError = true
}
},
accountBlur() {
if (this.account.length <= 0) {
this.accountShow = false;
this.accountAbove = false;
this.showAccountError = false;
this.accountShow = false
this.accountAbove = false
this.showAccountError = false
}
},
passwordFocus() {
if (this.password.length <= 0) {
this.passwordShow = true;
this.passwordAbove = true;
this.showPasswordError = true;
this.passwordShow = true
this.passwordAbove = true
this.showPasswordError = true
}
},
passwordBlur() {
if (this.password.length <= 0) {
this.passwordShow = false;
this.passwordAbove = false;
this.showPasswordError = false;
this.passwordShow = false
this.passwordAbove = false
this.showPasswordError = false
}
},
async login() {
const payload = {
account: this.account,
password: this.password
};
}
try {
console.log(this.url);
console.log(this.url)
const response = await fetch(this.url, {
method: "POST",
mode: "cors",
cache: "default",
method: 'POST',
mode: 'cors',
cache: 'default',
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
credentials: 'include',
body: JSON.stringify(payload)
});
const data = await response.json();
console.log(data);
})
const data = await response.json()
console.log(data)
} catch (err) {
console.error(err);
console.error(err)
}
}
}
@ -109,7 +120,10 @@ export default defineComponent({
/>
<label
class="floating-label"
:class="{ 'floating-label-above': accountAbove, 'floating-label-error': showAccountError }"
:class="{
'floating-label-above': accountAbove,
'floating-label-error': showAccountError
}"
for="account"
>邮箱/手机号码</label
>
@ -135,7 +149,10 @@ export default defineComponent({
/>
<label
class="floating-label"
:class="{ 'floating-label-above': passwordAbove, 'floating-label-error': showPasswordError }"
:class="{
'floating-label-above': passwordAbove,
'floating-label-error': showPasswordError
}"
for="password"
>密码</label
>
@ -147,12 +164,7 @@ export default defineComponent({
<div class="accept-terms">
<label for="agreement" class="accept">
<span class="agreement-checkbox">
<input
class="accept-checkbox-input"
type="checkbox"
name="agreement"
id="agreement"
/>
<input class="accept-checkbox-input" type="checkbox" name="agreement" id="agreement" />
<span class="agreement-inner"></span>
</span>
<span class="accept-text"
@ -212,7 +224,6 @@ export default defineComponent({
position: relative;
border-radius: 4px;
overflow: hidden;
transform: all 0.1s ease;
}
.form-field-error {
@ -243,11 +254,6 @@ export default defineComponent({
color: red;
}
.form-helper {
font-size: 12px;
color: red;
}
.accept-terms {
height: 25px;
line-height: 20px;
@ -306,7 +312,7 @@ export default defineComponent({
}
.form-action::after {
content: "";
content: '';
display: block;
clear: both;
}

54
src/views/HomeView.vue
View File

@ -1,9 +1,55 @@
<script setup>
import CustomCalendar from '../components/CustomCalendar.vue'
</script>
<script setup></script>
<template>
<main>
<CustomCalendar />
<article>
<h1>An Exciting Blog Post</h1>
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth
tatsoi tomatillo melon azuki bean garlic.
</p>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea
peanut soko zucchini.
</p>
<p>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth
water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato
scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel
kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn
pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot
carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell
pepper artichoke.
</p>
<p>
Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya
nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. Sea lettuce lettuce
water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi
leek soko chicory celtuce parsley jícama salsify.
</p>
<p>
Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram
celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot
horseradish carrot squash brussels sprout chard.
</p>
</article>
<aside>
<h2>Photography</h2>
<ul class="photos"></ul>
</aside>
</main>
</template>
<style>
main {
width: 80%;
display: flex;
flex: 3 1;
}
</style>