You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
40 lines
1.5 KiB
40 lines
1.5 KiB
9 months ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<!-- Style -->
|
||
|
|
<link rel="stylesheet" type="text/css" href="index.css">
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<!-- DOM -->
|
||
|
|
<div id="app" class="main">
|
||
|
|
<!-- 搜索 -->
|
||
|
|
<div class="search">
|
||
|
|
<!-- 输入框 -->
|
||
|
|
<input class="search-input" ref="input" type="text" v-model="keyword" spellcheck="false"
|
||
|
|
:placeholder="placeholder" @input="onInputChange" @keydown.enter="onEnterBtnClick"
|
||
|
|
@keydown.up="onUpBtnClick" @keydown.down="onDownBtnClick" @keydown.left="onLeftBtnClick"
|
||
|
|
@keydown.right="onRightBtnClick" autofocus></input>
|
||
|
|
<!-- 按钮 -->
|
||
|
|
<button class="search-btn" v-text="button" @click="onEnterBtnClick"></button>
|
||
|
|
</div>
|
||
|
|
<!-- 结果列表 -->
|
||
|
|
<div class="result" v-if="results.length > 0">
|
||
|
|
<ul class="result-list">
|
||
|
|
<li class="result-list-item" v-for="(value, index) in results" :key="index" :id="'item-' + index"
|
||
|
|
:class="[(index === selectedIndex) ? 'result-list-item-selected' : '']"
|
||
|
|
@click="onResultClick(value, index)" v-cloak>
|
||
|
|
<img class="result-list-item-icon" :src="getIcon(value.extname)" alt="icon"></img>
|
||
|
|
<span>{{value.name}}</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 脚本 -->
|
||
|
|
<script src="../../lib/vue.min.js"></script>
|
||
|
|
<script src="index.js"></script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|