{{content.value}}
@@ -21,18 +21,19 @@
const props = withDefaults(
defineProps<{
el : any,
- content ?: Ref
,
+ content ?: Ref,
position ?: Ref,
trigger ?: string,
enterable ?: boolean,
isDark ?: Ref,
disabled ?: Ref,
- modelValue ?: boolean
+ visible ?: Ref,
+ isCanHide ?: Ref,
+ updateVisible ?: Function
}>(),
{
enterable : true,
- trigger : 'hover',
- modelValue : true
+ trigger : 'hover'
}
);
@@ -53,31 +54,32 @@
const innnerPosition = ref(tempPosition.value);
const innnerIsDark = ref(props.isDark??true);
const innnerDisabled = ref(props.disabled??false);
- const visible = ref(props.modelValue && !innnerDisabled.value);
+ const innerVisible = ref(props.visible??true);
- const emit = defineEmits(['update:modelValue'])
- watch(visible, (val)=>{
- emit('update:modelValue', val);
- val && (popper.value.offsetWidth === 0 ? setTimeout(showPosistion, 0) : showPosistion());
+ watch(innerVisible, (val)=>{
+ invokeShowPosistion();
+ props.updateVisible && props.updateVisible(val);
})
watch(innnerDisabled, (val)=>{
- visible.value = false;
+ innerVisible.value = false;
})
watch(()=>props.content?.value, (val)=>{
- visible.value && setTimeout(showPosistion, 5);
+ innerVisible.value && invokeShowPosistion();
})
const doShow = function(){
if (!innnerDisabled.value) {
- visible.value = true;
+ innerVisible.value = true;
}
}
const doHidden = function(e : MouseEvent){
if ((checkTarget.value && props.el.contains(e.target)) || (props.enterable && popper.value.contains(e.target as Node))) return;
- style.value = {top: (-window.innerHeight) + 'px',left:0};
+ // style.value = {top: (-window.innerHeight) + 'px',left:0};
// popper.value.remove();
- visible.value = false;
+ if (props.isCanHide?.value !== false) {
+ innerVisible.value = false;
+ }
innnerPosition.value = tempPosition.value;
}
@@ -90,7 +92,14 @@
const showPosistion = function(){
postionFns[tempPosition.value] && (style.value = postionFns[tempPosition.value](props.el, popper.value, innnerPosition));
}
+ const invokeShowPosistion = function(){
+ if (innerVisible.value) {
+ popper.value.offsetWidth === 0 ? setTimeout(showPosistion, 0) : showPosistion();
+ // 延时确保计算位置正确
+ setTimeout(()=>innerVisible.value && showPosistion(), 2);
+ };
+ }
onMounted(()=>{
- visible.value && (popper.value.offsetWidth === 0 ? setTimeout(showPosistion, 0) : showPosistion());
+ invokeShowPosistion();
})
\ No newline at end of file
diff --git a/src/module/popper/usePopper.ts b/src/module/popper/usePopper.ts
index 19265d2e..c60c44b2 100644
--- a/src/module/popper/usePopper.ts
+++ b/src/module/popper/usePopper.ts
@@ -1,4 +1,4 @@
-import { h, ref, render, watchEffect} from "vue";
+import { h, ref, render, watchEffect, watch} from "vue";
import popper from "./index.vue";
import { once } from "../../tools/domUtil";
const EVENT_MAP : any = {
@@ -14,11 +14,20 @@ const usePopper = {
for (const key in props) {
_props[key] = ref(props[key]);
}
+ _props.updateVisible = function(val:boolean) {
+ _props.visible && (_props.visible.value = val);
+ }
_this.renderPopper(_props);
watchEffect(() => {
for (const key in _props) {
+ if (key === 'visible') {
+ continue;
+ }
_props[key].value = props[key];
}
+ });
+ watch(() => props.visible, (val: boolean)=> {
+ _props.updateVisible(val);
})
})
},
diff --git a/src/module/tooltip/index.vue b/src/module/tooltip/index.vue
index e95188c9..e85205c4 100644
--- a/src/module/tooltip/index.vue
+++ b/src/module/tooltip/index.vue
@@ -5,7 +5,7 @@ export default defineComponent({
name: "LayTooltip",
props: {
content: {
- type: String,
+ type: [Number, String],
required: true,
},
position: {
@@ -19,6 +19,14 @@ export default defineComponent({
disabled: {
type: Boolean,
default: false,
+ },
+ visible: {
+ type: Boolean,
+ default: true
+ },
+ isCanHide: {
+ type: Boolean,
+ default: true
}
},
render() {
diff --git a/src/module/transfer/index.vue b/src/module/transfer/index.vue
index 8e565a7a..c9dc418f 100644
--- a/src/module/transfer/index.vue
+++ b/src/module/transfer/index.vue
@@ -44,7 +44,7 @@ const allLeftChange = function (checked: any) {
watch(
leftSelectedKeys,
- function () {
+ () => {
if (
leftDataSource.value.length === leftSelectedKeys.value.length &&
leftDataSource.value.length != 0
@@ -70,7 +70,7 @@ const allRightChange = function (checked: any) {
watch(
rightSelectedKeys,
- function () {
+ () => {
if (
rightDataSource.value.length === rightSelectedKeys.value.length &&
rightDataSource.value.length != 0
diff --git a/src/module/tree/TreeNode.vue b/src/module/tree/TreeNode.vue
index c54025fb..cef7c682 100644
--- a/src/module/tree/TreeNode.vue
+++ b/src/module/tree/TreeNode.vue
@@ -113,11 +113,12 @@ function handleTitleClick(node: TreeData) {
0 &&
@@ -167,6 +168,7 @@ class Tree {
if (node.children) {
this.setChildrenChecked(checked, node.children)
}
+ console.log(this.getData());
}
getData() {
diff --git a/src/module/tree/useTree.ts b/src/module/tree/useTree.ts
index 6310feaa..631c6922 100644
--- a/src/module/tree/useTree.ts
+++ b/src/module/tree/useTree.ts
@@ -29,6 +29,7 @@ export const useTree: UseTree = (props: TreeProps, emit: TreeEmits) => {
const nodeList = computed(() => {
const nodes = tree.getData()
+ console.log(nodes);
return nodes
})