34d2191bbc
Former-commit-id: 1615753a5284fa2efad467628e30144392f6ae71 [formerly 1615753a5284fa2efad467628e30144392f6ae71 [formerly 1615753a5284fa2efad467628e30144392f6ae71 [formerly 1615753a5284fa2efad467628e30144392f6ae71 [formerly 8bd4cb6aa48182562bdf38ed9c7b51970ad1e13a [formerly b6da1b444a6b25ccb2da1171b785747b13281453]]]]] Former-commit-id: a79f9e94e700119842084528d8f5ec625fc20755 Former-commit-id: 9f8e1fb43c9f57e195d8a19270bace6e383622f9 Former-commit-id: 46d2054a3ef0686a5a4e3004ebb3c99901ac889a [formerly aa5b9684dd733dcc83067a07c6a07288eecb503e] Former-commit-id: 315a9cf504ade759d0547555bb2b430b817e3236 Former-commit-id: 656ad95de67277c5dce358d64d0b28cb3a481d04 Former-commit-id: e85892f37b3f281593b4b33f6a085c8308abf724 Former-commit-id: cb4e185f6d0cf5f704f8cbbff0b54c6d257633bf Former-commit-id: 27531610d025ada77e1b95258c946876923bf05f
78 lines
1.6 KiB
Vue
78 lines
1.6 KiB
Vue
<template>
|
||
<div class="panel-search">
|
||
<div class="panel-search__input-group" flex="dir:top main:center cross:center">
|
||
<el-input
|
||
class="panel-search__input"
|
||
ref="input"
|
||
v-model="input"
|
||
suffix-icon="el-icon-search"
|
||
placeholder="搜索页面"
|
||
@keydown.esc.native="handleEsc"/>
|
||
<div class="panel-search__tip">
|
||
您可以使用快捷键
|
||
<span class="panel-search__key">
|
||
{{hotkey.open}}
|
||
</span>
|
||
唤醒搜索面板，按
|
||
<span class="panel-search__key">
|
||
{{hotkey.close}}
|
||
</span>
|
||
关闭
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState } from 'vuex'
|
||
export default {
|
||
data () {
|
||
return {
|
||
input: ''
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState('d2admin/search', [
|
||
'hotkey'
|
||
])
|
||
},
|
||
methods: {
|
||
focus () {
|
||
this.$nextTick(() => {
|
||
this.input = ''
|
||
this.$refs.input.focus()
|
||
})
|
||
},
|
||
handleEsc () {
|
||
this.$emit('close')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '~@/assets/style/public.scss';
|
||
.panel-search {
|
||
margin: 20px;
|
||
.panel-search__input-group {
|
||
height: 200px;
|
||
.panel-search__input {
|
||
width: 300px;
|
||
}
|
||
.panel-search__tip {
|
||
@extend %unable-select;
|
||
margin-top: 20px;
|
||
font-size: 12px;
|
||
color: $color-text-sub;
|
||
.panel-search__key {
|
||
padding: 1px 5px;
|
||
margin: 0px 2px;
|
||
border-radius: 2px;
|
||
background-color: $color-text-normal;
|
||
color: $color-bg;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|