vuetify select偏移

最新推荐文章于 2024-07-08 01:21:10 发布

云海梦尘

最新推荐文章于 2024-07-08 01:21:10 发布

阅读量1.3k

点赞数

分类专栏： # Vue 文章标签： vue vuetify

本文链接：https://blog.csdn.net/qq2523208472/article/details/108002497

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.问题说明

当使用vuetify的v-select组件的时候，如果组件是放在position设置为absolute的排版容器中(div)并设置有left/top/bootom/right等距离时，v-select弹出的选择项(option)会出现对应偏移

2.解决思路

v-select有个attach属性可以设置依附的容器，因此可以在v-select的外边添加一个position为relative的div

3. 解决方式代码

<div id="tt" style="position: relative">
	<v-select
			v-model="editMenu.res_type"
			:items="res_types"
			item-text="label"
			item-value="value"
			attach="#tt"
			outlined
			label="类型"
	>
	</v-select>
</div>

4.案例展示

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes, minimal-ui">
</head>
<style>
    html {
        overflow-y: auto;
    }
    .v-application--wrap{
        min-height: initial;
    }

    .menus-left::-webkit-scrollbar {
        width: 2px;
    }
    .menus-left::-webkit-scrollbar-button {
        height: 2px;
        background: rgba(255, 225, 255, 0);
    }
    .menus-left::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0);
    }
    .menus-left::-webkit-scrollbar-thumb {
        background: rgba(179,177,176,0.9);
        border-radius: 2px;
    }
	#app {
		padding: 15px 15px 0 15px;
		position: absolute;
		top: 50px;
		left: 220px;
		bottom: 0px;
		right: 0;
	}
</style>
<body>
<div id="app">
    <v-app>
        <v-select
                :items="[{label:'test',value:'1'},{label:'test2',value:'2'}]"
                item-text="label"
                item-value="value"
                outlined
                label="类型"
        >
        </v-select>
		<div id="tt" style="position: relative">
		<v-select
                :items="[{label:'test',value:'1'},{label:'test2',value:'2'}]"
                item-text="label"
                item-value="value"
                outlined
				attach="#tt"
                label="类型"
        >
        </v-select>
		</div>
    </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script>
    new Vue({
        el: '#app',
        vuetify: new Vuetify(),
        data:{
  
        },
        watch:{
        },
        methods:{
        },
        created:function () {
        }
    })
</script>
</body>
</html>