可自定义的vue下拉框组件

最新推荐文章于 2024-08-03 23:56:34 发布

小张不会撸码

最新推荐文章于 2024-08-03 23:56:34 发布

阅读量1.4k

点赞数

分类专栏： vue组件文章标签： vue 组件下拉框下拉框组件

本文链接：https://blog.csdn.net/null1126/article/details/103329069

版权

本文介绍了如何创建一个可自定义的Vue下拉框组件，重点强调了组件的宽高依赖于父元素，并提供了组件中可自定义样式的注释。同时，给出了组件的使用示例和实际效果展示。

摘要由CSDN通过智能技术生成

创建Select.vue组件

//创建Select.vue组件

<template>
  <div class="selects">
    <!-- 选择框 -->
    <div
      :class="{selects0show: !isshow,selects0hade: isshow}"
      class="selects0"
      @click="isshow=!isshow"
    >
      <p v-text="xz"></p>
      <img src="@/assets/home/z_x_jt.png" alt srcset />
    </div>
    <!-- 下拉框大盒子 -->
    <div
      :class="{show: !isshow,hade: isshow,issel:num>=4}"
      class="sel"
      :style="{height:35*num+'px'}"
    >
      <!-- 下拉框 -->
      <div
        @click="cutValue(i)"
        :style="{display: num >=(i+1)?'block':'none'}"
        v-for="(item,i) in num"
        :key="i"
        v-text="sel[i]"
      ></div>
    </div>
  </div>
</template>