您的位置:首页 > 博客中心 > 互联网 >

Ant Design Vue封装a-drawer

时间:2022-05-11 13:02

1.创建子组件



2封装时的注意点

showMskFalg这个参数是控制抽屉是否展开的一个变量
默认这个值是关闭的
由于这个值是有父级传递过来的
我们需要对这个值进行监听
于是便有了
监听打开或者关闭
watch(props, ({ showMskFalg }) => {
   drawerInfo.visible = showMskFalg
})
他表示的是监听props中的showMskFalg这个值

3.使用组件

Open


let comInfo = reactive({
    showMskFalg: false, //默认关闭
    showCloseflag: true, //没有关闭图标
})

// 打开抽屉
function showDrawer() {
    comInfo.showMskFalg = true
}
// 关闭抽屉
function otherHander() {
    comInfo.showMskFalg = false
}

技术图片

本类排行

今日推荐

热门手游