uniapp 实现的下拉菜单组件

采用 uniapp 实现, 是一款具备丝滑折叠、展开动画的下拉菜单,支持 vue2、vue3;适配 web、H5、微信小程序(其他平台小程序未测试过,可自行尝试)

可到插件市场下载尝试: https://ext.dcloud.net.cn/plugin?id=22696

  • 使用示例

props 属性

defaultValue

默认值

js 复制代码
defaultValue: {
    type: number,
    default: 1,
},

options

选项数组,必须具备 label、value 字段

js 复制代码
options: {
    type: Array,
    default: () => [
      { label: "windows", value: 1 },
      { label: "mac", value: 2 },
      { label: "linux", value: 3 },
      { label: "test", value: 4 }
    ],
  },

事件

@onChange

点击选项时触发,返回 options 中提供的选项值,

使用示例

vue2 使用示例

javascript 复制代码
<template>
  <view>
    <view>
      <view class="title">默认样式:</view>
      <view class="comp">
        <wo-dropdown-menu :options="options"></wo-dropdown-menu>
      </view>
    </view>
    <view>
      <view class="title">自定义样式:</view>
      <view
        style="border: 1px solid #999; margin: 5px; font-size: 12px; border-radius: 5px;"
      >
        <wo-dropdown-menu></wo-dropdown-menu>
      </view>
      <view class="comp-dark">
        <wo-dropdown-menu
          :options="options"
          :default-value="4"
          @change="onChange"
        ></wo-dropdown-menu>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          label: "荆轲",
          value: 1,
        },
        {
          label: "李白",
          value: 2,
        },
        {
          label: "杜甫",
          value: 3,
        },
        {
          label: "白居易",
          value: 4,
        },
        {
          label: "王维",
          value: 5,
        },
        {
          label: "李清照",
          value: 6,
        },
        {
          label: "苏轼",
          value: 7,
        },
      ],
    };
  },
  methods: {
    onChange(data) {
      console.log("选择值:", data);
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  font-size: 12px;
  color: #999;
  padding: 10px 0 0 10px;
}

.comp {
  font-size: 12px;
}

.comp-dark {
  margin: 5px;
  background-color: black;
  color: white;
  font-size: 12px;
  border-radius: 5px;
}
</style>

vue3 使用示例

javascript 复制代码
<template>
  <view>
    <view>
      <view class="title">默认样式:</view>
      <view class="comp">
        <wo-dropdown-menu :options="state.options"></wo-dropdown-menu>
      </view>
    </view>
    <view>
      <view class="title">自定义样式:</view>
      <view
        style="border: 1px solid #999; margin: 5px; font-size: 12px; border-radius: 5px;"
      >
        <wo-dropdown-menu></wo-dropdown-menu>
      </view>
      <view class="comp-dark">
        <wo-dropdown-menu
          :options="state.options"
          :default-value="4"
          @change="onChange"
        ></wo-dropdown-menu>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive } from "vue";
const state = reactive({
  options: [
    {
      label: "荆轲",
      value: 1,
    },
    {
      label: "李白",
      value: 2,
    },
    {
      label: "杜甫",
      value: 3,
    },
    {
      label: "白居易",
      value: 4,
    },
    {
      label: "王维",
      value: 5,
    },
    {
      label: "李清照",
      value: 6,
    },
    {
      label: "苏轼",
      value: 7,
    },
  ],
});

const onChange = (data) => {
  console.log("选择值:", data);
};
</script>

<style lang="scss" scoped>
.title {
  font-size: 12px;
  color: #999;
  padding: 10px 0 0 10px;
}

.comp {
  font-size: 12px;
}

.comp-dark {
  margin: 5px;
  background-color: black;
  color: white;
  font-size: 12px;
  border-radius: 5px;
}
</style>
相关推荐
丘山子几秒前
分享链接格式不统一,rel="share-url" 提案试图解决这个问题
前端·面试·html
小周同学:5 分钟前
【UniApp打包鸿蒙APP全流程】如何配置并添加UniApp API所需的鸿蒙系统权限
华为·uni-app·harmonyos
JustHappy1 小时前
「Versakit攻略」🔥Pnpm+Monorepo+Changesets搭建通用组件库项目和发包流程
前端·javascript·vue.js
紫金龙腾1 小时前
EDGE 、chrome、浏览器显示“由你的组织管理”
前端·chrome·edge
用户66197734585751 小时前
Vue3笔记
前端·vue.js
2401_837088503 小时前
ref 简单讲解
前端·javascript·vue.js
折果4 小时前
如何在vue项目中封装自己的全局message组件?一步教会你!
前端·面试
不死鸟.亚历山大.狼崽子4 小时前
Syntax Error: Error: PostCSS received undefined instead of CSS string
前端·css·postcss
汪子熙4 小时前
Vite 极速时代的构建范式
前端·javascript
跟橙姐学代码4 小时前
一文读懂 Python 的 JSON 模块:从零到高手的进阶之路
前端·python