view-design / viewuiplus Goto Github PK

在modal内部，使用了表单，点确认的时候会去验证表单，如果表单报错，此时不想关闭modal。但由于view-design 的modal组键on-ok源码：
if (this.loading) {
this.buttonLoading = true;
} else {
this.visible = false;
this.$emit('input', false);
}
this.$emit('on-ok');
代码中this.visible = false;自动关闭了modal。虽然loading控制可以控制，但并不完美。需要使用者做这样的代码：
this.loading = false;
setTimeout(() => {
this.loading = true;
}, 100)；这样modal才不会关闭，并且有loading状态。

What is expected?

期望能在on-ok方法中去掉this.visible = false，由使用者自己控制onOk事件modal的显隐控制。

What is actually happening?

虽然loading控制可以控制，但并不完美。

说明文档上的Row的对齐方式属性应该是justify不是flex

[Bug Report]Table组件导出.csv问题

Environment

谷歌浏览器

Reproduction link

https://www.iviewui.com/view-ui-plus/component/form/table#csv

Steps to reproduce

点击Export custom data按钮

What is expected?

点击只后能根据过滤下载

What is actually happening?

点击没有反应

Layout下的组件定义没有导出

这将在ts环境下使用Layout组件报类型检查错误。

vite 搭建未支持【按需引用】

import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'

Components({
// customComponentsResolvers has renamed to resolver
resolvers: [
ElementPlusResolver(),
],
}),

table组件自定义导出方法单词写错了

exportData (type) {
if (type === 1) {
this.$refs.table.exportCsv({
filename: 'The original data'
});
} else if (type === 2) {
this.$refs.table.exportCsv({
filename: 'Sorting and filtering data',
original: false
});
} else if (type === 3) {
this.$refs.table.exportCsv({
filename: 'Custom data',
columns: this.columns8.filter((col, index) => index < 4),
data: this.data7.filter((data, index) => index < 4)
});
}
}

上面的this.columns8.filter应该是this.columns.filter

[Feature Request]Menu 组件可以不可加入收缩功能

What problem does this feature solve?

不想再自己写这个收缩展开菜单，三级菜单，

What does the proposed API look like?

如ant design vue 的菜单
https://www.antdv.com/components/menu-cn

[Bug Report]Select中的remote-method无法输入搜索超过1个字符

Environment

window10、chrome102.0.5005.63、Vue3.2.13

Reproduction link

https://www.iviewui.com/view-ui-plus/component/form/select

Steps to reproduce

1.iview官方文档链接
2.Select-远程搜索的示例
3.例子中的选项是美国的州名，输入搜索会自动清空已输入的字符，例如无法正常搜索到new york

What is expected?

连续输入new，remote-method方法中分三次得到n、ne、new

What is actually happening?

连续输入new，在remote-method方法中分三次得到n、e、w

官方文档中的示例与我在本地使用遇到同样的问题，每次输入触发remote-method后自动清空已输入的字符，完整的单词最终只能得到分开的单个字符

[Bug Report]ImagePreview组件预览时，不显示文件名，不知道浏览的哪个文件，预览到非图片时显示失败，建议显示文件类型的预设图片

Environment

都可以重现

Reproduction link

https://www.iviewui.com/view-ui-plus/component/form/upload

Steps to reproduce

ImagePreview组件预览时，不显示文件名，不知道浏览的哪个文件，预览到非图片时显示失败，建议显示文件类型的预设图片

What is expected?

ImagePreview组件预览时，可以显示文件名，方便查看是哪个文件，同时预览到非图片文件时，比如pdf就显示一个预设的pdf图片，文档就显示一个doc图片，等等按类型区分显示文件图片，注意图片要小，否则占带宽，用icon也行，总比现在显示失败好

What is actually happening?

ImagePreview组件预览时，不显示文件名，不知道浏览的哪个文件，预览到非图片时显示失败，建议显示文件类型的预设图片

[Bug Report]DatePicker 日期选择器回车问题

Environment

macOS 12.1/Chrome 102

Reproduction link

https://www.iviewui.com/view-ui-plus/component/form/date-picker

Steps to reproduce

打开以上连接
第一个示例，基础用法，随便选择一个日期，比如2022-06-10
手动修改以上日期为2022-06-11
点击回车两次，日期又变回2022-06-10

What is expected?

不管几次回车都保正常结果

What is actually happening?

参考重现步骤

应该是picker.vue里面handleKeydown的处理逻辑问题。
另外，这个库打算长期更新吗？还是像https://github.com/view-design/ViewUI/issues 完全废弃了

$Modal.info页面的样式和用Modal的不一致

Nuxt3 - [Vue warn]: Failed to resolve component

If you set ssr: true mode in Nuxt 3, ...

import { defineNuxtConfig } from 'nuxt';

export default defineNuxtConfig({
  ssr: true,
});

... you get the following message in the console.

[Vue warn]: Failed to resolve component: Button
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[nitro] [dev] [unhandledRejection] TypeError: Invalid value used as weak map key
    at WeakMap.set (<anonymous>)
    at normalizePropsOptions (/home/projects/nuxt-starter-7kmya5/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3966:11)
    at createComponentInstance (/home/projects/nuxt-starter-7kmya5/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6952:23)
    at renderComponentVNode (/home/projects/nuxt-starter-7kmya5/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:171:22)
    at Module.ssrRenderComponent (/home/projects/nuxt-starter-7kmya5/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:608:12)
    at _sfc_ssrRender (file:///home/projects/nuxt-starter-7kmya5/.nuxt/dist/server/server.mjs:3388:31)
    at renderComponentSubTree (/home/projects/nuxt-starter-7kmya5/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:253:13)
    at renderComponentVNode (/home/projects/nuxt-starter-7kmya5/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:188:16)
    at Module.ssrRenderComponent (/home/projects/nuxt-starter-7kmya5/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:608:12)
    at default (file:///home/projects/nuxt-starter-7kmya5/.nuxt/dist/server/server.mjs:2658:37)

Playback on Stackblitz >>>

//---

How do I get rid of this message?

[Bug Report]Row/Col 栅格百分比布局下加表格组件无效

Environment

版本 101.0.4951.67（正式版本）（64 位）

Reproduction link

https://run.iviewui.com/7E8S0Qi8

Steps to reproduce

https://run.iviewui.com/7E8S0Qi8

What is expected?

布局有效

What is actually happening?

布局无效

组合式api中调用组件实例方法报错

在setup语法糖中调用 Message.xx()，无论是全局绑定还是在单文件中引入或者使用provide/inject；都报相同的错误，如下：

[Bug Report]table组件bug实在太多了，都自己兼容了，这里提几个影响大的

Environment

都可以重现

Reproduction link

https://www.iviewui.com/view-ui-plus/component/form/table

Steps to reproduce

1.当模式为多选时，只要勾选了，table就会出现横向滚动条，即使内容不超出也会出现，做ui前端的，这点影响非常不好
2.单选，但是需要多选模式的勾选框来明确标记哪一行被勾选了，当我点击勾选时，同时我需要取消其他勾选，我的做法是先调用全部取消按钮，再手动调用勾选函数时，然后在勾选函数中调用勾选函数，造成了死循环，希望可以像jqgrid一样增加手动调用不触发函数的参数，所有函数都应该有此选项，静默调用，而不重复触发事件
3.树形数据结构设计太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太太差！其他成熟表格都是根据数组列表里的parentId，自动解析为树形表格，而iview的table却需要转换为children结构后才可以被table组件识别，第一，严重影响开发效率，后端一般直接获取非树形列表数据比较方便，第二，无法兼容很多场景，比如，index序号显示都不正常，还要自定义修复，勾选第一行，第三行也会被勾选，因为两行index一样，这都是树形数据的兼容性差所致，一定要自动识别原始列表数据，自动解析才好，第三，树形数据太难维护，我现在是做了vue监听，自动转换数据类型，再做相应的crud，综上所述，希望可以支持直接列表数据解析为树形table，同时兼容之前的树形数据，因为已经在使用了，加个属性标记就好
其他不再列举，希望iview越来越好

What is expected?

修复以上3个问题bug

What is actually happening?

都不好用

[Bug Report]upload组件，截图粘贴时，必须先点击一下组件，弹出文件选择框，然后关闭文件选择框才能粘贴，非常不人性化，希望可以鼠标移上去触发监听粘贴事件

Environment

都可以重现

Reproduction link

https://www.iviewui.com/view-ui-plus/component/form/upload

Steps to reproduce

qq截图后，ctrl v粘贴，无效，必须先点击一下组件，弹出文件选择框，然后关闭文件选择框才能粘贴，非常不人性化，希望可以鼠标移上去触发监听粘贴事件，mouterenter时组件就开始监听粘贴事件，这样，鼠标移动上去后，就可以粘贴了

What is expected?

截图后可以直接粘贴，不需要先点击一下组件，或者鼠标移动到组件上就可以粘贴

What is actually happening?

必须先点击一下组件，弹出文件选择框，然后关闭文件选择框才能粘贴，非常不人性化

[Bug Report]在Split控件下，按住分割线无法左右移动

Environment

win11,谷歌浏览器，vue3

Reproduction link

https://run.iviewui.com/LcqAlfjJ

Steps to reproduce

按住分割线拖动

What is expected?

按住分割线能够左右拖动

What is actually happening?

分割线固定住，无法左右拖动

[Feature Request]部分组件文档没有英文翻译

What problem does this feature solve?

部分组件文档没有英文翻译

What does the proposed API look like?

[Bug Report]Tree自定义节点内容 resolveComponent is not defined

Environment

widow/Chrome版本 96.0.4664.45（正式版本）（64 位）/vue3

Reproduction link

https://run.iviewui.com/BYfe32sV

Steps to reproduce

控制台

What is expected?

正确显示

What is actually happening?

页面报错，组件不显示

[Feature Request]Tree组件设置disabled后标题添加禁用样式&细分disabled属性

What problem does this feature solve?

目前ViewUI不显示复选框后设置disabled后无禁用样式标识，用户无法区别

https://run.iviewui.com/evJ4Um15

可细分disabled属性禁用复选框或item

https://ant.design/components/tree-cn/

https://www.naiveui.com/zh-CN/light/components/tree

What does the proposed API look like?

新增checkboxDisabled属性

disabled属性增加禁用样式

color: var(--color-disabled);
cursor: not-allowed;

参考Ant Design https://ant.design/components/tree-cn/
参考Naive UI https://www.naiveui.com/zh-CN/light/components/tree

[Bug Report]select组件开启filterable在vue3和vue2版本表现不一致

Environment

Reproduction link

https://www.iviewui.com/view-ui-plus/component/form/select；http://v4.iviewui.com/components/select

Steps to reproduce

vue3中select组件开启filterable，重选后只显示过滤后的信息。vue2则显示全部的item。vue3版本是特意此设置吗?

What is expected?

vue3中select组件开启filterable,重选后显示全部item信息。和vue2版本一致

What is actually happening?

vue3中select组件开启filterable，重选后只显示过滤后的信息。

[Bug Report]InputNumber组件显示不正常，右边的上下选择按钮显示不出

Environment

都可以重现

Reproduction link

https://www.iviewui.com/view-ui-plus/component/form/input-number

Steps to reproduce

新环境拖一个inputnumber组件出来就可以重现，你们没测试过吧？错误太低级了

What is expected?

输入框右边的上下按钮正常显示

What is actually happening?

输入框右边的上下按钮显示空白，不能点击

select组件，选中后，如果不选择清除无法查看其他下拉框

Modal为什么点击footer上的操作按钮会自动触发v-modal并关闭了modal。异步点确认时，loading控制，逻辑有问题，必须先把loading设置为true，当把loading设置成false后，此时应该在哪里再把loading设置为true?导致下次打开modal，点确认按钮，直接关了modal

如题

[Feature Request]增加 VS Code 插件

What problem does this feature solve?

提供 VS Code，可以识别 View UI Plus 的标签和 props 快速创建节点。

What does the proposed API look like?

[Bug Report]表单select组件，如果在多选的状态下，鼠标点击表单按钮，需要点两次才能触发校验

Environment

所有版本

Reproduction link

https://run.iviewui.com/p8IXJyAQ

Steps to reproduce

1.将select设置为多选
2.选择一个值之后，不要点击其他位置，使下拉列表保持展开的状态
3.点击表单submit按钮

What is expected?

当下拉列表展开的时候，第一次点击submit按钮应该触发表单校验

What is actually happening?

当下拉列表展开的时候，第一次点击submit按钮没有触发表单校验，需要等待下拉列表折叠后，也就是第二次点击才能触发表单校验

[Bug Report]table render 组件无法获取到props 内传递的参数

Environment

mscos 11.6.1 / chrome100 / vue3.0

Reproduction link

https://iviewui.com/view-ui-plus/component/form/table

Steps to reproduce

1.进去官方文档
2.搜索table组件
3.查看自定义render相关代码

  h(resolveComponent('Button'), {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    onClick: () => {
                                        this.show(params.index)
                                    }
                                },

What is expected?

table render Button props传递的的type属性可以获取到

What is actually happening?

未获取到props传递的参数

[Feature Request]Upload组件上传列表新增红色异常失败样式

What problem does this feature solve?

为用户显示文件上传失败记录
https://ant.design/components/upload-cn/
https://www.naiveui.com/zh-CN/os-theme/components/upload

What does the proposed API look like?

fileList支持status配置
参考Ant Design https://ant.design/components/upload-cn/
参考Naive UI https://www.naiveui.com/zh-CN/os-theme/components/upload

[Feature Request]新组件：分段控制器 Segmented

What problem does this feature solve?

用于展示多个选项并允许用户选择其中单个选项；
当切换选中选项时，关联区域的内容会发生变化。

What does the proposed API look like?

https://ant.design/components/segmented-cn

[Bug Report]导给设置了icon的Input，添加clearable，会导致输入以后icon消失

Environment

vue ^2.6.10, "view-design": "^4.2.0",

Reproduction link

https://run.iviewui.com/PChDwDQh

Steps to reproduce

导给设置了icon的Input，添加clearable，输入内容以后icon消失

What is expected?

hover时显示close，其他时候显示原icon

What is actually happening?

hover时显示close，其他时候原icon消失

[Bug Report]文档里的table组件的render props传值问题

Environment

macos 12.4/chrom 103.0.5060.53/vue3

Reproduction link

https://run.iviewui.com/Jy83V5OO

Steps to reproduce

props传值未生效

What is expected?

安装文档写的 h("div", [
h(
resolveComponent("Button"),
{
props: {
type: "text",
size: "small",
},
onClick: () => {
this.showDeleteModal(params.row);
},
},
"移除"
),
]);组件props传值应该生效

What is actually happening?

props传值未生效

vue3文档中写的h函数的传参如下
h(
// {String | Object | Function} tag
// 一个 HTML 标签名、一个组件、一个异步组件、或
// 一个函数式组件。
//
// 必需的。
'div',

// {Object} props
// 与 attribute、prop 和事件相对应的对象。
// 这会在模板中用到。
//
// 可选的。
{},

// {String | Array | Object} children
// 子 VNodes, 使用 h() 构建,
// 或使用字符串获取 "文本 VNode" 或者
// 有插槽的对象。
//
// 可选的。
[
'Some text comes first.',
h('h1', 'A headline'),
h(MyComponent, {
someProp: 'foobar'
})
]
)
源码中的函数定义是第二个参数不是传children就是props 所以应该直接传属性名包括style和html的原生属性
我提供的代码的VIEW按钮是我的写法是可以正确显示的 DELETE按钮是文档写法不能正确显示

Table on-select-all-cancel

Table event on-select-all-cancel return selected rows' data array.
So, it return empty array. It doesn't help

[Feature Request]Tree 和 TreeSelect 树选择组件能否加搜索功能

What problem does this feature solve?

方便用户查找

What does the proposed API look like?

大数据下查找到需要的数据

[Bug Report]Modal 居中显示时，大量数据出现滚动条时，顶部内容被遮挡

Environment

Microsoft Edge 版本 101.0.1210.53 (正式版本) (64 位)

Reproduction link

https://run.iviewui.com/Ty3SCMh1

Steps to reproduce

Modal,大量数据出现滚动条时，顶部内容被遮挡

What is expected?

不遮挡

What is actually happening?

遮挡

引用就报错 `Argument of type 'ViewUIPlus' is not assignable to parameter of type 'Plugin_2'.`

引用就报错了：
Argument of type 'ViewUIPlus' is not assignable to parameter of type 'Plugin_2'.

import { createApp } from 'vue';
import ViewUIPlus from 'view-ui-plus';
import 'view-ui-plus/dist/styles/viewuiplus.css';
import App from '@/App.vue';

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