103 lines
3.1 KiB
Vue
103 lines
3.1 KiB
Vue
<template>
|
|
<view>
|
|
<view class="_searchbar" @tap="clksearch">
|
|
<view class="_icon _search"></view>
|
|
<input v-if="show" ref="refinp" :focus="showfocus" :placeholder="placeholder" style="flex: 1;font-size: 0.9em;color: #333333;" confirm-type="search" type="text" v-model="searchval" @confirm="confirm(true)" @blur="confirm(false)" />
|
|
<text v-else style="font-size: 0.9em;color: #808080;">{{ placeholder === undefined?lang('searchbar.placeholder'):placeholder }}</text>
|
|
<text @tap="confirm(true)" class="_btn" v-if="show">{{btntxt===undefined?lang('searchbar.btn'):btntxt}}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
emits: ['confirm'],
|
|
props: {
|
|
placeholder: {
|
|
type: String
|
|
},
|
|
btntxt: {
|
|
type: String
|
|
},
|
|
value: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
show: false,
|
|
showfocus: false,
|
|
searchval: ''
|
|
}
|
|
},
|
|
mounted() {
|
|
this._time = 0;
|
|
this.searchval = this.value || '';
|
|
this.lastsearch = this.searchval;
|
|
if (this.searchval != '')
|
|
this.show = true;
|
|
},
|
|
methods: {
|
|
clksearch() {
|
|
this.show = true;
|
|
this.$nextTick(() => {
|
|
this.showfocus = true
|
|
});
|
|
},
|
|
confirm() {
|
|
this.hidekeyboard();
|
|
var x = new Date().getTime() - this._time;
|
|
if (x > 500) {
|
|
this._time = new Date().getTime();
|
|
this.$emit("confirm", {
|
|
value: this.searchval
|
|
});
|
|
}
|
|
if (!this.searchval)
|
|
this.show = false;
|
|
},
|
|
hidekeyboard() {
|
|
// #ifndef APP-PLUS
|
|
uni.hideKeyboard();
|
|
// #endif
|
|
// #ifdef APP-PLUS
|
|
plus.key.hideSoftKeybord();
|
|
// #endif
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
._icon._search {
|
|
background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTAyNCAxMDI0JyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zycgd2lkdGg9JzIwMCcgaGVpZ2h0PScyMDAnPjxwYXRoIGQ9J000NTQuNjU2IDg0OS45MkMyMzEuNDI0IDg0OS45MiA1MS4yIDY2OC42NzIgNTEuMiA0NDUuNDQgNTEuMiAyMjMuMjMyIDIzMS40MjQgNDEuOTg0IDQ1NC42NTYgNDEuOTg0YzIyMi4yMDggMCA0MDMuNDU2IDE4MS4yNDggNDAzLjQ1NiA0MDMuNDU2Qzg1OC4xMTIgNjY4LjY3MiA2NzYuODY0IDg0OS45MiA0NTQuNjU2IDg0OS45MnogbTAtNzQ2LjQ5NkMyNjYuMjQgMTAzLjQyNCAxMTIuNjQgMjU3LjAyNCAxMTIuNjQgNDQ1LjQ0czE1My42IDM0Mi4wMTYgMzQyLjAxNiAzNDIuMDE2IDM0Mi4wMTYtMTUzLjYgMzQyLjAxNi0zNDIuMDE2LTE1My42LTM0Mi4wMTYtMzQyLjAxNi0zNDIuMDE2eicgZmlsbD0nIzEyOTZkYic+PC9wYXRoPjxwYXRoIGQ9J005NDIuMDggMTAwOC42NGMtMTIuMjg4IDAtMjMuNTUyLTQuMDk2LTMyLjc2OC0xMy4zMTJMNzM3LjI4IDgyMi4yNzJjLTE4LjQzMi0xOC40MzItMTguNDMyLTQ3LjEwNCAwLTY1LjUzNnM0Ny4xMDQtMTguNDMyIDY1LjUzNiAwbDE3Mi4wMzIgMTcyLjAzMmMxOC40MzIgMTguNDMyIDE4LjQzMiA0Ny4xMDQgMCA2NS41MzYtOS4yMTYgOS4yMTYtMjAuNDggMTQuMzM2LTMyLjc2OCAxNC4zMzZ6JyBmaWxsPScjMTMyMjdhJyBjbGFzcz0nJz48L3BhdGg+PC9zdmc+");
|
|
}
|
|
|
|
._icon {
|
|
width: 1em;
|
|
height: 1em;
|
|
margin: 0 0.4em;
|
|
background-size: cover;
|
|
}
|
|
|
|
._searchbar {
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
flex: 1;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 2.5em;
|
|
border: 1px solid var(--bg5);
|
|
border-radius: 0.3em;
|
|
background: var(--bg1);
|
|
}
|
|
|
|
._btn {
|
|
padding: 0 0.5em;
|
|
line-height: 2.5em;
|
|
font-size: 0.9em;
|
|
color: var(--txt6);
|
|
}
|
|
</style> |