vue组件化尺寸_vue size-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_71933813/article/details/129226109

文章介绍了如何在Vue3中创建一个可改变尺寸的组件，使用el-dropdown实现下拉菜单选择不同的大小，通过zIndex设置弹出层层级。组件内部利用本地存储保存用户选择，并通过自定义事件changeSize实现子组件向父组件传递信息，更新组件状态。同时，父组件接收并处理来自子组件的大小变更事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

尺寸改变组件

size 用于设置表单组件的默认尺寸，zIndex 用于设置弹出组件的层级

子组件

<el-dropdown trigger="click" @command="onCommand">
            <i class="iconfont icon-zitidaxiao" title="字体大小"></i>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item class="iconfont icon-youjiantou" command='large' :disabled="size == 'large'">
                        <span>超大</span>
                    </el-dropdown-item>
                    <el-dropdown-item class="iconfont icon-youjiantou" command='default' :disabled="size == 'default'">
                        <span>默认</span>
                    </el-dropdown-item>
                    <el-dropdown-item class="iconfont icon-youjiantou" command='small' :disabled="size == 'small'">
                        <span>较小</span>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>

// 设置默认大小(本地储存有值就从本地储存获取，没有就是默认)
let size = ref(localStorage.getItem('size') || 'default');
// 通过defineEmits自定义事件进行子传父
let emit = defineEmits<{ (e: 'changeSize', size: string): void }>();
// 更改组件大小
let onCommand = (e: string) => {
    size.value = e;
    localStorage.setItem('size', e); // 将设置的大小重新存放到本地存储(防止组件刷新后恢复默认大小)
    emit('changeSize', e);// 参数1是传给父组件的自定义事件，参数2是传给父组件的数据参数
    ElMessage.success("设置成功")
}

父组件

<SizeChange @change-size="clickSize"></SizeChange>
// 设置默认大小(本地储存有值就从本地储存获取，没有就是默认)
let size = ref(localStorage.getItem('size') || 'default');
// 设置组件大小
let clickSize = (data: string): void => {
  size.value = data;
}