TinyVue is an enterprise-class UI component library of OpenTiny community, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.
Home Page: https://opentiny.design/tiny-vue
License: MIT License
![allcontributors[bot] avatar](https://avatars.githubusercontent.com/in/23186?v=4 "allcontributors[bot]")
改为新架构后，针对对象数组的监听好像失效了
solved the feature
https://github.com/GaoNeng-wWw/tiny-vue.git
正常安装且不出错
控制台发生了报错，具体报错参考报错日志
Node: v18.7.0
npm: v8.15.0
3.6.1
3.2.47
图示为 鼠标指向第一行数据，第一行底色是灰色，但是明显出现 “行错位”
<tiny-grid :data="tableData" align="center" border>
<tiny-grid :data="tableData" align="center" border>
<tiny-grid-column type="index" title="序号" width="200" fixed="left"></tiny-grid-column>
<tiny-grid-column type="sn" title="设备编号" width="200" fixed="left"></tiny-grid-column>
<tiny-grid-column type="name" title="设备名称" width="200"></tiny-grid-column>
<tiny-grid-column type="desc" title="设备描述" width="200"></tiny-grid-column>
<tiny-grid-column type="level" title="设备层级" width="200"></tiny-grid-column>
<tiny-grid-column title="操作" width="200" fixed="right">
<template v-slot="data">
<div class="demo-custom-column">
<a>查看</a> | <a>编辑</a> | <a>删除</a>
</div>
</template>
</tiny-grid-column>
</tiny-grid>
tableData: [
{ sn: 001, name: '测试001', desc: '描述内容', level:1 },
...
]
如上
No response
No response
No response
3
^3.2.47
关闭左侧侧边栏后，无法打开侧边栏
No response
No response
No response
建议整个网站加上主题切换功能，切换主题按钮放在顶部导航中。
参考 Arco Design 效果：
如果整个网站的主题切换不好实现，则建议放在底部，这样就不会遮挡 demo 导航区。
在浏览器中直接能看到效果 方便快速开发调试
建议这样使用 min.js min.css
<script src="//cdn.jsdelivr.net/npm/vue@3"></script> <script src="//cdn.jsdelivr.net/npm/tiny-vue/index.js"></script>3.6.7
3.2.47
如下
<template>
<tiny-popeditor v-model="value" :grid-op="gridOp" show-pager :pager-op="gridOp.pagerOp"></tiny-popeditor>
</template>
<script>
import { Popeditor } from '@opentiny/vue'
export default {
components: {
TinyPopeditor: Popeditor
},
data() {
return {
value: '',
gridOp: {
columns: [
{ field: 'id', title: 'ID', width: 40 },
{ field: 'name', title: '名称' },
{ field: 'province', title: '省份', width: 80 },
{ field: 'city', title: '城市', width: 80 }
],
data: [
{ id: '1', name: 'GFD科技YX公司', city: '福州', province: '福建' },
{ id: '2', name: 'WWW科技YX公司', city: '深圳', province: '广东' }
],
pagerOp: {
pageSize: 5,
pageSizes: [5, 10, 20, 50, 100, 500],
total: 10,
layout: 'total, prev, pager, next, jumper, sizes'
}
}
}
}
}
</script>分组数选项，在选项设置下方显示
No response
关闭tiny-dialog-box只会关闭遮罩层，tiny-dialog-box及其内部元素
结构：
<tiny-dialog-box is-form-reset :visible="openStatus" @close="onClose('close')">
<tiny-file-upload>
</tiny-file-upload>
</tiny-dialog-box>
v2.5.0/v3.5.0
3.0.0
https://opentiny.design/tiny-vue/zh-CN/os-theme/components/anchor#is-affix
No response
No response
No response
latest
latest
本地启动之后，点击组件 demo 的“应用”按钮，弹出来一个保存文件的系统对话框，而修改后的 demo 却没有生效
本地启动之后，点击组件 demo 的“应用”按钮
应用修改后的 demo 代码
弹出来一个保存文件的系统对话框，而修改后的 demo 却没有生效
No response
latest
latest
https://opentiny.design/tiny-vue/zh-CN/os-theme/components/slider
这里应该是js精度问题导致的
No response
No response
No response
demo：
<tiny-badge :value="2" badge-class="custom-badge-class">我的待办</tiny-badge>默认情况下 badge 背景为红色，文本颜色为白色。
可配置 badge-class 自定义样式，默认透传的 class 是加在外层容器上的，不会传递到 badge 里，所以需要增加 badge-class 属性
组件效果：
latest
latest
应该是：opentiny-official
Issue 模板中的小助手微信号错误，应该是：opentiny-official
No response
No response
No response
latest
latest
参考以下 demo 的用法：
https://opentiny.design/tiny-vue/zh-CN/os-theme/components/tabs#custom-tab-title
参考以下 demo 的用法：
https://opentiny.design/tiny-vue/zh-CN/os-theme/components/tabs#custom-tab-title
No response
No response
No response
latest
latest
执行 pnpm i 命令，报以下错误：
ERR_PNPM_NO_MATCHING_VERSION No matching version found for [email protected]
This error happened while installing the dependencies of [email protected]
The latest release of vuepress-vite is "2.0.0-beta.45".
Other releases are:
* next: 2.0.0-beta.61
If you need the full list of all 62 published versions run "$ pnpm view vuepress-vite versions".
执行 pnpm i 命令，报以下错误：
ERR_PNPM_NO_MATCHING_VERSION No matching version found for [email protected]
No response
No response
No response
latest
latest
$ pnpm -v
8.0.0
pnpm dev 启动之后在终端报以下错误：
X [ERROR] Could not read from file: project\tiny-vue\examples\vue3\node_modules\vue\dist\vue.esm-bundler.js
../../node_modules/.pnpm/[email protected][email protected]/node_modules/vue-i18n/dist/vue-i18n.cjs.js:12:18:
12 │ var vue = require('vue');
pnpm dev 启动之后在终端报以下错误：
X [ERROR] Could not read from file: project\tiny-vue\examples\vue3\node_modules\vue\dist\vue.esm-bundler.js
../../node_modules/.pnpm/[email protected][email protected]/node_modules/vue-i18n/dist/vue-i18n.cjs.js:12:18:
12 │ var vue = require('vue');
No response
No response
No response
latest
^3.2.31
It is necessary to lock dependent version
deps installation successful, but postinstall hook runs failed, maybe caused by deps version, I will check it later.I think the deps lock file shouldn't be ignored by git.
No response
No response
No response
链接：https://opentiny.design/tiny-vue/zh-CN/os-theme/components/steps
目前点击组件 demo 导航之后，demo 外部会出现蓝色框，而且不会消失，要刷新页面才消失，建议：
1
1
1
1
1
1
1
latest
latest
安装以下方式配置 line-chart，hover上去的竖线样式并没有生效。
<template>
<tiny-line ... :settings="settings"></tiny-line>
</template>
<script>
const settings = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
// not work
lineStyle: {
color: '#ffa147',
width: 2,
type: 'dashed'
}
}
}
}
</script>同上。
期望是一条橙色虚线
实际是灰线
No response
latest
latest
执行以下命令构建组件库产物报以下错：
"./pc.vue" is imported as an external by "../../packages/vue/src/button-group/src/index.ts", but is already an existing non-external module id.
执行以下命令构建组件库产物报以下错：
"./pc.vue" is imported as an external by "../../packages/vue/src/button-group/src/index.ts", but is already an existing non-external module id.
不报错
报错
No response
3.6.1
3.2.47
如下
<template>
<tiny-cascader v-model="value" :options="options"></tiny-cascader>
</template>
<script>
import { Cascader } from '@opentiny/vue'
export default {
components: {
TinyCascader: Cascader
},
data() {
return {
value: 'anzhuangcli',
options: [
{
value: 'zhinan',
label: '指南',
children: [
{
value: 'anzhuang',
label: '安装',
children: [
{
value: 'xiangmudengji',
label: '项目登记',
children: [] // focus this Field⏰
}
]
}
]
}
]
}
}
}
</script>
组件选中"项目登记"后，隐藏 选项弹出框，并且把文本"项目登记" 设置到 input里
组件选中"项目登记"后，选项弹出框 仍然显示（认为 "项目登记" 还有子级可供选择），也未能把文本"项目登记" 设置到 input里。
No response
tabs 添加按钮希望挨着tab标签，在大屏幕上，如果放到右侧，移动距离太远
tabs 添加按钮希望挨着tab标签，在大屏幕上，如果放到右侧，移动距离太远
npm中查不到该包@opentiny/vue-vite-import
正常安装
tinyVue don't support collapse leftbar/menu feature, this is an important and basic function, please support it as soon as possable!
collapse menu/leftbar
表格现在编辑都是点编辑按钮弹出个界面或者 把表格里面显示输入框进行编辑，希望能像excel 那样。可以输入就编辑，还能支持方向箭头移动单元格。回车跳到当前单元格下的下一个行单元格。 tab 到下一个单元格。
希望表格组件有该功能
3.6.1
3.2.31
node.js版本：v18.12.0、16.18.0
切换到@opentiny/vue-docs文件目录，运行命令 pnpm run docs:dev
No response
No response
No response
3.1.0-alpha.0
vue 3.2.13
执行代码后，点击按钮，打开dialog弹框，然后点击弹框内的按钮，打开新的dialog弹框
点击第一层弹框内的button， openStatus_ = true，打开第二层dialog,最外层的遮罩层的z-index值应比内层的dialog低
点击第一层弹框内的button， openStatus_ = true，打开第二层dialog,最外层的遮罩层的z-index值应比内层的dialog高，造成无法对新的dialog内容进行操做
No response
3.5.0
3.2.47
无
复现步骤如下：
npm create vite（默认创建的vite工程vue版本为3.2.47）npm i @opentiny/vue@3<tiny-alert description="TinyVue"></tiny-alert>npm run devUncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/node_modules/@opentiny/vue-theme/svgs/success.svg') is not a valid name.
No response
No response
No response
latest
latest
执行 pnpm dev 本地启动项目，提示以下错误：
✘ [ERROR] Failed to resolve entry for package "@opentiny/vue". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-scan]
项目根目录执行 pnpm dev 命令
不报错，项目启动之后显示以下信息：
VITE v4.2.1 ready in 1487 ms
➜ Local: http://localhost:6175/
➜ Inspect: http://localhost:6175/__inspect/
这样就可以一目了然看到端口号。
现在显示了很多报错信息，导致看不到端口好，然后又没有自动打开浏览器，开发者会以为启动失败。
No response
latest
latest
pnpm dev 命令启动的端口号应该是：7130
pnpm dev 命令启动的端口号应该是：7130
No response
No response
No response
v2.5.0/v3.5.0
3.0.0
Anchor 锚点 固定模式demo默认是开启的不随页面滚动，它容易盖住文档信息；
demo可以添加一个按钮，demo中is-affix设置为false,点击后置为true,这样体验会好点，并且盖住文档信息不会很突然
No response
No response
No response
latest
latest
https://opentiny.design/tiny-vue/zh-CN/os-theme/components/pop-editor
关闭时有一个动画效果，而在弹出框完全关闭前会先隐藏弹出框的内容，正常应该是一起消失
No response
No response
No response
3.6.1
3.2.47
如下
<template>
<tiny-grid :data="tableData">
<tiny-grid-column type="index" width="120"></tiny-grid-column>
<tiny-grid-column field="name" title="名称" width="200"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域" width="200"></tiny-grid-column>
<tiny-grid-column field="address" title="地址" width="200"></tiny-grid-column>
<tiny-grid-column field="introduction" title="公司简介" width="200" show-overflow></tiny-grid-column>
<tiny-grid-column title="操作">
<template v-slot="data">
<tiny-tooltip class="item" effect="dark" content="编辑" placement="bottom" :append-to-body="false">
<tiny-icon-search class="tiny-svg-size"></tiny-icon-search>
</tiny-tooltip>
</template>
</tiny-grid-column>
</tiny-grid>
</template>
<script>
import { Grid, GridColumn, Tooltip } from '@opentiny/vue'
import { IconSearch } from '@opentiny/vue-icon'
export default {
components: {
TinyGrid: Grid,
TinyGridColumn: GridColumn,
TinyTooltip: Tooltip,
TinyIconSearch: IconSearch()
},
data() {
return {
tableData: [
{
id: 1,
name: 'GFD科技YX公司',
area: '华东区',
address: '福州',
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
},
{
id: 2,
name: 'GFD科技YX公司',
area: '华东区',
address: '福州',
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
},
{
id: 3,
name: 'GFD科技YX公司',
area: '华东区',
address: '福州',
introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
}
]
}
}
}
</script>问题1：
显示位置偏移问题：鼠标指向操作图标后，期望是在图标的底部（tooltip 的placement 设置为bottom）显示文本提示；
问题2：
提示块被遮挡问题：鼠标指向最后一行数据 的操作图标，文本提示被遮挡，同时表格内部高度被撑开。鼠标往下滚动时，文本提示隐藏，表格内部高度还原。
问题1：
问题2：
No response
`-- @opentiny/[email protected]
2.6.10
e.runtime.esm.js:4605 [Vue warn]: inject() can only be used inside setup() or functional components.
found in
--->
at src/views/Home.vue
at src/App.vue
ue warn]: Error in setup: "TypeError: Cannot read properties of undefined (reading 'tiny_mode')"
found in
--->
at src/views/Home.vue
at src/App.vue
peError: Cannot read properties of undefined (reading 'tiny_mode')
ue warn]: Error in data(): "TypeError: Cannot read properties of undefined (reading 'length')"
found in
--->
at src/views/Home.vue
at src/App.vue
e.runtime.esm.js:4605 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'buttonDisabled')"
found in
--->
at src/views/Home.vue
at src/App.vue
e.runtime.esm.js:4605 [Vue warn]: inject() can only be used inside setup() or functional components.
found in
--->
at src/views/Home.vue
at src/App.vue
vuecli 初始化项目
安装 tiny
引入官网例子
No response
No response
No response
2.5.0
2.7.14
无
复现步骤如下：
vue create tiny-vue-demo-vue2（默认创建的vue cli项目，vue版本为2.7.14）npm i @opentiny/vue@2<tiny-button>TinyVue</tiny-button>npm run serve启动之后button组件未渲染，浏览器控制台报以下错误：
TypeError: Cannot read properties of null (reading 'proxy')
at tools (vue2.js?3125:195:1)
at setup (index.js?1a88:111:1)
at setup$1 (pc.js?5ce6:68:1)
at mergedSetupFn (vue-composition-api.esm.js?a6f4:2079:1)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:3017:1)
at initSetup (vue.runtime.esm.js?2b0e:2440:1)
at initState (vue.runtime.esm.js?2b0e:5365:1)
at Vue._init (vue.runtime.esm.js?2b0e:5691:1)
at new VueComponent (vue.runtime.esm.js?2b0e:5826:1)
at createComponentInstanceForVnode (vue.runtime.esm.js?2b0e:4544:1)
No response
No response
No response
在鼠标进入演示的时候建议把浏览器 默认滚动事件给禁用掉
0
3.6.1
5.0.8
如下
运行成功
运行失败
No response
Windows 11 Chrome
latest
在此处点击选择框或日期选择器滚动鼠标时会导致弹出层错位
应和组件文档内部一样弹出层位置始终跟随组件
No response
No response
erp系统里面很多这种输入框弹出下拉表格，表格可以上下左右回车选中等功能。还能有工具栏。
系统能提供改组件
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.