关于Antdesign中很多组件的属性可以用slot替换

最新推荐文章于 2023-11-02 17:03:19 发布
最新推荐文章于 2023-11-02 17:03:19 发布
阅读量2.1k 收藏 3
点赞数 2
分类专栏： Ant-design vue 文章标签： vue.js html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hanah21/article/details/115183903
版权

关于Antdesign中很多组件的属性可以用slot替换

刚来公司熟悉项目的时候，发现代码中会大量使用插槽，因为之前学习的时候用插槽都是先定义在引入使用，但是在公司的项目里完全找不到插槽在哪里定义和引用的。

今天写代码终于明白了，ant-design是默认可以使用插槽替换组件一些属性的
以modal为例，我的modal中没有title属性，但是在下面可以定义一个插槽盒子替换这个属性，并且优先级高于内嵌写的title，就算你再组件里写title也会失效

<a-modal width="900px" :visible="visible" @ok="handleSubmit" @cancel="handleCancel">
	<div slot="title">
        <span>{{ title }}</span>
    </div>

还有其他例子，比如也可以使用slot=“footer” 替换modal自带的底部，其他还有很多原理跟这个一样

70yyds
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
ant design vue 表格a-table二次封装，slots渲染问题
Cooky的博客
12-26 1万+
目的就是对a-table进行二次封装，但是在如何显示a-table的slot时遇到了问题，原本想法是在a-table内把$slots都渲染，期望在使用该组件时能正确渲染，然而。。。并不会正确渲染 <template> <a-table bordered :scroll="{ x: scrollX, y: 600 }" v-bind="{...$at...
ant 插槽使用方法
weixin_48419629的博客
11-13 1014
这个是直接复制的代码 <template> <div class="send"> <a-table :columns="columns" :data-source="tableList" :pagination="true" > <template slot="index" slot-scope="text"> <!-- <div class="editable-
Vue使用Ant design中a-tree的scopedSlots
m0_52948787的博客
09-03 3118
Vue使用Ant design中a-tree的scopedSlots实现树标题的前后都有icon图标 <a-tree style="width:100%" :tree-data="treeData" show-icon :default-selected-keys="[treeData[0].key]"> <!-- 每项 最前面的 箭头的 icon --> <a-icon slot="switcherIcon" type="caret-down" />
小程序自定义导航栏组件
培根芝士的专栏
06-18 364
导航栏wxml： <view class="nav-content"> <view class='nav-wrap' style='height:{{height}}px;'> <view class="navback-back"> <!--返回按钮--> <view class="back"> <view class="button"
TDesign----表格组件reserveSelectedRowOnPaginate
最新发布
Gunba1的博客
11-02 351
TDesign之表格组件reserveSelectedRowOnPaginate
解决vue同一slot在组件中渲染多次的问题
10-18
今天小编就为大家分享一篇解决vue同一slot在组件中渲染多次的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue slot 在子组件中显示父组件传递的模板
08-27
在上面的示例代码中，我们可以看到，子组件 `modal` 中的 Slot 使用了默认值 `如果没有会使用这个默认值`。这意味着，如果父组件没有传递对应的模板，子组件将显示默认值。 五、 Vue Slot 的优点 Vue Slot 有很多...
vue组件化中slot的基本使用方法
10-17
主要给大家介绍了关于vue组件化中slot的基本使用方法，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
Vue.js中组件中的slot实例详解
10-19
主要介绍了Vue.js中组件中的slot实例详解的相关资料,需要的朋友可以参考下
微信小程序实现步骤条-类似vantweapp(二)-tdesign实现
qq_46199553的博客
10-24 1352
微信小程序步骤条
antd表单的＜a-form-item＞使用自定义label 插槽
peppa_pig的博客
07-14 1万+
item的label类型可以使字符串或者自定义label插槽。 1.直接使用字符串类型是最常见的 <a-form-model-item prop="job" label="岗位"> <a-input v-model="job" placeholder="请输入岗位" /> </a-form-model-item> 2.自定义label使用插槽 <a-form-model-item prop="job"> <span s...
为什么牛逼的程序员都不用 “ ! = null “ 做判空？
程序员麦冬的博客（公众号同名）
10-13 807
问题 为了避免空指针调用，我们经常会看到这样的语句 ...if (someobject != null) { someobject.doCalc();}... 最终，项目中会存在大量判空代码，多么丑陋繁冗！如何避免这种情况？我们是否滥用了判空呢？ 精华回答 这是初、中级程序猿经常会遇到的问题。他们总喜欢在方法中返回null，因此，在调用这些方法时，也不得不去判空。另外，也许受此习惯影响，他们总潜意识地认为，所有的返回都是不可信任的，为了保护自己程序，就加了大量的判空。 吐槽完毕，回到这个题目本身：
微信小程序使用TDesign：t-popup出现真机测试无法滚动问题
agesguyue的博客
06-10 2171
微信小程序项目，让用Tdesign这个新的ui，因为还是测试版，官方没有指南只有示例和api并且写的非常简单，就想着遇到的一些问题记录一下，方便以后借鉴使用。直接上代码片段
关于 ant-design-vue a-card 自定义title的问题
冰魂魄的博客
06-02 9327
卡片标题上添加图标 给卡片里面元素身上加slot属性，值等于title，需要取消组件a-card的title属性，不然无效。 <a-card :body-style='{padding:0}'> <div slot="title"><a-icon type="smile" />卡片标题</div> <p>card content</p> <p>card content</p> &lt
ant design vue版本modal设置一个按钮
xc_buxiangzhangda的博客
08-15 1万+
//设置一个按钮或者单独样式 <a-modal title="已关联ECU" width="60%" :visible="ecuvisible" :destroyOnClose="true" :keyboard="false" :maskClosable="false" @cancel="handleCancel" > <template slot="footer"> ...
antd(ant design) Menu组件库使用总结（React）
Venchi的博客
05-25 5万+
原创1. 使submenu可点击：title属性设置为链接即可。&lt;SubMenu                    key={`/site/${site}`}                    className={`${styles.bg}`}                    title={&lt;Link to={`/sub1`}&gt;标题&lt;/Link&gt; } ...
Vue中slot的使用（通俗易懂）
热门推荐
zhouzuoluo的博客
06-01 16万+
在vue中使用slot插槽个人理解：是对组件的扩展，通过slot插槽向组件内部指定位置传递内容，通过slot可以父子传参；开发背景：正常情况下,&lt;Child&gt;&lt;span style=”color:red;”&gt;hello world&lt;/span&gt;&lt;/Child&gt;在组件标签Child中的span标签会被组件模板template内容替换掉，当想让组件标签C...
ant-design-vue 快速入手及常用标签
10-24 1921
ant-design-vue 快速入手及常用标签 　　 <a-locale-provider :locale="locale">全局配置国际化文案 1、按钮 <a-button>按钮</a-b...
ant design组件 collapse 组件头部header slot的用法 用代码演示一下
04-21
好的，关于您的问题，我可以为您解答。 对于 ant design 组件的 Collapse，可以使用 header slot 来定义其头部。具体的代码演示如下： ```html <template> <a-collapse> <a-collapse-panel v-for="item in items" :key="item.key"> <template #header> <span>{{ item.title }}</span> <span class="arrow"> <a-icon :type="showArrow ? 'up' : 'down'" /> </span> </template> <p>{{ item.content }}</p> </a-collapse-panel> </a-collapse> </template> <script> import { ACollapse, ACollapsePanel, AIcon } from 'ant-design-vue' export default { components: { ACollapse, ACollapsePanel, AIcon }, data () { return { items: [ { key: '1', title: '标题1', content: '内容1' }, { key: '2', title: '标题2', content: '内容2' } ], showArrow: true } } } </script> ``` 在上面的代码中，我们使用了 `a-collapse` 来包裹所有的折叠面板，然后通过 `v-for` 循环来生成每一个折叠面板。在每一个折叠面板中，我们使用 `header slot` 来定义它的头部，头部的具体内容可以包含任何 HTML 元素，例如文字、图标等。在这个例子中，我们使用了两个 `span` 来分别表示标题和箭头。在 `header` 中，我们还可以使用父组件中的数据，例如上面的 `showArrow` 用来表示箭头是否显示。 希望这个例子能够帮助您更好地理解 ant design 的 Collapse 组件，如果您还有其他问题，可以随时提出。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值