GithubHelp home page GithubHelp logo

view-design / viewuiplus Goto Github PK

View Code? Open in Web Editor NEW
350.0 10.0 116.0 33.78 MB

An enterprise-level UI component library and front-end solution based on Vue.js 3

Home Page: https://www.iviewui.com

License: Other

JavaScript 21.76% Vue 55.16% Less 23.08%
component-library iview vue viewdesign

viewuiplus's Introduction

View UI Plus

An enterprise-level UI component library and front-end solution based on Vue.js 3

View UI Plus NPM downloads NPM downloads JS gzip size CSS gzip size Join the chat at https://gitter.im/iview/iview

Docs

https://www.iviewui.com

Experience it online in InsCode

https://inscode.csdn.net/@aresn/ViewDesign

Features

  • Dozens of useful and beautiful components.
  • Friendly API. It's made for people with any skills level.
  • Extensive documentations and demos.
  • It is quite awesome.

Install

We provide starter kit for you.

Install View UI Plus

Using npm:

npm install view-ui-plus --save

Using a script tag for global use:

<script type="text/javascript" src="viewuiplus.min.js"></script>
<link rel="stylesheet" href="dist/styles/viewuiplus.css">

You can find more info on the website.

Usage

<template>
    <Slider v-model="value" range />
</template>
<script setup>
    import { ref } from 'vue'
    const value = ref([20, 50])
</script>

Using css via import:

import 'view-ui-plus/dist/styles/viewuiplus.css'

Community

If you want to contribute us or in case you are haiving any doubt.

Questions: Find other users at the Gitter chat or post on StackOverflow using [iview-ui] tag
Bugs: File a issue here - please provide a example so we can help you better
Contribute: Contact us in Gitter chat, WeChat or via mail to [email protected]. PRs welcome!

Major Contributors

Name Avatar Name Avatar Name Avatar
Aresn jingsam rijn
lcx960324 GITleonine1989 huixisheng
Sergio Crisostomo lison16 Xotic750
huanghong1125 yangdan8 likuner

License

MIT

Copyright (c) 2016-present, ViewDesign

viewuiplus's People

Contributors

baoyx007 avatar chjtx avatar chuanfengzhang avatar debugisfalse avatar gitleonine1989 avatar hezhiying avatar huanghong1125 avatar icarusion avatar jhh678 avatar jingsam avatar kovjogin avatar likuner avatar luffyzhao avatar lwyj123 avatar mahmoudzohdi avatar miomio-xiao avatar msidolphin avatar muei avatar natjnp avatar ndrshn avatar oyv1cent avatar rajnikant307 avatar rijn avatar sergiocrisostomo avatar vincentfintend avatar weidapao avatar weightbomb avatar xotic750 avatar yangdan8 avatar yikaj avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

viewuiplus's Issues

[Bug Report]Table 固定列会遮挡横向滚动条导致固定列所遮盖部分的横向滚动条无法被点击

Environment

操作系统版本: Windows 11 / 浏览器版本: Chrome 103.0.5060.114 / Vue 版本: Vue 3 或 Vue 2 / UI 框架版本: View UI Plus / View UI

Reproduction link

https://run.iviewui.com/jMi7dee1

Steps to reproduce

  1. 创建一个 Table
  2. 列定义中设置一列或多列为固定列
  3. 此时点击被固定列所覆盖的横向滚动条并尝试滚动,发现无法滚动

What is expected?

固定列不应覆盖掉表格的横向滚动条,Fixed 层应当只覆盖表头及内容部分。

What is actually happening?

固定列覆盖掉了表格的横向滚动条导致被覆盖了的横向滚动条无法点击,若需横向滚动,只能点击非固定列下方的横向滚动条来达到滚动的目的。


该 Bug 在 View UI(Vue 2)及 View UI Plus(Vue 3)均可重现。

[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按钮是文档写法 不能正确显示

[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传递的参数

[Bug Report]vite,vue main.js,import 'view-ui-plus/src/styles/index.less' ,提示 fonts/ionicons.ttf?v=3.0.0 not found

Environment

mac / chrome 101.0.4951.64 / vue 3.2.20

Reproduction link

https://run.iviewui.com/WIeCe4dp

Steps to reproduce

使用vite vue ,main.js 中 import 'view-ui-plus/src/styles/index.less' ,控制台提示 fonts/ionicons.ttf?v=3.0.0 not found,并且页面中icon看不见。

What is expected?

定制主题后,icon正常显示。

What is actually happening?

定制主题后,icon不显示。

[Bug Report]新增加的ImagePreview组件很好用,但是下载的时候文件名是unnamed,请取文件名

Environment

都可以重现

Reproduction link

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

Steps to reproduce

新增加的ImagePreview组件很好用,但是点击下载的时候文件名是unnamed,请取文件名

What is expected?

新增加的ImagePreview组件很好用,但是点击下载的时候文件名是unnamed,请取文件名

What is actually happening?

新增加的ImagePreview组件很好用,但是点击下载的时候文件名是unnamed,请取文件名

[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]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]Modal 的on-ok方法设置了visible=false,导致点确认按钮都会关闭Modal

Environment

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

Reproduction link

http://iviewui.com/view-ui-plus/component/view/modal

Steps to reproduce

在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控制可以控制,但并不完美。

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

Environment

Vue3

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]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]表单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按钮没有触发表单校验,需要等待下拉列表折叠后,也就是第二次点击才能触发表单校验

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

[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后自动清空已输入的字符,完整的单词最终只能得到分开的单个字符

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

What problem does this feature solve?

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

https://run.iviewui.com/evJ4Um15

image

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

image

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

image

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

image

What does the proposed API look like?

新增checkboxDisabled属性

disabled属性增加禁用样式

image

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]<InputNumber>上下箭头不显示

Environment

win11/edge102/vue3.2

Reproduction link

https://github.com/view-design/view-ui-project-vuecli

Steps to reproduce

1、下载官方提供的项目源码(view-ui-project-vuecli)
2、在views/Home.vue中加入
3、在本地运行后页面输入框中没有上下箭头图标,只显示一条竖向分割线

What is expected?

正常显示数字及上下箭头图标,并且点击点击可以改变数字。

What is actually happening?

鼠标经过后只显示一条竖向分割线没有上下箭头,并且点击后数字无法改变。

[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

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

What is expected?

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

What is actually happening?

参考重现步骤


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

[Bug Report]upload组件在多选上传时无法限制上传个数

Environment

都可以重现

Reproduction link

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

Steps to reproduce

比如最大允许上传5个文件,只要已上传列表个数小于5,那么一次性多选任意多个文件上传,都是允许的,因为该组件只根据已上传列表uploadlist的个数来判断,没有考虑即将上传后的文件个数,所以这就导致了上传后的个数没有限制,远远大于5,这是非常低级的bug,居然没有考虑到。。。

What is expected?

增加一个属性prop来设置max-files-number,当已上传列表+即将上传的文件个数大于max-files-number时,回调提示错误

What is actually happening?

完全无效

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

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

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

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

image

想问一下大佬们,input的slot复合型输入框,用render来怎么写

(1)《Input》
《template #append》
《span》com《/span》
《/template》
《/Input》

(2)《Input》
《span slot="append"》com《/span》
《/Input》

上面(英文状态下展示有问题,换成中文的《》)(1)是iview的vue3官网的写法,(2)是iview的vue2的写法,vue2可以直接写标签,给个slot=“suffix”,就可以显示出来,现在要加上template的#prepend,这个要怎么render出来?希望有大佬能解答

[Feature Request]treeSelect-多选-可勾选,选中父节点之后,其子节点也全部被选中

What problem does this feature solve?

1.比如我想导出一个部门的数据,在选择了最顶级的部门之后,其子部门也应当全部被导出,所以子节点也应当被全部选中;
2.如果所有子节点不是全部选中状态,则相应父节点以待定状态表示;
3.子节点全部未选中,则父节点也应当是未选中状态

What does the proposed API look like?

childs-select,开启子节点根据父节点状态变更

[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]windows 环境下 表格固定列和普通列所在行高度不一致

Environment

Windows 10 企业版 19042.1526 / chrome: 103.0.5060.114(正式版本) (64 位) / vue: 3.2.36

Reproduction link

https://run.iviewui.com/jjuk9Eqx

Steps to reproduce

1、添加一个表格
2、最后一列设置为固定列
3、普通列内容不要产生换行,固定列内容产生换行

What is expected?

普通列的行高被撑开,与固定列保持一致

What is actually happening?

普通列的行高未被撑开


仅在 windows 环境下, chrome 103 版本测试,其他操作系统未做测试

[Bug Report]2.0版本的连文档都不提供了?

Environment

操作系统版本 / 浏览器版本 / Vue 版本等等信息

Reproduction link

https://www.iviewui.com/

Steps to reproduce

操作系统版本 / 浏览器版本 / Vue 版本等等信息

What is expected?

操作系统版本 / 浏览器版本 / Vue 版本等等信息

What is actually happening?

操作系统版本 / 浏览器版本 / Vue 版本等等信息

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?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.