|
@@ -9,15 +9,34 @@
|
|
|
<template>
|
|
|
<div class="pub-search">
|
|
|
<div class="flex">
|
|
|
- <div v-if="isTitle" :class="isChild ? 'childTitle':''" class="title">{{ title }}</div>
|
|
|
+ <div v-if="isTitle" :class="isChild ? 'childTitle' : ''" class="title">
|
|
|
+ {{ title }}
|
|
|
+ </div>
|
|
|
<div v-if="isOnly" class="content flex-wrap">
|
|
|
- <div v-if="isSearch" :class="isChild ? 'childSearch':''" class="search">
|
|
|
- <el-input :size="isChild ? 'medium':''" :placeholder="placeholder" @clear="clearSearch" clearable v-model="input">
|
|
|
+ <div
|
|
|
+ v-if="isSearch"
|
|
|
+ :class="isChild ? 'childSearch' : ''"
|
|
|
+ class="search"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ :size="isChild ? 'medium' : ''"
|
|
|
+ :placeholder="placeholder"
|
|
|
+ @clear="clearSearch"
|
|
|
+ clearable
|
|
|
+ v-model="input"
|
|
|
+ @keyup.enter.native="checkSearch"
|
|
|
+ >
|
|
|
<el-button slot="prepend" icon="el-icon-search"></el-button>
|
|
|
</el-input>
|
|
|
</div>
|
|
|
<div v-if="isSearch" class="btn">
|
|
|
- <button :class="isChild ? 'childBtnAn':''" @click="checkSearch" class="btnAn">搜索</button>
|
|
|
+ <button
|
|
|
+ :class="isChild ? 'childBtnAn' : ''"
|
|
|
+ @click="checkSearch"
|
|
|
+ class="btnAn"
|
|
|
+ >
|
|
|
+ 搜索
|
|
|
+ </button>
|
|
|
</div>
|
|
|
<div v-if="isSlot" class="add">
|
|
|
<slot></slot>
|
|
@@ -29,64 +48,64 @@
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
- name: 'PubSearch',
|
|
|
+ name: "PubSearch",
|
|
|
props: {
|
|
|
//title
|
|
|
title: {
|
|
|
type: String,
|
|
|
- default: ''
|
|
|
+ default: "",
|
|
|
},
|
|
|
//placeholder
|
|
|
placeholder: {
|
|
|
type: String,
|
|
|
- default: '请输入内容'
|
|
|
+ default: "请输入内容",
|
|
|
},
|
|
|
//是否只显示title
|
|
|
isOnly: {
|
|
|
type: Boolean,
|
|
|
- default: true
|
|
|
+ default: true,
|
|
|
},
|
|
|
//是否显示搜索
|
|
|
isSearch: {
|
|
|
type: Boolean,
|
|
|
- default: true
|
|
|
+ default: true,
|
|
|
},
|
|
|
//是否显示插槽
|
|
|
isSlot: {
|
|
|
type: Boolean,
|
|
|
- default: false
|
|
|
+ default: false,
|
|
|
},
|
|
|
//是否title
|
|
|
isTitle: {
|
|
|
type: Boolean,
|
|
|
- default: false
|
|
|
+ default: false,
|
|
|
},
|
|
|
//是否二级页面搜索
|
|
|
isChild: {
|
|
|
type: Boolean,
|
|
|
- default: false
|
|
|
- }
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
},
|
|
|
- data () {
|
|
|
+ data() {
|
|
|
return {
|
|
|
- input: ''
|
|
|
- }
|
|
|
+ input: "",
|
|
|
+ };
|
|
|
},
|
|
|
- created () {
|
|
|
- const { keyWords } = this.$route.query
|
|
|
+ created() {
|
|
|
+ const { keyWords } = this.$route.query;
|
|
|
if (keyWords) {
|
|
|
- this.input = keyWords
|
|
|
+ this.input = keyWords;
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- checkSearch () {
|
|
|
- this.$emit('getSearchData', this.input)
|
|
|
+ checkSearch() {
|
|
|
+ this.$emit("getSearchData", this.input);
|
|
|
},
|
|
|
- clearSearch () {
|
|
|
- this.$emit('clearSearchData', this.input)
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ clearSearch() {
|
|
|
+ this.$emit("clearSearchData", this.input);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|