ElementUI抽屉组件,防失忆笔记

官方文档
组件效果
ElementUI抽屉组件,防失忆笔记_第1张图片

控制红框区域宽度

ElementUI抽屉组件,防失忆笔记_第2张图片

使用size关键字
ElementUI抽屉组件,防失忆笔记_第3张图片

控制蓝框区域大小以及样式

ElementUI抽屉组件,防失忆笔记_第4张图片
直接修改标签属性

/*抽屉外样式*/
.drawer{
/* 主要内容 */
background: rgba(0, 0, 0, 0);/*红,绿,蓝,着色度*/
/* 控制模糊度 */
backdrop-filter: blur(5px);
}

修改绿框之间的距离,直接在表单上修改 label-with
ElementUI抽屉组件,防失忆笔记_第5张图片
ElementUI抽屉组件,防失忆笔记_第6张图片

调整标签宽度
ElementUI抽屉组件,防失忆笔记_第7张图片
ElementUI抽屉组件,防失忆笔记_第8张图片
直接调整属性值

你可能感兴趣的:(js,vue,elementui,vue.js,前端)