1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
| <template>
| <a-popover trigger="contextmenu" v-model="visible" :placement="position">
| <!--"(node) => node.parentNode.parentNode"-->
| <div slot="title">
| <span>{{ title }}</span>
| <span style="float: right" title="关闭">
| <a-icon type="close" @click="visible=false"/>
| </span>
| </div>
| <a-input :value="inputContent" @change="handleInputChange" :placeholder="placeholder">
| <a-icon slot="suffix" type="fullscreen" @click.stop="pop" />
| </a-input>
| <div slot="content">
| <textarea :value="inputContent" @input="handleInputChange" :placeholder="placeholder" :style="{ height: height + 'px', width: width + 'px' }"></textarea>
| </div>
| </a-popover>
| </template>
|
| <script>
| export default {
| name: 'JInputPop',
| props:{
| title:{
| type:String,
| default:'',
| required:false
| },
| position:{
| type:String,
| default:'right',
| required:false
| },
| height:{
| type:Number,
| default:200,
| required:false
| },
| width:{
| type:Number,
| default:150,
| required:false
| },
| value:{
| type:String,
| required:false
| },
| popContainer:{
| type:String,
| default:'',
| required:false
| },
| placeholder:{
| type:String,
| required:false
| },
| },
| data(){
| return {
| visible:false,
| inputContent:''
|
| }
| },
|
| watch:{
| value:{
| immediate:true,
| handler:function(){
| if(this.value && this.value.length>0){
| this.inputContent = this.value;
| }
| }
| },
| },
| model: {
| prop: 'value',
| event: 'change'
| },
| methods:{
| handleInputChange(event){
| this.inputContent = event.target.value
| this.$emit('change',this.inputContent)
| },
| pop(){
| this.visible=true
| },
| getPopupContainer(node){
| if(!this.popContainer){
| return node.parentNode
| }else{
| return document.getElementById(this.popContainer)
| }
|
| }
| }
| }
| </script>
|
| <style scoped>
|
| </style>
|
|
