8 changed files with 160 additions and 61 deletions
-
43package-lock.json
-
4package.json
-
66src/App.vue
-
17src/api/index.js
-
1src/assets/scss/globalVar.scss
-
33src/components/Count.vue
-
41src/style.scss
-
16yarn.lock
@ -1,9 +1,63 @@ |
|||||
<script setup> |
|
||||
import Count from 'cpns/Count' |
|
||||
</script> |
|
||||
|
|
||||
<template> |
<template> |
||||
<Count /> |
|
||||
|
<swiper |
||||
|
virtual |
||||
|
:direction="'vertical'" |
||||
|
:slidesPerView="1" |
||||
|
:spaceBetween="0" |
||||
|
:mousewheel="true" |
||||
|
:pagination="{ |
||||
|
clickable: true, |
||||
|
}" |
||||
|
:keyboard="{ |
||||
|
enabled: true, |
||||
|
onlyInViewport: false, |
||||
|
pageUpDown: true, |
||||
|
}" |
||||
|
@swiper="onSwiper" |
||||
|
@slideChange="onSlideChange" |
||||
|
:modules="modules" |
||||
|
class="mySwiper" |
||||
|
> |
||||
|
<swiper-slide>Slide 1</swiper-slide> |
||||
|
<swiper-slide>Slide 2</swiper-slide> |
||||
|
<swiper-slide>Slide 3</swiper-slide> |
||||
|
<swiper-slide>Slide 4</swiper-slide> |
||||
|
<swiper-slide>Slide 5</swiper-slide> |
||||
|
<swiper-slide>Slide 6</swiper-slide> |
||||
|
<swiper-slide>Slide 7</swiper-slide> |
||||
|
<swiper-slide>Slide 8</swiper-slide> |
||||
|
<swiper-slide>Slide 9</swiper-slide> |
||||
|
</swiper> |
||||
</template> |
</template> |
||||
|
<script> |
||||
|
// Import Swiper Vue.js components |
||||
|
import { Swiper, SwiperSlide } from 'swiper/vue' |
||||
|
|
||||
|
// Import Swiper styles |
||||
|
import 'swiper/css' |
||||
|
import 'swiper/css/pagination' |
||||
|
import './style.scss' |
||||
|
|
||||
<style scoped></style> |
|
||||
|
// import required modules |
||||
|
import { Mousewheel, Pagination, Virtual } from 'swiper' |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
Swiper, |
||||
|
SwiperSlide, |
||||
|
}, |
||||
|
setup() { |
||||
|
const onSwiper = swiper => { |
||||
|
console.log(swiper) |
||||
|
} |
||||
|
const onSlideChange = () => { |
||||
|
console.log('slide change') |
||||
|
} |
||||
|
return { |
||||
|
onSwiper, |
||||
|
onSlideChange, |
||||
|
modules: [Mousewheel, Pagination, Virtual], |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
</script> |
@ -1,17 +0,0 @@ |
|||||
import request from '@/service' |
|
||||
|
|
||||
export const get15DaysWeatherByArea = data => { |
|
||||
return request({ |
|
||||
url: '/api/common/weather/get15DaysWeatherByArea', |
|
||||
method: 'GET', |
|
||||
data, |
|
||||
interceptors: { |
|
||||
requestInterceptors(res) { |
|
||||
return res |
|
||||
}, |
|
||||
responseInterceptors(result) { |
|
||||
return result |
|
||||
}, |
|
||||
}, |
|
||||
}) |
|
||||
} |
|
@ -1 +0,0 @@ |
|||||
$bg-color: #1989fa; |
|
@ -1,33 +0,0 @@ |
|||||
<template> |
|
||||
<div class="bg"> |
|
||||
<span>当前数值{{ countComputed }}</span> |
|
||||
<br /> |
|
||||
<span>双倍数值{{ doubleCount }}</span> |
|
||||
<br /> |
|
||||
<button type="primary" size="default" @click="countStore.countAdd"> |
|
||||
+1 |
|
||||
</button> |
|
||||
<button type="primary" size="default" @click="countStore.countReduce"> |
|
||||
-1 |
|
||||
</button> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script setup> |
|
||||
import { computed, onMounted } from 'vue' |
|
||||
import { get15DaysWeatherByArea } from '@/api' |
|
||||
import { useCountStore } from '@/store' |
|
||||
import { storeToRefs } from 'pinia' |
|
||||
const countStore = useCountStore() |
|
||||
// 通过计算属性 |
|
||||
const countComputed = computed(() => countStore.count) |
|
||||
// 通过 storeToRefs api 结构 |
|
||||
const { doubleCount } = storeToRefs(countStore) |
|
||||
onMounted(() => { |
|
||||
get15DaysWeatherByArea() |
|
||||
}) |
|
||||
</script> |
|
||||
<style scoped lang="scss"> |
|
||||
.bg { |
|
||||
background: $bg-color; |
|
||||
} |
|
||||
</style> |
|
@ -0,0 +1,41 @@ |
|||||
|
#app { |
||||
|
height: 100%; |
||||
|
} |
||||
|
html, |
||||
|
body { |
||||
|
position: relative; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
background: #eee; |
||||
|
font-family: Helvetica Neue, Helvetica, Arial, sans-serif; |
||||
|
font-size: 14px; |
||||
|
color: #000; |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
.swiper { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.swiper-slide { |
||||
|
text-align: center; |
||||
|
font-size: 18px; |
||||
|
background: #fff; |
||||
|
/* Center slide text vertically */ |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.swiper-slide { |
||||
|
img { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
} |
Write
Preview
Loading…
Cancel
Save
Reference in new issue