输入框点击后改变后面图标样式的逻辑怎么写

Question

输入框点击后改变后面图标样式的逻辑怎么写

以下输入框，目前我只实现了点击以后样式改变

点击后变成这样

但是鼠标再点击其他地方后面的图标就不会转回来了，请问怎么写转回来的逻辑

我的代码如下

<a-tree-select
                    class="treesele"
                    v-show="userInfo.orgType !== 3"
                    v-model="params.departmentId"
                    :placeholder="$STR('hint.orgUser.searchByDept', '按部门搜索')"
                    :searchPlaceholder="$STR('hint.orgUser.inputDeptName', '请输入部门名称')"
                    :tree-data="depaTreeData"
                    show-search
                    treeNodeFilterProp="title"
                    :replaceFields="{
                      children: 'children',
                      title: 'name',
                      key: 'id',
                      value: 'id'
                    }"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    allow-clear
                    tree-default-expand-all
                    @click="fanzhuan">
                    <template #suffixIcon>
                      <span class="icon-bian" :style="{ transform: focusicon == true ? 'rotate(180deg)' : '' }">
                        <i class="iconfont icon-yonghuzuzhi">
                      
                    </template>
                  </a-tree-select>

data() {
return {
      focusicon: false,
}
}
methods: {
    fanzhuan() {
      this.focusicon = true
    },}

我好像只实现了倒转的逻辑，但是转回来的逻辑我不知道怎么写了

Answer 1

this.focusicon=!this.focusicon