<template> <div :class="prefixCls"> <i-input :value.sync="query" size="small" :icon="icon" :placeholder="placeholder" @on-click="handleClick"></i-input> </div> </template> <script> import iInput from '../input/input.vue'; export default { components: { iInput }, props: { prefixCls: String, placeholder: String, query: String }, computed: { icon () { return this.query === '' ? 'ios-search' : 'ios-close'; } }, methods: { handleClick () { if (this.query === '') return; this.query = ''; } }, events: { 'on-form-blur' () { return false; }, 'on-form-change' () { return false; } } }; </script>