| 1 | # 弹窗
|
| 2 |
|
| 3 | ## 代码演示
|
| 4 |
|
| 5 | ### 基础用法
|
| 6 | :::kview
|
| 7 | ```html
|
| 8 | <template>
|
| 9 | <a class="k-link" @click="showPop = true">点击弹出，点击阴影消失</a>
|
| 10 | <k-fade-pop v-model="showPop" draggable modal-hidden footer title="标题" :width="800" :height="400" @submit="submit">
|
| 11 | 展示内容
|
| 12 | </k-fade-pop>
|
| 13 | </template>
|
| 14 |
|
| 15 | <style>
|
| 16 | .k-link{
|
| 17 | padding:10px 20px;
|
| 18 | color:#3a8ee6;
|
| 19 |
|
| 20 | }
|
| 21 | .k-link:hover{
|
| 22 | cursor:pointer;
|
| 23 | }
|
| 24 |
|
| 25 | </style>
|
| 26 |
|
| 27 | <script>
|
| 28 | import Vue from 'vue'
|
| 29 | import FadePop from '../../src/components/fade-pop'
|
| 30 | Vue.use(FadePop);
|
| 31 | export default{
|
| 32 | data(){
|
| 33 | return {
|
| 34 | showPop:false,
|
| 35 | }
|
| 36 | },
|
| 37 | methods:{
|
| 38 | submit(){
|
| 39 | alert('submit');
|
| 40 | },
|
| 41 | },
|
| 42 | }
|
| 43 | </script>
|
| 44 |
|
| 45 | ```
|
| 46 | :::
|
| 47 |
|
| 48 | ## Props
|
| 49 |
|
| 50 | <div class="markdown-table">
|
| 51 |
|
| 52 | | 参数 | 说明 | 类型 | 默认值| 是否必须|
|
| 53 | |-------|---------|------|--------|----------|
|
| 54 | |v-model|双向绑定，是否显示|Boolean|false|-
|
| 55 | |modalHidden|点击阴影消失|Boolean|true|-
|
| 56 | |title|标题头|String|-|-
|
| 57 | |beforeClose|关闭前钩子函数|Function|-|-
|
| 58 | |width|宽度|String、Number|'60%'|-
|
| 59 | |height|高度|String、Number|'80%'|-
|
| 60 | |draggable|是否可拖拽|boolean|false|-
|
| 61 | |footer|是否显示底部按钮 或 justify-content属性值|boolean ( 是否展示，为true则justify-content默认flex-end )；string ( 展示，其为justify-content属性值，默认 : flex-end ) |false|-
|
| 62 |
|
| 63 | </div> |
| \ | No newline at end of file |