Ant Design 中增加滚动条

尝试了很多增加滚动条的方法,包括设定最值等,但是好像不怎么起作用,后来发现可以直接配置card的style=“overflow-y:auto”,就可以使超出card的list出现滚动条,但是这个滚动条的效果比较粗糙,位置,颜色,宽度等还需要后续优化,先调出来保证使用吧,后面优化再补充笔记。

  • 6
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue3 使用 TypeScript 关闭弹窗,可以采用以下步骤: 1. 创建弹窗的组件,例如: ```vue <template> <div v-if="visible"> <h2>{{title}}</h2> <p>{{content}}</p> <button @click="close">关闭</button> </div> </template> <script lang="ts"> import { defineComponent, PropType } from "vue"; export default defineComponent({ props: { title: String, content: String, visible: Boolean, onClose: Function as PropType<() => void>, }, methods: { close() { this.onClose?.(); }, }, }); </script> ``` 2. 在父组件引入弹窗组件并使用它,例如: ```vue <template> <div> <button @click="showModal">打开弹窗</button> <my-modal title="这是弹窗标题" content="这是弹窗内容" :visible="visible" @onClose="closeModal" /> </div> </template> <script lang="ts"> import { defineComponent, ref } from "vue"; import MyModal from "./MyModal.vue"; export default defineComponent({ components: { MyModal, }, setup() { const visible = ref(false); function showModal() { visible.value = true; } function closeModal() { visible.value = false; } return { visible, showModal, closeModal, }; }, }); </script> ``` 在上述代码,我们使用了 `ref` 创建一个响应式变量 `visible`,用于控制弹窗的显示和隐藏。当点击“打开弹窗”按钮时,调用 `showModal` 函数将 `visible` 设置为 `true`,从而显示弹窗。当弹窗的“关闭”按钮被点击时,调用 `closeModal` 函数将 `visible` 设置为 `false`,从而关闭弹窗。 注意,在弹窗组件,我们使用了可选链操作符 `?.` 来调用 `onClose` 函数,这是为了避免在未传递 `onClose` 属性时出现的类型错误。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值