Vue.js 是一款非常流行的前端框架，提供了一系列的指令和组件，使得页面开发更加简单快捷。其中，fixed 定位就是 Vue.js 中非常重要的一种定位方式。fixed 定位是指在页面中固定一个元素的位置，不随页面滚动而移动。下面，我们就来看一下在 Vue.js 中如何使用 fixed 定位。

<template>
<div v-if="show" class="popup-container">
<div class="popup-mask" @click="hidePopup"></div>
<div class="popup-content" v-if="content">
<slot name="content"></slot>
</div>
</div>
</template>
<script>
export default {
props: {
show: {
type: Boolean,
default: false
},
content: {
type: String,
default: ''
}
},
methods: {
hidePopup() {
this.$emit('update:show', false)
}
}
}
</script>
<style lang="scss">
.popup-container {
position: fixed;
z-index: 1001;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.popup-mask {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
}
.popup-content {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
}
</style>

上述代码中，我们定义了一个名为 popup 的组件，该组件中包含了一个弹窗内容和一个遮罩层。为了实现 fixed 定位，我们在组件样式中使用了 position: fixed 属性，并将遮罩层和弹窗内容都使用了 position: absolute 属性。此外，还设置了 z-index 属性，用于控制层级。

以上就是 Vue.js 中使用 fixed 定位的方法。在实际开发中， fixed 定位经常被用于实现弹窗、悬浮按钮等效果，具有非常重要的作用。