layui-vue/layui-vue

layui - vue 是 一 套 Vue 3.0 的 桌 面 端 组 件 库

介绍

🔶 www.layui-vue.com »

layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.

Run with code Sandbox.

反馈

欢迎在 Gitee Issues 上向我们反馈。欢迎功能请求。如果您想参与贡献，请查看 快速指南！

如果您有什么想聊的，请随时加入我们的 微信交流群！

贡献者

这个项目遵循 所有贡献者 规范，感谢这些出色的 贡献者。

layui-vue's Issues

lay-table问题

开启单选问题

描述：
问题1：静态页面设置type: "radio" const selectedKey24 = ref("2"); 可以自动选中2，但是从后台返回数据设置选中某某个不默认选中。
问题2：无法设置选中表格行变色

lay-popconfirm 位置样式错乱

确认弹层在屏幕最右侧时的效果是这样，样式错乱，position为 bottom

vue 2中怎么使用layui-vue

背景

• 1.描述你希望解决的问题

• 2.陈述问题的现状

• 3.合理的建议

• 4.当前版本

思路

描述大概的解决思路，可以包含 API 设计和伪代码等

跟进

后续编辑，附上对应的 Pull Request 地址，可以用 - [ ] some task 的方式。

请问在只使用layer时, 如何控制dark模式的切换.

请问在只使用layer时, 如何控制dark模式的切换.

来自一个layui的老粉丝

由于VUE的发展，早期的layui不支持vue，为了更好地适应环境，只有寻求新的UI，最终找到elementUI，无论从扩展、样式自定义、插件易于扩展、封装、美观度来说，个人认为是当前最好的，希望能够被借鉴。源于以前JQuery构建的项目，我毅然决然的选择layui，因为layui又回来了。

通知

layer.notifiy({
title:"Success",
content:"默认就是右上，也是用得最多的",
icon:1
})

layer.notifiy 的1.7.1版本没有样式

lay-upload-七牛云文件上传出现“file is not specified in multipart”错误

背景

• 1.描述你希望解决的问题

• 七牛云要求上传文件 name=file，而这里的上传组件根据文件数量自动添加[i]标志，导致文件上传失败

• 2.陈述问题的现状

• 尚未解决，调用者没有办法更改。

• 3.合理的建议

• 可以根据multiple参数进行判断，当不允许多文件上传时，不再添加[i]标志

• 4.当前版本

• 1.7.6

思路

描述大概的解决思路，可以包含 API 设计和伪代码等

if (Array.isArray(files) && files.length > 0) {
if (!props.multiple) {
formData.append(props.field, files[0])
} else {
for (let i = 0; i < files.length; i++) {
let _file = files[i];
formData.append(props.field + "[" + i + "]", _file);
}
}
}

跟进

后续编辑，附上对应的 Pull Request 地址，可以用 - [ ] some task 的方式。

能给一个官方文档副本么?官网总是打不开

背景

官网总是打不开,无法查阅文档

思路

另建镜像站点,或者提供离线文档下载

什么时候会推出 树节点(tree) 支持右键菜单的功能？

什么时候会推出 树节点(tree) 支持右键菜单的功能？

lay-date-picker组件的弹出位置错误，在下方区域足够的情况下，会出现遮挡输入框

背景

• 1.描述你希望解决的问题

• 2.陈述问题的现状

• 3.合理的建议

• 4.当前版本

思路

描述大概的解决思路，可以包含 API 设计和伪代码等

跟进

后续编辑，附上对应的 Pull Request 地址，可以用 - [ ] some task 的方式。

下拉选择框bug

背景

 开发一个小型项目

• 1.描述你希望解决的问题
  基本表单组件及表格使用上的问题
• 2.陈述问题的现状
  1、下拉框组件单选多选搜索时都存在问题（直至1.6.6版本都存在），就目前1.6.6最新版单选开启检索的地方，在输入框内输入值会一直跳回原来的值，还有多选的时候需要点击到多选框才能选中，不能点击整行进行选中
  2、模态框框模块，是否可以加个附着属性，附着在某个盒子，在盒子内开启遮罩并垂直水平居中，现在是根据整个屏幕垂直居中
• 3.合理的建议
  辛苦优化一下
• 4.当前版本
  1.6.6

www.layui-vue.com/zh-CN/index首页底部横向溢出

小白第一次提issue，抱歉点了这么多误操作，见谅。
然后这个样式问题是在firefox101.0.1版本上发现的，只有在firefox上才显示溢出；chrome和edge上的表现上没有溢出，但是padding右边距15px没有查看到，底部文字应该是向右偏移了，解决方法不难，但是原因不知道，期待有大佬回复啊

color

背景

• 1.描述你希望解决的问题

• 2.陈述问题的现状

• 3.合理的建议

• 4.当前版本

思路

描述大概的解决思路，可以包含 API 设计和伪代码等

跟进

后续编辑，附上对应的 Pull Request 地址，可以用 - [ ] some task 的方式。

Form表单验证必填项字段多个验证时星号(*)不提示

背景

使用Form验证时，必填项的label栏会有红色的星号(*)提示，验证正常，如下：

const formRules = ref<any>({
  name: {
      type: 'string',
      required: true,
    }
})

但当某个字段有多个验证时，红色星号(*)提示不显示，但验证正常，如下：

const formRules = ref<any>({
  name: [
    {
      type: 'string',
      required: true,
    },
    {
      pattern: /^[0-9A-Za-z]{4,20}$/,
      message: "用户名须为4-20位英文、数字或英数组合",
      required: true,
    },
  ]
})

这个问题应该是layer-vue的验证逻辑问题
目前的解决方案是对Form的验证字段动态设置required属性，可以暂时解决问题，但这样增加了很多不必要的验证代码

覆盖的样式弹层不生效

背景

• 1.覆盖的样式弹层不生效，像背景色和圆角

• 2.覆盖的样式弹层不生效，按钮那些可以

• 3.能否弹层也可以覆盖样式生效

• 4.当前版本2.3.1

跟进

后续编辑，附上对应的 Pull Request 地址，可以用 - [ ] some task 的方式。

在uniapp中使用layui，表格的复选项会有显示问题

背景

我在UNIAPP中3.99的版本上使用layui的组件，组件版本是2.16.1。直接复制代码组件中的实例代码到页面上，数据显示如图示。

• 1.描述你希望解决的问题
  我希望复选框可以正常显示。

• 2.陈述问题的现状

• 3.合理的建议

• 4.当前版本

思路

描述大概的解决思路，可以包含 API 设计和伪代码等

跟进

后续编辑，附上对应的 Pull Request 地址，可以用 - [ ] some task 的方式。

怎么使用layer.open()时将Vue的组件直接赋值给content调用

什么时候能支持在使用layer.open()时将Vue的组件直接赋值给content调用？
1、目前template模版调用时，如果遇到需要动态多个弹窗时，是比较麻烦并且难以维护变量，
2、layer.open()目前并不支持直接将vue组件赋值给content，
3、vue2版本中之前是使用的 vl-layer这个插件已经实现以上功能，但vl-laye没提供出源码只是webpack编译后的代码，看着编译后的代码升级成vue3实在是困难

关于日期选择器 lay-date-picker 的 一次性选择器

日期选择器 lay-date-picker

• 1.日期选择器 lay-date-picker 点击现在和清空，无法自动关闭，还需点击确认按钮

• 2.使用日期选择器 lay-date-picker 时希望点击当前，可以自动关闭

• 3.希望一次性选择器有点击现在和点击清空自动关闭的功能，或者配置点击现在或者点击清空时的回调函数，layui中就有onNow，onClear，close 回调函数，点击现在或者清空之后可以自定义方法

• 4.当前版本layui - vue 2.14.0

menu菜单默认选中问题

menu根据数据库动态创建后，没有找到默认选的方案，文档里也没有
如果手动加css 后面select事件又会添加和删除this样式。。。。很尴尬
ps:文档很重要 但是现在3.0的文档感觉内容很少 很多关键的都没有 （单指vue版本）

tab 添加按钮放到和tab平齐的位置

背景

• 1.描述你希望解决的问题
• tab 添加按钮能否增加如下样式，增加按钮和tab标签一起

lay-table 在一些情况下会强制铺满整个屏幕

lay-table 在一些情况下会强制铺满整个屏幕， 无法自适应盒子大小。

表格能否增加一个拖拽排序功能

背景

• 1.描述你希望解决的问题

• 表格能否增加一个拖拽排序功能

• 2.陈述问题的现状

• 表格能否增加一个拖拽排序功能

• 3.合理的建议

• 表格能否增加一个拖拽排序功能

• 4.当前版本

• 2.14.0

思路

表格能否增加一个拖拽排序功能

跟进

表格能否增加一个拖拽排序功能

default-toolbar 是否支持插槽？

比如：
const defaultToolbar = [{
title: '刷新',
layEvent: 'refresh',
icon: 'layui-icon-refresh'
}, {
title: '查询条件',
layEvent: 'search',
icon: 'layui-icon-search'
}, {
title: '密度',
layEvent: 'setting',
icon: 'layui-icon-util'
}, 'filter', 'exports', 'print'];

webstrrm不识别lay html标签，如何解决？

背景

• 1.描述你希望解决的问题

• 希望webstorm能够识别lay的所有html标签

• 2.陈述问题的现状

如图所示

• 3.合理的建议

• 希望webstorm能够识别lay的所有html标签

• 4.当前版本

• "@layui/layui-vue": "2.16.5",

思路

描述大概的解决思路，可以包含 API 设计和伪代码等

跟进

后续编辑，附上对应的 Pull Request 地址，可以用 - [ ] some task 的方式。

运行报错 ./node_modules/@layui/layui-vue/es/tag/index2.js Module parse failed: Unexpected token (9:39) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders 配置不兼容

背景

• 1.描述你希望解决的问题

• 2.陈述问题的现状

• 3.合理的建议

• 4.当前版本

思路

描述大概的解决思路，可以包含 API 设计和伪代码等

跟进

后续编辑，附上对应的 Pull Request 地址，可以用 - [ ] some task 的方式。

vue3中，动态渲染lay-form-item -> lay-input ，表单验证失效

背景

 <!-- 组件： fx-form-item.vue -->
<lay-form-item v-bind="$attrs"   >  
        <template v-if="$attrs.ui=='单行文本'"> 
          lay-form:   {{ data.tempData }}
            <lay-input v-model="data.tempData[$attrs.prop]"  />
        </template>
       <!-- 省略更多 -->
</lay-form-item>

<script setup name="FxFormItem" lang="ts">    
import { ref,watch,computed, reactive} from 'vue' 
 

let  props = defineProps<{
    formData?: object
}>();

let data = reactive({
    tempData:{}
})
 
watch(()=>props.formData, (n:object, o) => {
    data.tempData = n;
},{deep:true,immediate:true})

const emit = defineEmits(['@updateFormData']); 
watch(()=>data.tempData, (n:object, o) => {
    console.log('tempData::',n)
    emit('@updateFormData',n)
},{deep:true,immediate:true}) 
 

</script>

<!-- fx-form.vue -->
<template>
    <lay-form v-bind="$attrs" v-model="data.formData" ref="layform"
        @update:model="(newValue: object) => data.formData = newValue">
        {{ data.formData }}
        <template v-for="item in data.items">
            <fx-form-item v-bind="item" :formData="data.formData"
                @update:formData="(newValue: object) => data.formData = newValue" />
        </template>
        <lay-button @click="validate">提交</lay-button>
    </lay-form>
</template>
<script lang="ts" setup>
import { ref, reactive, watch, computed } from 'vue'
import { layer } from '@layui/layer-vue' 
const layform = ref<HTMLElement | null>(null);

let props = defineProps<{
    model?: Object,
    items?: any[],
}>();

let data = reactive({
    formData: {},
    items: {},
})

watch(() => props.model, (n: object, o) => {
    data.formData = n;
}, { deep: true, immediate: true })

watch(() => props.items, (n: object, o) => {
    data.items = n;
}, { deep: true, immediate: true })

 


const emit = defineEmits(['@update:model']);
watch(() => data.formData, (n: object, o) => {
    emit('@update:model', n)
}, { deep: true, immediate: true })


const validate = (val: any) => {
    let layv = layform.value as any;
    layv.validate((isValidate: any, model: any, errors: any) => {
        layer.open({
            type: 1,
            title: "表单提交结果",
            content: `<div style="padding: 10px"><p>是否通过 : ${isValidate}</p> <p>表单数据 : ${JSON.stringify(model)} </p> <p>错误信息 : ${JSON.stringify(errors)}</p></div>`,
            shade: false,
            isHtmlFragment: true,
            btn: [{ text: '确认', callback(index: any) { layer.close(index) } }],
            area: '500px'
        });
    }); 
}
</script>

<!-- 在页面中使用 fx-form -->
<!-- views/test.vue --> 
 <FxForm :labelWidth="130" :model="data" :items="[
            { ui: '单行文本', prop: 'a', label: '单行文本label',   required:true},
            { ui: '多行文本', prop: 'b', label: '多行文本label',  required:true },
            { ui: '开关', prop: 'c', label: '开关label' },
            { ui: '单选', prop: 'd', label: '单选label' },
            { ui: '多选', prop: 'e', label: '多选label' },
            { ui: '滑块', prop: 'f', label: '滑块label' },
            { ui: '下拉选择', prop: 'g', label: '下拉选择label' },
            { ui: '数值', prop: 'h', label: '数值label' },
            { ui: '标签', prop: 'i', label: '标签输入label' },
            { ui: '日期时间', prop: 'j', label: '日期时间label' },
        ]">
        </FxForm> 

出错

carousel组件切换按钮问题

1.问题描述：使用carousel组件时切换按钮会错位

2.个人排查：无论是单纯copy代码还是进行一定程度DIY都会出现该问题，目前暂时认为可能是组件内部bug

3.个人请求：在一定程度上提供一些attribute或别的方法用以禁用组件内部css的影响

4.当前版本：layui-vue 2.16.5

日期范围选择框是否考虑添加预设和自定义范围？

诸如昨日，近7日，最近1个月等快捷按钮

组件BUG问题

背景

• 1.描述你希望解决的问题
• 当我将 lay-date-picker 组件放进 layer.drawer 窗口中的时候，点击 lay-date-picker 会报错，
• 以下是代码使用
• 以下是报错截图

• 2.陈述问题的现状

• 3.合理的建议

• 4.当前版本
  2.3.13

思路

描述大概的解决思路，可以包含 API 设计和伪代码等

跟进

后续编辑，附上对应的 Pull Request 地址，可以用 - [ ] some task 的方式。

会不会推出layui-react版本

会不会推出layui-react版本

😊 Issue 还望统一反馈到 Gitee

背景

• 1.描述你希望解决的问题

• 2.陈述问题的现状

• 3.合理的建议

• 4.当前版本

思路

描述大概的解决思路，可以包含 API 设计和伪代码等

跟进

后续编辑，附上对应的 Pull Request 地址，可以用 - [ ] some task 的方式。

组件样式

作者大大有没有考虑过新拟态的样式呢

CONTRIBUTING.md not found

https://github.com/layui/layui-vue/blob/next/README.md?plain=1#L69
https://github.com/layui/layui-vue/blob/next/CONTRIBUTING.md

官网总是很难打开,没有人反应这样的问题么?

背景

发现开启梯子 就经常无法打开官网
间歇性的

layer弹窗怎么修改关闭按钮的颜色？或是怎么用槽自定义按钮？插槽名是什么？

背景

• 1.描述你希望解决的问题
  我看了下 弹窗关闭按钮用的是图片定位 这样的话我怎么改变他的样式呢 比如我要把关闭按钮改成白色的
  还有 很多类型都是any 这样体验有点不好 我都不知道里面到底有什么属性 还有弹窗的type是1 2 3 4什么的 不去试一下我都不知道这些数字代表的什么

• 2.陈述问题的现状

• 3.合理的建议

• 4.当前版本
  2.3.2

思路

描述大概的解决思路，可以包含 API 设计和伪代码等

跟进

后续编辑，附上对应的 Pull Request 地址，可以用 - [ ] some task 的方式。

Table组件的宽度超过固定值不会生成滚条

layui-vue 使用lay-select编辑回显问题

背景

• 1.layui-vue 使用lay-select编辑回显问题

• 2.目前在使用下拉选择框时，option选项通过v-for循环出来的，存在回显失效问题，并且在使用search功能时，在存在change函数时，输入框会自动清除字符串，或者在输入过程中自动返回当前值，即搜索失败，无法搜索情况

• 3.并不清楚怎么解决，看了源码存在watch监听时设置searchValue.value = "";的操作，可能是这个原因

• 4.当前版本1.6.4

思路

描述大概的解决思路，可以包含 API 设计和伪代码等

跟进

后续编辑，附上对应的 Pull Request 地址，可以用 - [ ] some task 的方式。

无法找到模块“@layui/layui-vue”的声明文件

背景

• 1.描述你希望解决的问题

  • ts报错：无法找到模块“@layui/layui-vue”的声明文件。
  • 

• 2.陈述问题的现状

  • 当我尝试修改：node_modules/@layui/layui-vue/package.json后

  // 修改前
    "exports": {
      ".": {
        "import": "./es/index.js"
      },
      "./lib/": "./lib/",
      "./es/": "./es/"
    },
  // 修改后
    "exports": {
      ".": {
        "import": "./es/index.js",
        "types":"./types/index.d.ts"
      },
      "./lib/": "./lib/",
      "./es/": "./es/"
    },

  • ts就没有报错了。
  • 然后我在想到底是哪里的问题，能不能不修改package.json
  • 然后我注意到在layui-vue/package/component/tsconfig.json中，"moduleResolution": "Node",,
  • 我尝试将自己项目的tsconfig.json从"moduleResolution": "bundler" 修改为 "moduleResolution": "Node"
  • 发现同样可以解决这样的报错。

• 3.合理的建议

  • 建议修改@layui/layui-vue/package.json
  • 因为现在使用npm creat vite创建的vue项目，其tsconfig.json中，"moduleResolution"默认为"bundler",
  • 导入layui-vue时总是会有这种提示
  • 这将导致没有类型提示。

• 4.当前版本

思路

描述大概的解决思路，可以包含 API 设计和伪代码等

跟进

后续编辑，附上对应的 Pull Request 地址，可以用 - [ ] some task 的方式。

• #40

文件上传的cut图片裁切没有效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="http://unpkg.com/@layui/layui-vue/lib/index.css" />
    <script src="http://unpkg.com/vue@3"></script>
    <script src="http://unpkg.com/@layui/layui-vue"></script>
</head>
<body>
    <div id="app">
        <lay-button type="primary">{{ message }}</lay-button>
	<lay-upload acceptMime="images" :cut="true">
		<template #preview>
			<div class="easy-wrap" v-if="cutUrl">
				<img :src="cutUrl"/>
			</div>
		</template>
	</lay-upload>
    </div>
    <script>
        const App = {
            data() {
                return {
                    message: "Hello World",
		    cutUrl: '',
                };
            },
        };
        const app = Vue.createApp(App);
        app.use(LayuiVue);
        app.mount("#app");
    </script>
</body>
</html>

代码如上所示，点击上传后什么效果也没有，没有弹出裁切窗口

支持 nuxt吗？

背景

• 1.描述你希望解决的问题

• 2.陈述问题的现状

• 3.合理的建议

• 4.当前版本

思路

描述大概的解决思路，可以包含 API 设计和伪代码等

跟进

后续编辑，附上对应的 Pull Request 地址，可以用 - [ ] some task 的方式。

弹窗问题

背景

• 1.描述你希望解决的问题

• 弹框属性 为啥没有 :setTop="true"

• 2.陈述问题的现状

• 在vue3中，组件弹框的在页面出现层级跟组件加载前后顺序有关（vue页面嵌套lay-layer，就是使用你们官网 ‘模板调用’ 那个组件）

• 3.合理的建议

• 建议能够设置 :setTop="true"，并修改源码调用setTop（）方法，让vue3中无论哪个组件弹出来时，层级最高

• 4.当前版本

• "@layui/layer-vue": "^2.2.2",

思路

描述大概的解决思路，可以包含 API 设计和伪代码等

跟进

后续编辑，附上对应的 Pull Request 地址，可以用 - [ ] some task 的方式。

CDN方式引入，table 表格数据不显示

CDN方式引入，table 表格标题可以呈现，数据不显示，代码如下：

<title>Layui-vue</title> <script src="https://unpkg.com/vue@3"></script> <script src="https://unpkg.com/@layui/layui-vue"></script>

<script> const {createApp, ref, watch, reactive} = Vue; const {layer} = LayuiVue;

const App = {
    setup() {
        const userColumns = [
            {
                title: "账户",
                titleSlot: "username-title",
                customSlot: "username",
                key: "username",
                align: "left"
            }, {
                title: "密码",
                customSlot: "password",
                key: "password",
                align: "center"
            },
            {
                title: "年龄",
                key: "age",
                sort: true,
                align: "right"
            },
            {
                title: "备注",
                key: "remark",
                ellipsisTooltip: true,
            }
            , {
                title: "操作",
                width: "100px",
                customSlot: "operator",
                key: "operator"
            }
        ];

        const userList = [
            {
                id: "1",
                username: "root",
                password: '**',
                age: "18",
                remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'
            },
            {
                id: "2",
                username: "woow",
                password: '**',
                age: "20",
                remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'
            }
        ];

        return {
            userColumns,
            userList,
        }
    }
};

const app = createApp(App);
app.use(LayuiVue);
app.mount('#app');

</script>