JLH/JLHAPP/src/components/lj-searchbar.vue

<!--搜索框组件-->
<!--events-->
    <!--搜索按钮点击或键盘回车点击search，参数(value)-->
<template>
    <div style="padding:5px;line-height: 20px;height:40px;width: 100%">
        <mu-text-field :placeholder="hint" solo v-model="currentValue" class="circle"
                       @keydown.enter.native="handleTextEnter" style="min-height: 0;height: 100%;" ref="textField">
            <template slot="append">
                <slot name="serch_append" :handleTextEnter="handleTextEnter">
                    <mu-button icon @click="handleTextEnter">
                        <i class="iconfont icon-search" style="font-size: 20px;"></i>
                    </mu-button>
                </slot>
            </template>
        </mu-text-field>
    </div>
</template>

<script>

    export default {
        name: "lj-searchbar",
        props: {
            // 输入提示
            hint: {
                type: String,
                default: ""
            },
            // 输入框的值，支持v-model双向绑定
            value: {
                type: String
            },
            // 点击后是否把界面拉回到最顶
            actionToTop: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                currentValue: this.value
            }
        },
        methods: {
            handleTextEnter() {
                if (this.actionToTop) {
                    document.body.scrollTop = 0;
                    document.documentElement.scrollTop = 0;
                }
                let input = this.$refs.textField.$el.querySelector('input');
                input.blur();
                this.$emit('search', this.currentValue);
            }
        },
        watch: {
            value(newVal, oldVal) {
                if (newVal !== oldVal) {
                    this.currentValue = newVal;
                }
            },
            currentValue(newVal, oldVal) {
                if (newVal !== oldVal) {
                    this.$emit('input', newVal);
                }
            }
        }
    }
</script>

<style scoped lang="less">
    @import "~assets/css/lj-base.less";

    .circle {
        border: 1px solid;
        border-radius: 9999px;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
        background-color: @groupCellBackgroundColor;
        font-size: 14px;
    }
</style>