+
@@ -22,46 +22,86 @@ export default {
default: 'Title'
},
trigger:{
- type: String,
+ type:String,
default:'click'
- },
- },
- components:{
+ }
},
data() {
- return {}
+ return {
+ popoverVisible: false,
+ clientY:0,
+ clientX:0,
+ }
},
- computed: {
+ mounted() {
+ window.addEventListener('click', this.handleCancelPopover)
},
- created() {
+ destroyed() {
+ window.removeEventListener('click',this.handleCancelPopover)
},
methods: {
- handleClick(){
- console.log(123)
+ handleClick(e){
+ e.stopPropagation();
+ this.popoverVisible = !this.popoverVisible
+ const width = e.target.clientWidth
+ const itemCenter = e.target.offsetLeft + width/2 // 计算元素的中间点距浏览器的x轴位置
+ const itemTop = e.target.offsetTop // 计算元素距浏览器的顶部位置
+ this.$nextTick(()=>{
+ const contentCenter = this.$refs.popoverContent.offsetWidth // 提示框的自身宽度
+ const contentHeight = this.$refs.popoverContent.offsetHeight // 提示框的自身高度
+ this.clientX = itemCenter - contentCenter/2
+ this.clientY = itemTop - contentHeight -15
+ })
+ },
+ handleMouseEnter(e){
+ if(this.trigger === 'hover'){
+ this.handleClick(e)
+ }
+ },
+ handleCancelPopover() {
+ this.$nextTick(()=>{
+ if(this.popoverVisible){
+ this.popoverVisible = false
+ }
+ })
+ },
+ handleMouseLeave(e){
+ if(this.trigger === 'hover'){
+ this.handleCancelPopover()
+ }
}
+
},
}
diff --git a/vue/components/Table/index.vue b/vue/components/Table/index.vue
index c5e2b90..332b304 100644
--- a/vue/components/Table/index.vue
+++ b/vue/components/Table/index.vue
@@ -164,6 +164,7 @@ export default {
position: relative;
.table-wrapper {
display: table;
+ width: 100%;
border: 1px solid #ebeef5;
}
.my-table {
@@ -208,9 +209,15 @@ export default {
}
}
+
img {
width: 16px;
}
+ tbody {
+ tr:last-child {
+ border: none;
+ }
+ }
}
.filter {
diff --git a/vue/components/demo.vue b/vue/components/demo.vue
index 357c153..99a4db4 100644
--- a/vue/components/demo.vue
+++ b/vue/components/demo.vue
@@ -1,10 +1,20 @@
+
-
-
+
+
+
+
+
+
+
+
+
+
+