vue3 + el-input 搜索框组件封装

子组件效果：

1.  
   <template>
2.  
   <el-input
3.  
   v-model="currentInput"
4.  
   class="input-search"
5.  
   :clearable="clearable"
6.  
   :placeholder="placeholder"
7.  
   @change="change"
8.  
   @keyup.native.enter="search"
9.  
   >
10.  
    <i slot="suffix" class="el-icon-search" @click="search"></i>
11.  
    <!-- 在input首部增加图标：使用 slot="prefix" 或者通过 prefix-icon="icon" 属性-->
12.  
    <!-- 在input尾部增加图标：使用 slot="suffix" 或则通过 suffix-icon="icon" 属性-->
13.  
    </el-input>
14.  
    </template>

1.  
   <script lang="ts">
2.  
   import { defineComponent, ref, watch } from '@vue/composition-api';
3.  
   import { useI18n } from '@/lang/useLocale'; // 国际化
4.  
    
5.  
   const i18n = useI18n();
6.  
    
7.  
   export default defineComponent({
8.  
   name: 'InputSearch',
9.  
   props: {
10.  
    value: {
11.  
    type: String,
12.  
    default: ''
13.  
    },
14.  
    clearable: {
15.  
    type: Boolean,
16.  
    default: false
17.  
    },
18.  
    placeholder: {
19.  
    type: String,
20.  
    default: i18n.t('国际化.国际化.国际化')
21.  
    }
22.  
    },
23.  
    setup(props, { emit }) {
24.  
    // 数据双向绑定
25.  
    const currentInput = ref(props.value);
26.  
    watch(() => props.value, val => {
27.  
    currentInput.value = val;
28.  
    });
29.  
     
30.  
    const change = val => {
31.  
    emit('input', val);
32.  
    emit('change', val);
33.  
    };
34.  
    const search = () => {
35.  
    emit('search', currentInput.value);
36.  
    };
37.  
    return {
38.  
    currentInput,
39.  
    change,
40.  
    search
41.  
    };
42.  
    }
43.  
    });
44.  
    </script>

1.  
   <style scoped lang="less">
2.  
   .input-search {
3.  
   /deep/.el-input__inner {
4.  
   border-radius: 4px;
5.  
   background-color: #F5F5F5;
6.  
   font-size: 13px;
7.  
   padding-right: 60px;
8.  
   &:focus{
9.  
   background-color: #fff;
10.  
    }
11.  
    }
12.  
    /deep/.el-input {
13.  
    width: 220px;
14.  
    height: 32px;
15.  
    background: #F5F5F5;
16.  
    }
17.  
    .el-icon-search{
18.  
    width: 40px;
19.  
    height: 32px;
20.  
    line-height: 32px;
21.  
    background: #1993FF;
22.  
    border-radius: 0px 4px 4px 0px;
23.  
    text-align: center;
24.  
    transition: all .3s;
25.  
    color: #fff;
26.  
    cursor: pointer;
27.  
    }
28.  
    /deep/.el-icon-close{
29.  
    position: absolute;
30.  
    right: 46px;
31.  
    top: 0;
32.  
    }
33.  
    /deep/.el-input .el-input__icon {
34.  
    font-size: 14px;
35.  
    }
36.  
    /deep/.el-input__suffix {
37.  
    right: 1px;
38.  
    }
39.  
    }
40.  
    </style>

 父组件中调用该子组件：

1.  
   import InputSearch from "./input-search.vue";
2.  
    
3.  
   components: {
4.  
    
5.  
   InputSearch
6.  
    
7.  
   },
8.  
    
9.  
   <input-search v-model="params.inputSearch" :clearable="true" :placeholder="'ABCD'"></input-search>
10.  
    // v-model: 数据双向绑定

注意，这里不可以直接在父组件中使用 :value = "params.inpurSearch" 代替 v-model="params.inpurSearch"，这样是不被允许的, 因为vue是单项数据流，而这里要实现的是数据双向绑定。

这篇好文章是转载于：学新通技术网