# # 收缩卡片

> mapgis-ui-collapse-card

## # 属性

### # `outStyle`

- 类型: `Object`
- 非侦听属性
- 描述: 外部传入的自定义样式
- 默认:

      {
          right: "10px",
          bottom: "10px"
      }

- 示例:

      {
          position: "absolute",
          left: "10px",
          bottom: "25px",
          height: "fit-content",
          width: "280px"
      }

### # `iconfont`

- 类型: `String`
- 非侦听属性
- 描述: 收缩状态下的图标样式
- 默认: `mapgis-yingyan`
- 示例: `mapgis-yingyan`

### # `visible`

- 类型: `Boolean`
- 侦听属性
- 描述: 显示状态： 显示/隐藏
- 默认: `true`

### # `position`

- 类型: `String`
- 侦听属性
- 描述: 收缩时隐藏的位置，靠左/靠右收缩
- 默认: `bottom-right`

## # 槽

### # `default`

- 描述: 卡片默认内容槽

### # `title`

- 描述: 卡片Title槽

## # 方法

### # `show`

- 描述: 展开该搜索卡片

### # `hide`

- 描述: 收缩该搜索卡片

## # 示例

    <template>
    <mapgis-ui-collapse-card
        :style="collapseWraperStyle"
        iconfont="mapgis-bilichi"
        ref="collapsescale"
        position="bottom-left"
        >
        <div class="mapgis-mvt-legend-card-header" slot="title">
            <span class="mapgis-custom-scale-card-title">
            比例尺
            </span>
            <mapgis-ui-iconfont
            class="mapgis-custom-scale-card-toolbar"
            type="mapgis-jibenbilichidixingtutukuang"
            @click="hideCollapseScale"
            />
        </div>
        <mapgis-custom-scale :style="scaleStyle" />
    </mapgis-ui-collapse-card>
    </template>
    <script>
    export default {
      name: "mapgis-test-collapse",
      data() {
          return {
            collapseWraperStyle: {
                position: "absolute",
                left: "10px",
                bottom: "25px",
                height: "fit-content",
                width: "280px",
            },
          }
      },
      methods: {
         hideCollapseScale() {
          if (this.$refs.collapsescale) {
            this.$refs.collapsescale.hide();
          }
        }
      }
    }
    </script>