一、简介

AppFindBar 是封装的查询组件。支持下拉展开更多查询条件。

二、效果

http://210.12.53.106:8888/outer/test/AppFindBar (opens new window)

三、代码示例

<template>
  <div :style="{ backgroundColor: 'white' }">
    <app-find-bar
      ref="appFindBar"
      :findFormData.sync="findFormData"
      :findColumns="findColumns"
      :showAppFind="showExpandFind"
      @onSearch="doFind"
      @toggle="toggle" />

    <transition name="expand-transition">
      <expand-find
        v-show="showExpandFind"
        ref="appFindBarExt"
        :findFormData.sync="findFormData"
        :findColumns="findColumns"
        @onSearch="doFind"
        @toggle="toggle" />
    </transition>
  </div>
</template>

<script>
import AppFindBar from '@/components/Application/common/grid/AppFind/AppFindBar.vue'
import ExpandFind from '@/components/Application/common/grid/AppFind/ExpandFind.vue'

export default {
  name: 'TestAppFindBar',
  components: { AppFindBar, ExpandFind },
  data () {
    return {
      showExpandFind: false,
      findFormData: {},
      findColumns: [
        {
          title: '文本输入框',
          dataIndex: 'textfield',
          xtype: 'textfield',
          allowBlank: false,
          width: 100
        }
        // ....
      ]
    }
  },
  methods: {
    doFind ({ findFormData }) {
      console.log(findFormData)
      this.$message.info('请查看控制台输出')
    },
    toggle (show) {
      this.showExpandFind = show
    }
  }
}
</script>

<style lang="less" scoped>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.expand-transition-enter-active {
  transition: all 0.5s ease;
}

.expand-transition-leave-active {
  transition: all 0.5s ease;
}

.expand-transition-enter, .expand-transition-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateY(-10px);
  opacity: 0;
}
</style>