blackteay/Vue3-Vite-Vant-TS-H5
1
0
Fork 0
mirror of https://github.com/talktao/Vue3-Vite-Vant-TS-H5.git synced 2025-04-06 03:57:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat：首页布局调整

Browse Source
This commit is contained in:
talktao 2022-03-25 00:53:52 +08:00
parent 65614eb09c
commit ec41a92858
1 changed files with 38 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/views/home/Home.vue
View File

@ -1,32 +1,31 @@
<script setup lang="ts"> <script setup lang="ts">
import { getList } from '@/api/home' import { computed, reactive, ref, toRefs } from 'vue'
import { log } from 'console'
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
// import { Form, Field, Button, CellGroup } from 'vant'
const phone = ref('') const useShowList = () => {
const state = reactive({
const route = useRoute() list: [
const router = useRouter() {title: 'vite'},
{title: 'rem移动端适配'},
const pattern = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/ {title: 'VantUI 组件按需加载'},
{title: 'Sass 全局样式'},
{title: 'Vuex 状态管理'},
const onSubmit = (value) => { {title: 'Axios 封装及接口管理'},
getList(value).then(res=> { {title: 'Vue-router'},
{title: 'vite.config.ts 基础配置'},
console.log(res,'res'); {title: '检查文件中的env路径'},
{title: '配置 proxy 跨域'},
{title: '配置 alias 别名'},
{title: 'Eslint+Pettier 统一开发规范'},
{title: '批量全局注册公共组件'},
]
}) })
router.push('/orders') return toRefs(state)
console.log(value,'valuevaluevalue');
} }
const { list } = useShowList()
const onFailed = (error) => {
console.log(error,'Failed');
}
// const store = useStore() // const store = useStore()
// const name = computed(() => store.state.userNmae) // const name = computed(() => store.state.userNmae)
@ -39,23 +38,21 @@ import { computed, ref } from 'vue'
<template> <template>
<div> <div>
<CustomHeader title="首页" /> <CustomHeader title="首页" />
<div class="py-20"> <div class="py-3 px-3">
<van-form @submit="onSubmit" @failed="onFailed"> <div class="title py-2 flex-start align-items-center">
<van-cell-group inset> <img width="36" src="@/assets/logo.png" />
<van-field <span class="fs-1 px-5">Vue3+TS H5开发模板</span>
v-model="phone" </div>
required <div class="subTitle px-3 fs-3 opacity-50">
name="phone" A Vue3 h5 template with Vant UI
label="手机号" </div>
placeholder="请输入手机号" </div>
:rules="[{ pattern, message: '请输入正确内容' }]" /> <div class="py-5">
</van-cell-group > <van-list
<div style="margin: 16px;"> finished-text="没有更多了"
<van-button round block type="primary" native-type="submit"> >
查询 <van-cell v-for="(item, index) in list" :key="index" :title="item.title" icon="success" />
</van-button> </van-list>
</div>
</van-form>
</div> </div>
</div> </div>
</template> </template>
@ -66,7 +63,7 @@ import { computed, ref } from 'vue'
h1 { h1 {
display: block; display: block;
font-size: 40px; font-size: 40px;
text-align: center; text-align: center;
padding: 20px 0; padding: 20px 0;
} }
ul { ul {