Merge pull request #3412 from huanghong1125/poptip

update poptip content change

Merge pull request #3412 from huanghong1125/poptip
update poptip content change
Aresn · GitHub
2 parents b0794170 f0116c03
Showing 2 changed files with 59 additions and 2 deletions Show diff stats
examples/routers/poptip.vue
src/components/base/popper.js
@@ -2,7 +2,7 @@
     <div style="margin: 200px">
         <Tabs value="name1">
             <TabPane label="标签一" name="name1">
-                <div style="width: 200px;height:300px;overflow: auto;">
+                <!-- <div style="width: 200px;height:300px;overflow: auto;">
                     <Poptip title="提示标题" content="标签一的内容" placement="left" transfer >
                         <Button id="aaa">左边</Button>
                     </Poptip>
@@ -15,6 +15,19 @@
                     <Poptip title="提示标题" content="标签一的内容" placement="bottom" transfer>
                         <Button id="aaa">下边</Button>
                     </Poptip>
+                </div> -->
+                <div>
+                    <Poptip title="提示标题" content="标签一的内容" transfer>
+                        <Button id="aaa">点击显示</Button>
+                        <div slot="content">
+                            <Button @click='loadData(15)'>15条数据</Button>
+                            <Button @click='loadData(10)'>10条数据</Button>
+                            <Button @click='loadData(5)'>5条数据</Button>
+                            <Button @click='loadData(3)'>3条数据</Button>
+                            <Table :columns='columns1' :data='data1'>
+                            </Table>
+                        </div>
+                    </Poptip>
                 </div>
             </TabPane>
             <TabPane label="标签二" name="name2">标签二的内容</TabPane>
@@ -27,8 +40,48 @@
             return {
                 options: {
-                }
+                },
+                columns1:[
+                    {
+                        title: 'Data1',
+                        key: 'data1',
+                        width: 100,
+                    },
+                    {
+                        title: 'Data2',
+                        key: 'data2',
+                        width: 100
+                    },
+                    {
+                        title: 'Data3',
+                        key: 'data3',
+                        width: 100
+                    },
+                    {
+                        title: 'Data4',
+                        key: 'data4',
+                        width: 100
+                    }
+                ],
+                data1:[],
             }
+        },
+        created(){
+            this.loadData(5);
+        },
+        methods:{
+            loadData(num){
+                let data = [];
+                for (let i=0; i<num; i++) {
+                    data.push({
+                        data1:Math.random()*1000000,
+                        data2:Math.random()*100000000,
+                        data3:Math.random()*10000000000,
+                        data4:Math.random()*1000000000000,
+                    })
+                }
+                this.data1 = data
+            },
         }
     }
 </script>
@@ -110,6 +110,10 @@ export default {
             this.popperJS = null;
         }
     },
+    updated (){
+        this.$nextTick(()=>this.updatePopper());
+        
+    },
     beforeDestroy() {
         if (isServer) return;
         if (this.popperJS) {