更新记录

1.0.0（2026-03-21） 下载此版本

顶部菜单 layne-top-menu 动画展现，菜单以旋转滑入的方式出现。 配置简单，支持vue2、vue3。

平台兼容性

uni-app(5.0)

顶部菜单 layne-top-menu

顶部菜单 layne-menu 动画展现，菜单以旋转滑入的方式出现。 配置简单，支持vue2、vue3。 顶部菜单 layne-menu 动画菜单 动效交互 旋转。

API

Props

Event

使用方法

template

    <layne-top-menu
      :list="list"
      name="layne-top-menu"
      @click="menuClick"
    >
    </layne-top-menu>

    <layne-top-menu
      :list="list"
      logo="/static/logo.png"
      name="layne-top-menu"
      :topStyle="topStyle"
      :menuStyle="menuStyle"
      @click="menuClick"
    >
    </layne-top-menu>

vue2使用方法

<script>
    export default {
        data() {
            return {
        list: [
          {
            img: '/static/logo.png',
            name: '首页',
          },
          {
            img: '/static/logo.png',
            name: '设计频道',
          },
          {
            img: '/static/logo.png',
            name: '工具导航',
          },
          {
            img: '/static/logo.png',
            name: '作品欣赏',
          },
          {
            img: '/static/logo.png',
            name: '素材列表',
          },
          {
            img: '/static/logo.png',
            name: '个人中心',
          },
        ],
        topStyle: {
          background: '#485189',
          color: '#fff',
        },
        menuStyle: {
          background: '#485189ba',
          color: '#fff',
        },
            }
        },
        onLoad() {

        },
        methods: {
      menuClick(item) {
        console.log(item)
      },
        }
    }
</script>

vue3使用方法

<script setup>
  import { ref } from 'vue';
  const list = ref([
    {
      img: '/static/logo.png',
      name: '首页',
    },
    {
      img: '/static/logo.png',
      name: '设计频道',
    },
    {
      img: '/static/logo.png',
      name: '工具导航',
    },
    {
      img: '/static/logo.png',
      name: '作品欣赏',
    },
    {
      img: '/static/logo.png',
      name: '素材列表',
    },
    {
      img: '/static/logo.png',
      name: '个人中心',
    },
  ]);

  const topStyle = () => {
    background: '#485189',
    color: '#fff',
  };
  onst menuStyle = () => {
    background: '#485189ba',
    color: '#fff',
  };

  const menuClick = (item) => {
    console.log(item)
  }
</script>