<script setup>
  // import { Row,Col } from "@king-design/vue";
 
// import KsDialog from './index.vue'
</script>

# 弹框/抽屉 
组件用于弹出框，支持抽屉弹框，支持自定义弹框内容

## 基础用法
```vue 
  <ks-dialog 
    querykey='memberAdd'
    @onSubmit='onSubmit'
    :submitloading ='submitloading'
    title = '关联成员'
  >
    我是关联成员内容
    <template #myfooter>
       自定义footer按钮
    </template>
  </ks-dialog>
```

## 介绍

- `querykey`: 必须。是本页面弹框的唯一id,KsDialog组件通过监听路由query上是否存在该唯一id在展示弹框。
- `onSubmit`: 可选，这是弹框的提交事件，用于提交弹框内容。
- `submitloading`: 可选。这是弹框的提交loading状态，用于控制弹框的提交loading状态。
- `dialogType`: 可选。弹框类型，默认是弹框，可选值有`dialog`(弹框) 和 `drawer`(抽屉) 。
- `title`: 可选。弹框标题，一般都需要传。
- `nofooter`: 可选。不展示底部按钮。
- `noheader`: 可选。不展示整个头部（包括标题、右侧关闭按钮和line）。
- `myfooter`: 插槽，可选， 按需求自定义，也可以不传，不传footer相关就用组件自己的确认取消按钮。

## 示例

  <table style='width:100%;border-collapse:collapse;margin-bottom:20px;'>
        <thead>
            <tr>
                <th>弹框</th>
                <th>抽屉</th>
            </tr>
        </thead>
    </table>
  <Row> 
    <Col span="12" style='border:1px solid #ccc;padding:10px;margin-right:10px'><img src='./image-1.png'/></Col>
    <Col span="11" style='border:1px solid #ccc;padding:10px;'><img src='./image-2.png'/></Col>
  </Row>

## 完整代码如下：

<div class="options-api" style="font-size:14px;">

```vue
<script setup>
import { Input,Button,Icon,Message } from "@king-design/vue";
import { ref,reactive } from "vue";
import {isObject,has,assign,unset,mapKeys,eq,get} from 'lodash-es'
import { KsSearch,KsDialog } from '@ksconsole/components'
import {QueryChange} from "@ksconsole/hooks";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const queryChange = new QueryChange(router,route)

// 搜索条件
const searchOptions = [
    {
        key: 'name',
        label: '实例名称',
    },
    {
        key: 'id',
        label: '实例ID',
    },
]
const onSearch = (v) => {
    console.log("🚀 ~ onSearch ~ v:", v)
}
const downloadFn = (v) => {
  console.log("🚀 ~ downloadFn ~ v:", v)
  
}

const submitloading = ref(false)
const onSubmit = () => {
  console.log('我是确认')
  let isClose = true
  submitloading.value = true
  setTimeout(() => {
      submitloading.value = false
      isClose = false
      if(!isClose) {
        Message.error('操作失败')
      }else {
        queryChange._backDetails('memberAdd')
      }
  }, 2000);
}

const onAddInfo = () => {
  queryChange._toDetails('222','memberAdd')
}
const onEdit = () => {
  queryChange._toDetails('1111','memberEdit')
}
const onCusDia = () => {
  queryChange._toDetails('222','memberCusDia')
}
const onCusDra = () => {
  queryChange._toDetails('222','memberCusDra')
}

const onCancel = (key) => {
  queryChange._backDetails(key)
} 
</script>

<template>
  <div>
     <ks-dialog 
      title = '关联成员'
      querykey='memberAdd'
      @onSubmit='onSubmit'
      :submitloading ='submitloading'
     >
      我是内容
     </ks-dialog>
     <ks-dialog 
      title = '编辑'
      querykey='memberEdit'
      dialogType='drawer'
      @onSubmit='onSubmit'
      :submitloading ='submitloading'
     >
      我是编辑
     </ks-dialog>
    <ks-dialog 
      title = '自定义按钮'
      querykey='memberCusDia'
      @onSubmit='onSubmit'
      :submitloading ='submitloading'
     >
      我是内容
      <template #myfooter>
        <Button @click='onCancel("memberCusDia")'>取消</Button>
     </template>
     </ks-dialog>
     <ks-dialog 
      title = '自定义按钮'
      querykey='memberCusDra'
      dialogType='drawer'
      @onSubmit='onSubmit'
      :submitloading ='submitloading'
     >
      <template #myfooter>
        <Button @click='onCancel("memberCusDra")'>取消</Button>
     </template>
     </ks-dialog>
    
    <ks-search
     :searchOptions ='searchOptions'
      @onSearch='onSearch'
      hasDown
      @export="downloadFn"
    >
      <Button type='primary' @click='onAddInfo' class='app-add'><Icon class="k-icon-add" /> 关联成员 </Button>   
      <Button @click='onEdit'> 编辑</Button>
    </ks-search>
    <Button @click='onCusDia'> 自定义按钮-弹框</Button>
    <Button @click='onCusDra'> 自定义按钮-抽屉</Button>
  </div>
</template>

<style scoped lang='less'>
.app-add {
  margin-right: 10px;
}
</style>


```

</div>
