|
@@ -1,16 +1,18 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="btn-group">
|
|
<div class="btn-group">
|
|
|
<button
|
|
<button
|
|
|
|
|
+ id="filter-column-def"
|
|
|
type="button"
|
|
type="button"
|
|
|
class="btn btn-default dropdown-toggle"
|
|
class="btn btn-default dropdown-toggle"
|
|
|
aria-haspopup="true"
|
|
aria-haspopup="true"
|
|
|
aria-expanded="false"
|
|
aria-expanded="false"
|
|
|
- @click="showDropdown = !showDropdown"
|
|
|
|
|
|
|
+ @click="showDropdown = true"
|
|
|
>
|
|
>
|
|
|
- <span class="fa fa-bars" />
|
|
|
|
|
|
|
+ <span id="filter-column-def-span" class="fa fa-bars" />
|
|
|
</button>
|
|
</button>
|
|
|
<ul
|
|
<ul
|
|
|
v-show="showDropdown"
|
|
v-show="showDropdown"
|
|
|
|
|
+ v-click-outside="onClickOutside"
|
|
|
class="dropdown-menu dropdown-menu-right dropmenu-userdefined column-prop"
|
|
class="dropdown-menu dropdown-menu-right dropmenu-userdefined column-prop"
|
|
|
>
|
|
>
|
|
|
<li
|
|
<li
|
|
@@ -48,8 +50,14 @@
|
|
|
<script>
|
|
<script>
|
|
|
import FilterSchema from './FilterSchema.js';
|
|
import FilterSchema from './FilterSchema.js';
|
|
|
import Language from '../../common/Language.js';
|
|
import Language from '../../common/Language.js';
|
|
|
|
|
+import vClickOutside from 'click-outside-vue3';
|
|
|
|
|
+
|
|
|
export default {
|
|
export default {
|
|
|
|
|
|
|
|
|
|
+ directives: {
|
|
|
|
|
+ clickOutside: vClickOutside.directive,
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
components: {
|
|
components: {
|
|
|
|
|
|
|
|
},
|
|
},
|
|
@@ -132,6 +140,17 @@ export default {
|
|
|
this.$emit('propertyChanged', filterSchemaLineClone2);
|
|
this.$emit('propertyChanged', filterSchemaLineClone2);
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 当点击'搜索范围'以外的DOM,隐藏'搜索范围'以外
|
|
|
|
|
+ */
|
|
|
|
|
+ onClickOutside: function(e) {
|
|
|
|
|
+ if(e.srcElement != null && (e.srcElement.id == 'filter-column-def' || e.srcElement.id == 'filter-column-def-span')){
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ this.showDropdown = false;
|
|
|
|
|
+ },
|
|
|
},
|
|
},
|
|
|
};
|
|
};
|
|
|
</script>
|
|
</script>
|