1 | ## FadePop
|
2 |
|
3 | ### Basic usage
|
4 | :::kview
|
5 | ```html
|
6 | <template>
|
7 | <a class="k-link" @click="showPop = true">click show</a>
|
8 | <k-fade-pop v-model="showPop" draggable modal-hidden footer title="title" :width="800" :height="400" @submit="submit">
|
9 | inner content
|
10 | </k-fade-pop>
|
11 | </template>
|
12 |
|
13 | <style>
|
14 | .k-link{
|
15 | padding:10px 20px;
|
16 | color:#3a8ee6;
|
17 |
|
18 | }
|
19 | .k-link:hover{
|
20 | cursor:pointer;
|
21 | }
|
22 |
|
23 | </style>
|
24 |
|
25 | <script>
|
26 | export default{
|
27 | data(){
|
28 | return {
|
29 | showPop:false,
|
30 | }
|
31 | },
|
32 | methods:{
|
33 | submit(){
|
34 | alert('submit');
|
35 | },
|
36 | },
|
37 | }
|
38 | </script>
|
39 |
|
40 | ```
|
41 | :::
|
42 |
|
43 | ## Props
|
44 |
|
45 | <div class="markdown-table">
|
46 |
|
47 | | Attribute | Description | Type | Default| Require|
|
48 | |-------|---------|------|--------|----------|
|
49 | |value/v-model|binding value for display|Boolean|false|-
|
50 | |modalHidden|whether FadePop can be closed by clicking the mask|Boolean|true|-
|
51 | |title|title text|String|-|-
|
52 | |beforeClose|hook function before closing |Function|-|-
|
53 | |width|box width|String、Number|'60%'|-
|
54 | |height|box height|String、Number|'80%'|-
|
55 | |draggable|whether FadePop is draggable|boolean|false|-
|
56 | |footer|FadePop footer|boolean ( true - display footer bar,justify-content:flex-end ) or String ( justify-content property support,default : flex-end ) |false|-
|
57 |
|
58 | </div> |
\ | No newline at end of file |