vue封装element组件具体详解（vue2组件系列第三十八节）

小君 2023-09-09 11:57:59 246

vue封装element组件具体详解（vue2组件系列第三十八节）使用slot自定义内容status：状态基础用法：<van-panel class="pnael" title="标题内容" desc="描述内容" status="状态" > <div class="con">第一节内容</div> </van-panel> title：标题desc：描述内容

Panel面板在我们做一些阐述性说明时会用到，还有物流状态时，并且这个组件自定义部分还很灵活，方便我们添加一些额外的内容。

准备工作：

创建一个页面: Panel.vue
在router.js里配置Panel页面的路由

{ path: '/panel' name: 'panel' component: () => import('./views/Panel.vue') }

在index.vue里添加一项

<a href="javascript:void(0)" @click="$router.push('/panel')"> <van-col span="6" class="marb20"> <van-icon name="newspaper-o" /> <div>Panel 面板</div> </van-col> </a>

至今为止呢，我们的首页显示的样式子是这样滴〜不知道不觉间我们已经学完了35个组件了！哇噢，为自己欢呼一下吧！如果想看更多的内容，欢迎关注我，每天都有更新哈。

vue封装element组件具体详解（vue2组件系列第三十八节）(1)

代码演示Panel 面板：

基础用法：

<van-panel class="pnael" title="标题内容" desc="描述内容" status="状态" > <div class="con">第一节内容</div> </van-panel>

title：标题

desc：描述内容

status：状态

vue封装element组件具体详解（vue2组件系列第三十八节）(2)

使用slot自定义内容

slot可以自定义header，footer两个部分

<van-panel class="pnael" title="标题内容" desc="描述内容" status="状态" icon="newspaper-o" > <div class="con">第一节内容</div> <div slot="header"> <van-button>取消</van-button> <van-button type="danger">确定</van-button> </div> </van-panel>

icon：可以在标题前面加一个图标

自定义header部分，即把标题那一栏占用

vue封装element组件具体详解（vue2组件系列第三十八节）(3)