主页 > 软件开发  > 

vue3,ElementPlus中抽屉el-drawer的样式设置

vue3,ElementPlus中抽屉el-drawer的样式设置

el-drawer标签的摆放位置说明:

要想有效设置el-drawer的样式,需确保el-drawer的上层不是template,须被其他元素包裹

如:<template><div><el-drawer></el-drawer></div></template>

<template><el-main><el-drawer></el-drawer></el-main></template>

这样摆放设置样式不起效果:<template><el-drawer></el-drawer></template>

el-drawer样式设置说明:

// 抽屉头部

::v-deep .el-drawer__header {

  margin-bottom: 0;

  padding: 0;

  height: 32px;

  // background-color: #ccc;

}

// 抽屉内容

::v-deep .el-drawer__body {

  padding-top: 0;

  // background-color: #ccc;

}

// 抽屉关闭按钮

::v-deep .el-drawer__close-btn {

  padding: 0;

}

标签:

vue3,ElementPlus中抽屉el-drawer的样式设置由讯客互联软件开发栏目发布,感谢您对讯客互联的认可,以及对我们原创作品以及文章的青睐,非常欢迎各位朋友分享到个人网站或者朋友圈,但转载请说明文章出处“vue3,ElementPlus中抽屉el-drawer的样式设置