weex 搜索控件-自码

自码搜索控件（包含右侧按钮是否展示），供参考和扩展

 

searchBar.vue ：

<template>
    <div style="backgroundColor: #f8f8f8;padding: 10px;'">
        <div class="mainDiv">
            <div class="searchDiv"  @click="inputClick">

                <image class="search_image" src="mipmap://search_icon.png"></image>

                <div v-if="disabled" class="textDiv" style="width: 625px" >
                    <text class="textView">搜索</text>
                </div>

                <input v-else class="input" :style="{ width: isShowRightButton?550+'px':625+'px'}"
                       type="text" placeholder="搜索" @input="inputValueFun"/>

            </div>
            <text v-if="isShowRightButton" class="searchButton" @click="searchEvent" >{{rightButtonText}}</text>
        </div>
    </div>
</template>

<script>
    export default {
        name: "searchBar",
        props: {
            inputValue:{
                type: String,
                default: ''
            },
            isShowRightButton:{
                type: Boolean,
                default: true
            },
            disabled:{
                type: Boolean,
                default: false
            },
            rightButtonText:{
                type: String,
                default: '搜索'
            },
        },
        methods: {

            /**
             * 输入内容的监听
             * */
            inputValueFun(inputValue){
                this.inputValue = inputValue.value;
                this.$emit('inputValue', this.inputValue);
            },
            /**
             * 点击搜索按钮
             */
            searchEvent(){
                this.$emit('inputRightButtonClick', this.inputValue);
            },

            /**
             * 点击输入框
             * @param e
             */
            inputClick(e){
                if(this.disabled){
                    this.$emit('inputClick', this.inputValue);
                }
            }
        }
    }
</script>

<style scoped>
    .mainDiv {
        flex-direction: row;
        align-items: center;
    }

    .searchDiv {
        height: 60px;
        flex-direction: row;
        border-radius: 40px;
        margin: 10px;
        align-items: center;
        background-color: #fff;
        border-width: 1px;
        border-color: #999;
        padding: 10px;
    }
    .input {
        width: 520px;
        font-size: 30px;
        height: 60px;
        align-items: center;
        color: #333;
        outline-color: #FFFFFF;
        placeholder-color:#999;
        lines:1;
    }
    .textDiv {
        width: 520px;
        height: 60px;
    }
    .textView {
        line-height:60px;
        font-size: 30px;
        align-items: center;
        text-align: left;
        justify-content: left;
        color: #999;
    }
    .search_image {
        align-items: center;
        width: 28px;
        height: 28px;
        margin-right: 10px;
        margin-left:25px ;
    }

    .searchButton{
        height: 60px;
        font-size: 30px;
        align-items: center;
        text-align: center;
        padding: 10px;
    }
</style>

使用：

<template>
    <div>
        <searchBar :disabled="inputIsEnable" :isShowRightButton="this.isShowRightButton" @inputValue="inputValueFun" @inputClick="inputClick" @inputRightButtonClick="searchRightButtonClick"></searchBar>

    </div>
</template>

<script>
    import {Utils} from 'weex-ui'
    import searchBar from '../../components/searchBar.vue';

    export default {
        name: "organization_structure",
        components: {searchBar},
         data() {
            return {
                isShowRightButton:false,
                inputValue:'',
                inputIsEnable:true
            }
        },
        created() {
            this.tabPageHeight = Utils.env.getPageHeight();
        },
 
        methods: {

            /**
             * 点击搜索框
             * */
            searchInputClicked() {
                this.inputIsEnable = false;
                console.log('点击搜索框 ==== '+value)
            },
            /**
             * 点击搜索框右侧按钮
             * */
            searchRightButtonClick(value) {
                console.log('点击搜索框右侧按钮 ==== '+value)
            },
            /**
             * 搜索框内容
             * */
            inputValueFun(inputValue){
                this.inputValue =inputValue;
                console.log('搜索框内容 ==== '+inputValue)
            },

            /**
             * 搜索框部分点击,设置input可以输入（因为weex的input组件不支持点击，所以用div代替）
             * */
            inputClick(){
                this.inputIsEnable =false;
            },

        }

    }
</script>

<style scoped>

</style>