专业编程基础技术教程

网站首页 > 基础教程 正文

基于 vue3 桌面端组件库layui-vue3

ccvgpt 2024-08-02 12:00:37 基础教程 31 ℃

今天再给大家分享一个超优秀的Vue3桌面PC组件库LayuiVue

layui-vue 基于vue3开发的一款layui风格桌面组件库。拥有35+组件。

基于 vue3 桌面端组件库layui-vue3

安装

通过npm快速引入layui-vue组件。

npm i @layui/layui-vue -S

快速引入

import { createApp } from 'vue'
import Layui from '@layui/layui-vue'
import '@layui/layui-vue/lib/layui.css'
import App from './App.vue'

createApp(App).use(Layui).mount('#app')

使用组件

<template>
  <lay-button @click="changeVisible" type="primary">基础使用</lay-button>
  <lay-layer title="基础使用" v-model:visible="visible1">
    <div style="padding: 20px;">
        这是一个基础弹窗
    </div>
  </lay-layer>
</template>

<script>
import { ref, watch } from "vue";
export default {
  setup() {
    const visible1 = ref(false)
    const changeVisible = function() {
        visible1.value = !visible1.value
    }
    return {
        visible1
    };
  },
};
</script>

非常有情怀的一款layui vue3组件库。喜欢layui风格的不要错过哈。

# 官网地址
http://layui-vue.pearadmin.com/

# 仓库地址
https://gitee.com/layui-vue

End,今天就分享到这里。如果vue项目中需要用到layui风格组件,不妨试试哟~

Tags:

最近发表
标签列表