el-icon以伪元素形式插入文档流中

 <el-form-item class="common_area">
 </el-form-item>

<style lang="scss">
.common_area {
    /deep/.el-form-item__label::after {
        content:"\e7a4";
        font-family: element-icons !important;
	    pointer-events: auto;
    }
}
</style>

关键属性:content以及font-family

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
dv-scroll-board是一个基于Vue.js的滚动展示组件,可以用于展示图片、文字等内容。如果你想在dv-scroll-board插入el-ui的定制元素,可以按照以下步骤进行操作: 1. 在你的Vue组件引入el-ui组件库,并注册需要使用的组件。 2. 在dv-scroll-board组件使用slot插槽,将需要插入el-ui组件放入插槽。 3. 在插入el-ui组件设置样式,以适应dv-scroll-board的展示效果。 下面是一个示例代码,演示了如何在dv-scroll-board插入el-ui的定制元素: ``` <template> <dv-scroll-board :data="data"> <template #default="{ item }"> <el-card class="scroll-item"> <el-image :src="item.imgUrl"></el-image> <el-divider></el-divider> <el-row> <el-col :span="12">{{ item.title }}</el-col> <el-col :span="12">{{ item.date }}</el-col> </el-row> </el-card> </template> <el-button slot="control" icon="el-icon-arrow-left"></el-button> <el-button slot="control" icon="el-icon-arrow-right"></el-button> </dv-scroll-board> </template> <script> import { ElCard, ElImage, ElDivider, ElRow, ElCol, ElButton } from 'element-plus'; export default { components: { ElCard, ElImage, ElDivider, ElRow, ElCol, ElButton, }, data() { return { data: [ { imgUrl: 'https://picsum.photos/200/300', title: 'Lorem ipsum dolor sit amet', date: '2021-10-01', }, { imgUrl: 'https://picsum.photos/200/300', title: 'Consectetur adipiscing elit', date: '2021-10-02', }, { imgUrl: 'https://picsum.photos/200/300', title: 'Sed do eiusmod tempor incididunt', date: '2021-10-03', }, ], }; }, }; </script> <style> .scroll-item { width: 300px; height: 400px; margin: 10px; } </style> ``` 在上面的代码,我们使用el-card、el-image、el-divider、el-row、el-col和el-button等el-ui组件,并将它们放入了dv-scroll-board的插槽。同时,我们还设置了样式,以适应dv-scroll-board的展示效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值