Update: add select-search components
diff --git a/src/components/index.ts b/src/components/index.ts
index c91ba52..412fea7 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -10,9 +10,10 @@
import RkEmpty from './rk-empty.vue';
import RkPage from './rk-page.vue';
import RkDrawer from './rk-drawer.vue';
+import RkSelect from './rk-select.vue';
const components: Object = {
- RkDrawer, RkEmpty, RkPanel, RkHeader, RkNav, RkBoard, RkDate, RkProgress, RkSidebox, RkEcharts, RkToolbar, RkPage,
+ RkDrawer, RkSelect, RkEmpty, RkPanel, RkHeader, RkNav, RkBoard, RkDate, RkProgress, RkSidebox, RkEcharts, RkToolbar, RkPage,
};
const componentsName: string[] = Object.keys(components);
diff --git a/src/components/rk-board.vue b/src/components/rk-board.vue
index d479390..5fee120 100644
--- a/src/components/rk-board.vue
+++ b/src/components/rk-board.vue
@@ -8,13 +8,17 @@
<RkToolDashboard :stateOptions="stateOptions" :show.sync="show"/>
</div>
<Icon type="ios-arrow-forward" :size="18" class="grey mr10"/>
- <select v-if='stateOptions.currentEndpoint' :value="stateOptions.currentEndpoint.key" @change="endpointChange($event)" class="mr15" style="color:#fafafa;background: 0; border: 0; outline: none;">
+ <rk-select v-if='stateOptions.currentEndpoint' :value="stateOptions.currentEndpoint.key" @input="endpointChange" :data="stateOptions.endpoints">
+ </rk-select>
+ <!-- <select v-if='stateOptions.currentEndpoint' :value="stateOptions.currentEndpoint.key" @change="endpointChange($event)" class="mr15" style="color:#fafafa;background: 0; border: 0; outline: none;">
<option style="background-color: #2f333c;" v-for="i in stateOptions.endpoints" :key="i.key" :value="i.key">{{i.label}}</option>
- </select>
+ </select> -->
<span class="grey mr10">|</span>
- <select v-if='stateOptions.currentServer' :value="stateOptions.currentServer.key" @change="serverChange($event)" class="grey mr15" style="background: 0; border: 0; outline: none;">
+ <rk-select v-if='stateOptions.currentServer' :value="stateOptions.currentServer.key" @input="serverChange" :data="stateOptions.servers">
+ </rk-select>
+ <!-- <select v-if='stateOptions.currentServer' :value="stateOptions.currentServer.key" @change="serverChange($event)" class="grey mr15" style="background: 0; border: 0; outline: none;">
<option style="background-color: #2f333c;" v-for="i in stateOptions.servers" :key="i.key" :value="i.key">{{i.name}}</option>
- </select>
+ </select> -->
<button class="rk-board-inspector" @click="$emit('showServer')">inspector</button>
</div>
</template>
@@ -33,10 +37,12 @@
@Prop() stateOptions: State;
show:Boolean = false;
endpointChange(e) {
- endpointChange(this.stateOptions.endpoints[e.target.selectedIndex]);
+ this.show = this.show;
+ endpointChange(e);
}
serverChange(e) {
- serverChange(this.stateOptions.servers[e.target.selectedIndex]);
+ this.show = this.show;
+ serverChange(e);
}
}
</script>
diff --git a/src/components/rk-select.vue b/src/components/rk-select.vue
index 37d6f52..3f92880 100644
--- a/src/components/rk-select.vue
+++ b/src/components/rk-select.vue
@@ -1,64 +1,78 @@
<template>
- <Dropdown trigger="click" style="margin-left: 20px">
- <a href="javascript:void(0)">
- click 触发
- <Icon type="arrow-down-b"></Icon>
- </a>
+ <Dropdown @on-clickoutside="handleClose" placement="bottom-start" trigger="custom" :visible="visible" class="mr15">
+ <div @click="handleOpen">
+ <div class="flex-c">
+ <span class="mr5">{{this.data.filter(i => i.key == this.value).length?this.data.filter(i => i.key == this.value)[0].label || this.data.filter(i => i.key == this.value)[0].name : ''}}</span><Icon type="md-arrow-dropdown" />
+ </div>
+ </div>
<DropdownMenu slot="list">
- <DropdownItem v-for="i in data" :key="i.label">{{i.label}}</DropdownItem>
+ <div class="rk-select-search">
+ <input class="rk-select-search-input" v-model="search">
+ </div>
+ <div class="rk-select-wrapper">
+ <li class="ivu-dropdown-item" @click="handleSelect(i)" v-for="(i, index) in filterData" :key="index">{{i.label || i.name}}</li>
+ </div>
</DropdownMenu>
</Dropdown>
</template>
<script lang="ts">
-import Vue from 'vue';
-import { Prop, Model } from 'vue-property-decorator';
-
-export default class Nav extends Vue {
- @Prop({
- type: Array,
- default: () => [],
- }) data;
- @Model('input', { type: String }) test: String;
- changed(ev) {
- this.$emit('input', ev.target.value);
+import { Vue, Component, Prop } from 'vue-property-decorator';
+@Component
+export default class RkSelect extends Vue {
+ @Prop() data: any;
+ @Prop() value: any;
+ @Prop({ default: '' }) callValue: string;
+ search: string = '';
+ visible: boolean = false;
+ get filterData() {
+ return this.data.filter((i: any) => i.toString().indexOf(this.search) !== -1);
}
-
- @Prop({
- type: String,
- default: 'OK',
- }) name: String;
-
- message: String = 'Name';
-
- say(): String {
- return this.message;
+ handleOpen() {
+ this.visible = true;
+ }
+ handleClose() {
+ this.visible = false;
+ }
+ handleSelect(i: any) {
+ const temp = this.callValue ? i[this.callValue] : i;
+ this.$emit('input', temp);
+ this.visible = false;
}
}
</script>
<style lang="scss" scoped>
-.rk-nav{
- border-bottom:1px solid rgba(0,0,0,.05);
- height: 40px;
- background-color: #f6f7fb;
- padding: 0 30px;
-}
-.rk-nav-i{
- display: inline-block;
- height: 41px;
- margin-right: 20px;
- line-height: 39px;
- font-weight: 600;
- border-bottom: 2px;
- border-bottom-style: solid;
- color: rgba(61, 68, 79, .6);
- border-color: rgba(0, 0, 0, 0);
- will-change: border-color,color;
- transition: border-color .3s, color .3s;
- &:hover, &.active{
- border-color: #3880ff;
- color: #3880ff;
+.rk-select-wrapper{
+ overflow: auto;
+ max-height: 200px;
}
+.rk-select-search {
+ padding: 8px;
+ position: relative;
+ background-color: #eaeef1;
+ top: -5px;
+ border-bottom: 1px solid #ddd;
+ border-radius: 4px 4px 0 0;
+ &:before{
+ width: 16px;
+ height: 16px;
+ display: block;
+ content: '';
+ position: absolute;
+ top: 14px;
+ left: 13px;
+ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTQ1MTQxNTU5NDY5IiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIwNDMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTkzOC4yIDgzMi42TDcyMy44IDYxOC4xYy0yLjUtMi41LTUuMy00LjQtNy45LTYuNCAzNi4yLTU1LjYgNTcuMy0xMjEuOCA1Ny4zLTE5My4xQzc3My4zIDIyMi44IDYxNC42IDY0IDQxOC43IDY0UzY0IDIyMi44IDY0IDQxOC42YzAgMTk1LjkgMTU4LjggMzU0LjYgMzU0LjYgMzU0LjYgNzEuMyAwIDEzNy41LTIxLjIgMTkzLjItNTcuNCAyIDIuNyAzLjkgNS40IDYuMyA3LjhMODMyLjUgOTM4YzE0LjYgMTQuNiAzMy43IDIxLjkgNTIuOCAyMS45IDE5LjEgMCAzOC4yLTcuMyA1Mi44LTIxLjggMjkuMi0yOS4xIDI5LjItNzYuNCAwLjEtMTA1LjVNNDE4LjcgNjYxLjNDMjg0LjkgNjYxLjMgMTc2IDU1Mi40IDE3NiA0MTguNiAxNzYgMjg0LjkgMjg0LjkgMTc2IDQxOC43IDE3NmMxMzMuOCAwIDI0Mi42IDEwOC45IDI0Mi42IDI0Mi43IDAgMTMzLjctMTA4LjkgMjQyLjYtMjQyLjYgMjQyLjYiIHAtaWQ9IjIwNDQiIGZpbGw9IiNhZmFmYmYiPjwvcGF0aD48L3N2Zz4=);
+ }
+
+ .rk-select-search-input {
+ border: 1px solid #ddd;
+ padding: 3px 10px 3px 25px;
+ outline: 0;
+ width: 100%;
+ border-radius: 4px;
+
}
+}
+
</style>
diff --git a/src/views/components/trace/search-box.vue b/src/views/components/trace/search-box.vue
index 8827297..f160a2e 100644
--- a/src/views/components/trace/search-box.vue
+++ b/src/views/components/trace/search-box.vue
@@ -3,10 +3,12 @@
<div class="rk-trace-search-box container">
<div class="item">
<div class="mb5 label">Service</div>
- <select class="app" style="color:#fff;background: 0; border: 0; outline: none;" v-model="option.data.applicationId">
+ <rk-select v-model="option.data.applicationId" callValue="key" :data="[{key: 'ALL',label: 'All'},...stateOptions.applications]">
+ </rk-select>
+ <!-- <select class="app" style="color:#fff;background: 0; border: 0; outline: none;" v-model="option.data.applicationId">
<option style="background-color: #25292f;" value="ALL">All</option>
<option style="background-color: #25292f;" :value="i.key" v-for="i in stateOptions.applications" :key="i.key">{{i.label}}</option>
- </select>
+ </select> -->
</div>
<div class="item">
<div class="mb5 label">Endpoint</div>
