@minix-iot/ui/dist/packages/searchbar/searchbar.jsx

基于Vue的移动端轻量级UI组件库

import Icon from '../icon/icon.jsx';
import { Namespace } from '../../utils/namespace';

const namespace = Namespace.Create('search-bar');

export default {
    name: namespace.name,
    components: {
        Icon
    },
    props: {
        value: {
            type: String,
            default: ''
        },
        placeholder: {
            type: String,
            default: ''
        },
        theme: {
            type: String,
            default: 'gray'
        },
        round: {
            type: Boolean,
            default: false
        },
        wrapperStyle:{
            type: Object | String
        },
        showPrefix:{
            type: Boolean,
            default:false
        },
        showSuffix:{
            type:Boolean,
            default:false
        }
    },
    model: {
        prop: 'value',
        event: 'change'
    },
    computed: {
        wrapperCls(){
            return namespace.derive('wrapper',[this.theme])
        },
        cls() {
            return namespace.derive([
                this.theme,
                {
                    round: this.round
                }
            ]);
        },
        iconCls(){
            return namespace.derive('icon')
        },
        contentCls(){
            return namespace.derive('content')
        },
        inputCls(){
            return namespace.derive('content-input',[this.theme])
        },
        addonCls() {
            return namespace.derive('addon');
        },
        prefixCls() {
            return namespace.derive('prefix');
        },
        suffixCls() {
            return namespace.derive('suffix');
        },
        valueInner: {
            get() {
                return this.value;
            },
            set(value) {
                this.emitChange(value);
            }
        }
    },
    methods: {
        emitChange(value) {
            this.$emit('change', value);
        },
        onClear() {
            this.emitChange('');
        },
        onReturn(e){
            this.$emit('return',e)
        },
        onCancel(e){
            this.$emit('cancel',e)
        },
        onFocus(e){
            this.$emit('focus',e)
        }
    },
    render(){
        const renderPrefix  = ()=>{
            if(this.showPrefix){
                return (
                    <div class={this.prefixCls}>
                        {
                            this.$slots.prefix || <Icon class="mx-icon-return" name="arrow-left" size="16" onClick={this.onReturn}/>
                        }
                    </div>
                )
            }
        }

        const renderIcon = ()=>(
            <div class={this.iconCls}>
                {this.$slots.icon ||  <Icon name="search" size="16" />}
            </div>
        )

        const renderContent = ()=>(
            <div class={this.contentCls}>
                <input class={this.inputCls} type="text" vModel={this.valueInner} placeholder={this.placeholder} onFocus={this.onFocus}/>
            </div>
        )

        const renderAddon = ()=> (
            <div class={this.addonCls}>
                {this.value && (this.$slots['addon'] || <Icon name="close" size="16"  onClick={this.onClear} />)}
            </div>
        )
        
        const renderSuffix = ()=>{
            if(this.showSuffix){
                return (
                    <div class={this.suffixCls}>
                        {
                            this.$slots.action || <div class={namespace.derive('suffix-cancel')} onClick={this.onCancel}>取消</div>
                        }
                    </div>
                )
            }
        }

        return (
            <div class={this.wrapperCls} style={this.wrapperStyle}>
                {renderPrefix()}
                <div class={this.cls}>
                    {renderIcon()}
                    {renderContent()}
                    {renderAddon()}
                </div>
                {renderSuffix()}
            </div>
        )
    }
}