活动搜索清除功能

guanqb

2023-02-03 6e567d7e95a495995a2a91b9f9063d8bc86d4c43

活动搜索清除功能

 src/views/activity/index.vue

@@ -62,7 +62,7 @@

                <div>
                    <div class="category">活动名称：</div>
                    <div class="category-value">
                    <div class="category-value search-activity">
                        <input
                            type="text"
                            placeholder="请输入…"
@@ -70,6 +70,14 @@
                            class="category-input"
                            @input="inputChange"
                        />
                        <div
                            class="clear"
                            v-show="isShowActivityClearBtn"
                            @click="clearActivitySearchValue"
                            title="清空"
                        >
                            <img src="../../../public/img/icon/clear.png" alt />
                        </div>
                        <button class="category-button el-icon-search" @click="searchClick"></button>
                    </div>
                </div>
@@ -700,7 +708,8 @@
                video6: false,
                video7: false,
                video8: false,
            }
            },
            isShowActivityClearBtn: false,
        }
    },
    created () {
@@ -800,6 +809,11 @@

        inputChange (e) {
            console.log(e)
            if (this.searchActivity == '') {
                this.isShowActivityClearBtn = false
            } else {
                this.isShowActivityClearBtn = true
            }
        },

        // 点击搜索
@@ -1563,6 +1577,12 @@
            this.searchExtensivelyChange()
        },

        clearActivitySearchValue () {
            this.searchActivity = ''
            this.inputChange()
            this.searchClick()
        },

        getRegionList (positionNewStr) {
            getRegionList(1, 15, positionNewStr).then(res => {
                console.log(11, res.data.data.list)
@@ -1723,6 +1743,21 @@
                .category-value {
                    flex: 1;
                }
                .search-activity {
                    position: relative;
                    .clear {
                        position: absolute;
                        top: 0;
                        right: 70px;
                        cursor: pointer;

                        img {
                            width: 12px;
                            height: 12px;
                            margin-top: 8px;
                        }
                    }
                }

                input {
                    width: 209px;