ui库和web端产品库合并版本(还需修复细节)

ui/packages/basic/AiPullDown.vue

@@ -0,0 +1,76 @@
+<template>
+  <section class="AiPullDown">
+    <div class="line"/>
+    <div class="down-content" @click="handleExpand">
+      <i :class="expandIcon"/>
+      <span>{{ btnText }}</span>
+    </div>
+    <div class="line"/>
+  </section>
+
+</template>
+
+<script>
+export default {
+  name: "AiPullDown",
+  props: {
+    target: String,
+    height: {default: 4},
+  },
+  data() {
+    return {
+      expand: false
+    }
+  },
+  methods: {
+    handleExpand() {
+      this.expand = !this.expand
+      if (this.target) {
+
+      } else this.$emit('change', this.expandStyle)
+    }
+  },
+  computed: {
+    btnText() {
+      return this.expand ? '收起高级搜索' : '展开高级搜索'
+    },
+    expandStyle() {
+      let initStyle = {overflow: 'hidden', height: `${this.height}px`}
+      this.expand && (initStyle.height = "auto")
+      return initStyle
+    },
+    expandIcon() {
+      return this.expand ? 'iconfont iconDouble_Up' : 'iconfont iconDouble_Down'
+    }
+  },
+  mounted() {
+    this.$emit("change", this.expandStyle)
+  }
+}
+</script>
+<style lang="scss" scoped>
+.AiPullDown {
+  display: flex;
+
+  .line {
+    flex: 1;
+    min-width: 0;
+    border-top: 1px solid #eee;
+  }
+
+  .down-content {
+    cursor: pointer;
+    padding: 0 8px;
+    height: 24px;
+    border-radius: 0 0 8px 8px;
+    border: 1px solid #eee;
+    border-top: 0;
+    box-sizing: border-box;
+    color: #333;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>