vite生成的vue项目中,用了vant组件库的组件,有些组件不能铺满整个空余屏幕只能固定大小,我猜测可能是因为新版本css或者组件的一些默认值改变了导致的,不知道该怎么修改呢?
这是搜索页面的代码
<template >
<form action="/" >
<van-search
v-model="searchText"
show-action
placeholder="请输入搜索关键词"
@search="onSearch"
@cancel="onCancel"
/>
</form>
<van-divider>已选标签</van-divider>
<div v-if="activeIds.length === 0">请选择标签</div>
<van-row gutter="16" style="padding: 0 16px">
<van-col v-for="tag in activeIds">
<van-tag closeable size="medium" type="primary" @close="close(tag)">
{{ tag }}
</van-tag>
</van-col>
</van-row>
<van-divider>全部标签</van-divider>
<van-tree-select
v-model:active-id="activeIds"
v-model:main-active-index="activeIndex"
:items="tagList"
/>
</template>
<script setup>
import {ref} from 'vue';
const searchText = ref('');
const originTagList = [
{
text: '性别',
children: [
{text: '男', id: '男'},
{text: '女', id: '女'},
],
},
{
text: '年级',
children: [
{text: '大一', id: '大一'},
{text: '大二', id: '大二'},
{text: '大3', id: '大3'},
{text: '大4', id: '大4'},
{text: '大5', id: '大5aaaaaa'},
{text: '大6', id: '大6aaaaaa'},
],
},
];
let tagList = ref(originTagList)
const onSearch = (val) => {
tagList.value = originTagList.map(parentTag => {
const tempChildrenTag = [...parentTag.children];
const tempParentTag = {...parentTag};
tempParentTag.children = tempChildrenTag.filter(item => item.text.includes(searchText.value)
)
return tempParentTag;
})
};
const onCancel = () => {
searchText.value = '';
tagList.value = originTagList
};
const activeIds = ref([]);
const activeIndex = ref(0);
const close = (tag) => {
activeIds.value = activeIds.value.filter(id => id !== tag)
}
</script>
<style scoped>
</style>
这是信息页面的代码
<template>
<van-cell title="头像" is-link>
<img :src="user.avatar" alt="" style="height: 46px">
</van-cell>
<van-cell title="昵称" is-link :value="user.userName" @click="toEdit('userName', user.userName, '昵称')"/>
<van-cell title="账号" :value="user.userAccount"/>
<van-cell title="性别" is-link :value="user.gender" @click="toEdit('gender', user.gender, '性别')"/>
<van-cell title="电话" is-link :value="user.phone" @click="toEdit('phone', user.phone, '电话')"/>
<van-cell title="邮箱" is-link :value="user.email" @click="toEdit('email', user.email, '邮箱')"/>
<van-cell title="星球编号" :value="user.planetCode"/>
<van-cell title="注册时间" :value="user.gmtCreate"/>
</template>
<script setup lang="ts">
import {ref} from "vue";
import {useRouter} from "vue-router";
const user = ref({
id: 1,
userName: 'ccc',
userAccount: 'ccc',
gender: '男',
phone: '11',
email: '118@qq.com',
planetCode: '123',
avatar: 'https://img2.baidu.com/it/u=1790834130,1952230725&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
gmtCreate: new Date().toDateString()
})
const router = useRouter();
const toEdit = (editKey: string, currentValue: string, editName: string) => {
router.push({
path: '/user/edit',
query: {
editKey,
currentValue,
editName
}
})
}
</script>
<style scoped>
</style>