GithubHelp home page GithubHelp logo

nutui-uniapp / nutui-uniapp Goto Github PK

View Code? Open in Web Editor NEW
243.0 243.0 50.0 17.36 MB

京东风格的轻量级移动端组件库,基于 uniapp与Vue3,支持移动端 H5 和 小程序开发

Home Page: https://nutui-uniapp.netlify.app

License: MIT License

JavaScript 4.57% HTML 0.04% TypeScript 23.02% Vue 55.08% SCSS 16.83% CSS 0.46%
miniprogram nutui ts typescript uniapp vue3

nutui-uniapp's Introduction

logo

nutui-uniapp

京东风格的轻量级 uni-app 组件库,支持移动端 H5 和 小程序开发

GitHub Repo stars npm npm downloads netlify

NutUI   NutUI  

介绍

nutui-uniapp 组件库,基于Taro版NutUi 4.x版本修改而来,适配了uni-app, 使用 Vue 技术栈开发小程序应用,开箱即用,拥有丰富的业务组件。

特性

  • 🚀 80+ 高质量组件,覆盖移动端主流场景
  • 💪 支持一套代码同时开发多端
  • 📖 基于京东 APP 10.0 视觉规范
  • 🍭 支持按需引用
  • 💪 支持 TypeScript
  • 💪 支持动态定制主题
  • 🍭 支持暗黑模式
  • 🌍 支持国际化

快速上手

请参考快速上手

链接

贡献指南

修改代码请阅读我们的 贡献指南

使用过程中发现任何问题都可以提 Issue 给我们,当然,我们也非常欢迎你给我们发 PR

贡献者们

感谢以下所有给 nutui-uniapp 贡献过代码的 开发者

contributors

感谢

License

MIT License © 2023-PRESENT Yang1206 and all contributors.

nutui-uniapp's People

Contributors

1szx1 avatar c0dedance avatar dahaichen avatar dependabot[bot] avatar insistence avatar leelulin avatar loclink avatar noahsun avatar normal-coder avatar north-al avatar outlovecn avatar rjqinghuan avatar shutwt avatar skiyee avatar sun79 avatar uphkcrnqmafqwcssssss avatar xiaohe0601 avatar yang1206 avatar yhoney7 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

nutui-uniapp's Issues

使用 vite4 + vue3+ uniapp 会报这个错误

nutui-uniapp 版本号

1.1.10

平台

h5, weapp

重现链接

https://github.com/JS-mark/uni-app-demo

重现步骤

正常安装

期望的结果是什么?

协助排查下这个问题,不在出现此类输出

实际的结果是什么?

协助排查下这个问题,不在出现此类输出

环境信息

System:
OS: macOS 14.0
CPU: (10) arm64 Apple M1 Max
Memory: 6.22 GB / 64.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm
pnpm: 8.8.0 - /opt/homebrew/bin/pnpm
Browsers:
Chrome: 118.0.5993.70
Safari: 17.0
npmPackages:
nutui-uniapp: ^1.1.10 => 1.1.10

其他补充信息

vue 3.2.47
vite 4.1.4
node 18.x

bug:TabBar

uniapp-nutui-demo

const List = [
  {title: '标签', icon: 'home', name: 'home'},
  {title: '标签', icon: 'category', name: 'category'},
  {title: '标签', icon: 'find', name: 'find'},
  {title: '标签', icon: 'cart', name: 'cart'},
  {title: '标签', icon: 'my', name: 'my'},
]

// 标签名称,作为匹配的标识符时。
// 切换页签触发事件回调参数
function tabSwitch(item, index) {
  console.log(item, index);
}
// undefined 'home'
// Proxy(Object) {…} 'category'
// Proxy(Object) {…} 'find'
// Proxy(Object) {…} 'cart'
// Proxy(Object) {…} 'my'

address地址选择

uniapp-nutui 版本号

0.2.4

平台

weapp

重现链接

<nut-cell title="请选择省市区街道" is-link @click="showAddress"> <nut-address v-model="value" v-model:visible="showPopup" :province="address.province" :city="address.city" :country="address.country" :town="address.town" @change="onChange" @close="close" custom-address-title="请选择所在地区" > <script lang="ts" setup> import { ref, reactive } from 'vue'; const showPopup = ref(false); const address = reactive({ province: [ { id: 1, name: '北京' }, { id: 2, name: '广西' }, { id: 3, name: '江西' }, { id: 4, name: '四川' }, ], city: [], country: [], town: [], }); const value = ref([]); const text = ref('请选择地址'); const showAddress = () => { showPopup.value = !showPopup.value; }; const onChange = (cal) => { console.log(cal); }; const close = (val) => { console.log(val); text.value = val.data.addressStr; }; // 根据省code获取所有市 const getCityByProvinceCode = (provinceCode: string) => { address.city = [ { id: 7, name: '南京市' }, { id: 8, name: '北京市' }, { id: 9, name: '滁州市' }, { id: 6, name: '上海市' }, ]; }; // 根据市code获取所有区 const getCountryByCityCode = (CityCode: string) => { address.country = [ { id: 20, name: '雨花台区' }, { id: 21, name: '江宁区' }, { id: 22, name: '南谯区' }, ]; }; // 根据区code获取所有街道 const getTownByCountryCode = (countryCode: string) => { address.town = [ { id: 10, name: '板桥街道' }, { id: 11, name: '铁心桥街道' }, { id: 12, name: '大王街道' }, ]; }; </script>

重现步骤

1. 使用自定义地址,已有province数据,此时city,country和town都是空数组;
2. 根据选中的provinceCode去请求city数组,然后赋值给city,组件在city数据为空时,选择province时,直接关闭了弹窗,change事件里拿不到此时选择的信息,只能在cloesed回调里拿到已选择的地址,但是弹窗已经关闭

期望的结果是什么?

期望在只有province数据的情况下,选择某一省份,能够在change回调参数里拿到当前选择的信息,并且弹窗不会自动关闭,这样才可以根据provinceCode去获取下一级数据

实际的结果是什么?

目前在只有province数据的情况下,选择某一省份,弹窗自动关闭,change回调参数拿不到当前选中的信息,只能在closed回调里获取到,这样无法完成业务根据选择的信息获取下一级数据

环境信息

No response

其他补充信息

vue: 3.2.47
vite:4.3.8
node:16.5.1

nut-list 虚拟列表异常

nutui-uniapp 版本号

^1.0.0

平台

weapp

重现链接

https://juejin.cn/post/7276324625838964796

重现步骤

自封装组件导入nut-list index引用自定义组件 Component is not found in path "node-modules/nutui-uniapp/components/list/list"

期望的结果是什么?

正常显示文档例子

实际的结果是什么?

Component is not found in path "node-modules/nutui-uniapp/components/list/list" (using by "components/scrollLists/scrollLists")(env: Windows,mp,1.06.2309072; lib: 3.0.1)

环境信息

"nutui-uniapp": "^1.0.0",
"pinia": "2.0.36",
"sass": "^1.66.1",
"sass-loader": "^13.3.2",
"vue": "^3.2.45",

其他补充信息

No response

在tsconfig.json已经添加了types,但是组件ts类型显示还是unknown,用自动引入的方法也是没有起效

uniapp-nutui 版本号

1.0.0

平台

其他小程序

重现链接

https://gitee.com/lzl1439437603/rabbit-vue3-ts-new

重现步骤

已经安装了Volar插件,版本对应"vue": "^3.2.47","nutui-uniapp": "^1.0.0",

  1. pnpm add nutui-uniapp
  2. 配置tsconfig.json,"types": ["nutui-uniapp/global.d.ts"]
  3. 在vue文件中编写 主要按钮
  4. 鼠标上移查看ts类型,显示为 unknown

期望的结果是什么?

可以查看正确的ts类型

实际的结果是什么?

鼠标上移查看ts类型,显示为 unknown

环境信息

No response

其他补充信息

查看了nutui-uniapp/global.d.ts, 也没啥问题,但是就是没类型提示,不知道为什么

微信小程序:样式失效

从微信开发者工具中可以查看到样式已经按需导入,但是没有添加对应的class类名,导致样式失效。

image

需手动添加class类名才能生效

image

关于Form 表单以及Item组件样式问题

uniapp-nutui 版本号

0.2.4

平台

h5

重现链接

https://github.com/Yer11214/uniapp-nutui-findout-bug

重现步骤

直接通过Npm安装插件,启动代码 页面 /pages/passport/login

期望的结果是什么?

Form表单,表单里面为什么都有阴影效果? 而且还没有一个Props可以关闭阴性

实际的结果是什么?

可以通过Props关闭阴影效果

环境信息

System:
OS: Windows 10 10.0.22621
CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700
Memory: 12.16 GB / 31.78 GB
Binaries:
Node: 14.18.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.22621.2134.0), Chromium (116.0.1938.54)
Internet Explorer: 11.0.22621.1
npmPackages:
uniapp-nutui: ^0.2.4 => 0.2.4

其他补充信息

No response

关于Icon组件不生效问题

uniapp-nutui 版本号

0.2.4

平台

h5

重现链接

https://github.com/Yer11214/uniapp-nutui-findout-bug

重现步骤

在首页中无法查看Icon 直接运行就可以看到

期望的结果是什么?

根据文档描述 icon 里面写的一样但是icon不展示

实际的结果是什么?

展示icon

环境信息

System:
OS: Windows 10 10.0.22621
CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700
Memory: 9.75 GB / 31.78 GB
Binaries:
Node: 14.18.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.22621.2134.0), Chromium (116.0.1938.54)
Internet Explorer: 11.0.22621.1
npmPackages:
uniapp-nutui: ^0.2.4 => 0.2.4

其他补充信息

No response

【Bug】node-modules方式引入组件toast小程序报错。

node-modules方式引入组件toast小程序报错。

最新版

    "@dcloudio/uni-app": "3.0.0-3080720230630001",
    "@dcloudio/uni-app-plus": "3.0.0-3080720230630001",
    "@dcloudio/uni-components": "3.0.0-3080720230630001",
    "@dcloudio/uni-h5": "3.0.0-3080720230630001",
    "@dcloudio/uni-mp-alipay": "3.0.0-3080720230630001",
    "@dcloudio/uni-mp-baidu": "3.0.0-3080720230630001",
    "@dcloudio/uni-mp-jd": "3.0.0-3080720230630001",
    "@dcloudio/uni-mp-kuaishou": "3.0.0-3080720230630001",
    "@dcloudio/uni-mp-lark": "3.0.0-3080720230630001",
    "@dcloudio/uni-mp-qq": "3.0.0-3080720230630001",
    "@dcloudio/uni-mp-toutiao": "3.0.0-3080720230630001",
    "@dcloudio/uni-mp-weixin": "3.0.0-3080720230630001",
    "@dcloudio/uni-quickapp-webview": "3.0.0-3080720230630001",
    "uniapp-nutui": "^0.1.3",

image

image

/// <reference types="vitest" />

import { resolve } from 'node:path'
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import Unocss from 'unocss/vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import UniPages from '@uni-helper/vite-plugin-uni-pages'
import UniLayouts from '@uni-helper/vite-plugin-uni-layouts'
import { NutResolver } from 'uniapp-nutui'
// @ts-expect-error failed to resolve types
import ReactivityTransform from '@vue-macros/reactivity-transform/vite'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '~/': `${resolve(__dirname, 'src')}/`,
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "uniapp-nutui/styles/variables.scss";',
      }
    }
  },
  plugins: [
    /**
     * vite-plugin-uni-pages
     * @see https://github.com/uni-helper/vite-plugin-uni-pages
     */
    UniPages({
      subPackages: [
        'src/pages-sub',
      ],
    }),

    /**
     * vite-plugin-uni-layouts
     * @see https://github.com/uni-helper/vite-plugin-uni-layouts
     */
    UniLayouts(),

    /**
     * unocss
     * @see https://github.com/antfu/unocss
     * see unocss.config.ts for config
    */
    Unocss(),

    /**
     * unplugin-auto-import 按需 import
     * @see https://github.com/antfu/unplugin-auto-import
     */
    AutoImport({
      imports: [
        'vue',
        'uni-app',
      ],
      dts: true,
      dirs: [
        './src/composables',
      ],
      vueTemplate: true,
    }),

    /**
     * unplugin-vue-components 按需引入组件
     * 注意:需注册至 uni 之前,否则不会生效
     * @see https://github.com/antfu/vite-plugin-components
     */
    Components({
      dts: 'src/components.d.ts',
      resolvers: [
        NutResolver()
      ]
    }),

    uni(),

    /**
     * Reactivity Transform
     * @see https://vue-macros.sxzz.moe/zh-CN/features/reactivity-transform.html
     */
    ReactivityTransform(),
  ],

  /**
   * Vitest
   * @see https://github.com/vitest-dev/vitest
   */
  test: {
    environment: 'jsdom',
  },
})

重新装了 @uni-helper/vite-plugin-uni-components 貌似也不行

import Components from '@uni-helper/vite-plugin-uni-components'

图片预览设置了不轮播,微信小程序依然还是轮播的

uniapp-nutui 版本号

0.2.4

平台

weapp

重现链接

https://www.uniapp-nutui.tech/components/exhibition/imagepreview.html

重现步骤

<nut-image-preview pagination-visible :is-Loop="false" :show="resData.showPreview" :images="resData.imgData" @close="hideFn" />

期望的结果是什么?

:is-Loop="false"这个属性并没有起到作用

实际的结果是什么?

实际设置了还是在轮播滚动

环境信息

image

其他补充信息

No response

(cascader) 动态加载标题

nutui-uniapp 版本号

1.1.6

平台

weapp

重现链接

https://www.uniapp-nutui.tech/components/dentry/cascader.html

重现步骤

(cascader) 动态加载标题虽然能够动态展示标题了,当选项字段长的话会导致上方的标题,无法滑动显示选择下一步的标题,需要手动滑动到指定位置,才能显示请选择
image

期望的结果是什么?

正常我顶下一步应该是这样:
image

实际的结果是什么?

同上

环境信息

System:
OS: Windows 10 10.0.22621
CPU: (16) x64 12th Gen Intel(R) Core(TM) i5-12500H
Memory: 1.14 GB / 15.69 GB
Binaries:
Node: 18.17.0 - D:\nodejs\node.EXE
npm: 9.6.7 - D:\nodejs\npm.CMD
pnpm: 8.6.10 - ~\AppData\Roaming\npm\pnpm.CMD
Browsers:
Edge: Spartan (44.22621.2283.0), Chromium (117.0.2045.31)
Internet Explorer: 11.0.22621.1
npmPackages:
nutui-uniapp: ^1.1.6 => 1.1.6

其他补充信息

DatePicker设置当前时间后有问题

nutui-uniapp 版本号

1.1.3

平台

weapp

重现链接

<nut-date-picker v-model="currentDate" :min-date="minDate" :max-date="maxDate" :is-show-chinese="true"> </nut-date-picker> const minDate = new Date(2020, 0, 1); const maxDate = new Date(); const currentDate = new Date(2022, 6, 27);

重现步骤

[设置maxDate为当前日期,假如当前日期为2023-09-12,如果我设置currentDate为2022-06-25,自动选择的日期为2022-06-12,他只能选中当前的最大日期,尽管年份是2022年,但日期不能选择超过当前日期。代码如下,显示如下]
<nut-date-picker v-model="currentDate" :min-date="minDate" :max-date="maxDate" :is-show-chinese="true"> </nut-date-picker> const minDate = new Date(2020, 0, 1); const maxDate = new Date(); const currentDate = new Date(2022, 6, 27);

image

期望的结果是什么?

期望设置最大日期是当前日期后,能够正确回显日期,不会被当前日期限制,无法正确回显。

实际的结果是什么?

实际结果是,我将maxDate设置为当前日期,currentDate会受到当前日期影响,回显的时候不能正确显示日期,日期总是不会超过当前日期,

环境信息

No response

其他补充信息

No response

小程序 demo 手写签名不可用

设备: iphone 12 iOS15.4.1
微信 v 8.0.33

故障:
滑动手写签名区域,没有反应。PS:按钮名字是否错了,应该是 “确认” 而非 “确实”

dialog按钮样式存在问题

nutui-uniapp 版本号

1.1.8

平台

weapp

重现链接

<nut-dialog title="xxx" content="xxxxxx" v-model:visible="deleteVisible" @cancel="onCancel" @ok="onOk" />

重现步骤

按照官方文档教程,微信小程序中使用dialog弹窗,底部按钮样式变形

期望的结果是什么?

期望如图所示,底部按钮正常显示
image****

实际的结果是什么?

实际结果
image

环境信息

No response

其他补充信息

No response

[FR]: 希望所有组件都能套入外层class

这个功能解决了什么问题?

因为几乎所有项目的样式都有略微的差别,而目前组件上提供的无法满足正常的项目需求,自定义样式很麻烦.所以能不能提供一个class的props套在组件的最外层,或者像antd的modal一样,提供一个className和一个wrapClassName.这样开发者自定义样式就非常方便了.

你期望的组件设计是怎样的?

props: {
className: 'xxx'
}

component: {
class="nutui-xxx" :class="className"
}

Elevator 电梯楼层有问题

nutui-uniapp 版本号

1.1.3

平台

h5

重现链接

https://www.uniapp-nutui.tech/components/nav/elevator.html

重现步骤

<nut-elevator :index-list="dataList" :height="260"></nut-elevator>

期望的结果是什么?

在索引条只有点击有用,滑动也应该有效果

实际的结果是什么?

在索引条上手机滑动没有效果
function touchMove(e: TouchEvent) {
const firstTouch = e.touches[0]
state.touchState.y2 = firstTouch.pageY
const delta = ((state.touchState.y2 - state.touchState.y1) / spaceHeight) | 0
state.codeIndex = state.anchorIndex + delta
scrollTo(state.currentIndex)
}可能有问题

环境信息

No response

其他补充信息

No response

1.1.2版本报错,无法安装

uniapp-nutui 版本号

1.1.2

平台

h5

重现链接

重现步骤

yarn add [email protected]

181694141585_ pic_hd

期望的结果是什么?

能正常安装版本1.1.2

实际的结果是什么?

安装报错

环境信息

No response

其他补充信息

No response

DatePicker设置当前时间后有问题

nutui-uniapp 版本号

1.1.3

平台

weapp

重现链接

<nut-date-picker v-model="currentDate" :min-date="minDate" :max-date="maxDate" :is-show-chinese="true"> </nut-date-picker> const minDate = new Date(2020, 0, 1); const maxDate = new Date(); const currentDate = new Date(2022, 6, 27);

重现步骤

[设置maxDate为当前日期,假如当前日期为2023-09-12,如果我设置currentDate为2022-06-25,自动选择的日期为2022-06-12,他只能选中当前的最大日期,尽管年份是2022年,但日期不能选择超过当前日期。代码如下,显示如下]
<nut-date-picker v-model="currentDate" :min-date="minDate" :max-date="maxDate" :is-show-chinese="true"> </nut-date-picker> const minDate = new Date(2020, 0, 1); const maxDate = new Date(); const currentDate = new Date(2022, 6, 27);

image

期望的结果是什么?

期望设置最大日期是当前日期后,能够正确回显日期,不会被当前日期限制,无法正确回显。

实际的结果是什么?

实际结果是,我将maxDate设置为当前日期,currentDate会受到当前日期影响,回显的时候不能正确显示日期,日期总是不会超过当前日期,

环境信息

No response

其他补充信息

No response

级联选择器小程序选择后上面请选择还是没变

nutui-uniapp 版本号

1.1.3

平台

weapp

重现链接

https://www.uniapp-nutui.tech/components/dentry/cascader.html

重现步骤

代码就不写了就是你上面的基础代码,我在小程序上面直接复制也是有问题
image

期望的结果是什么?

选择后上面请选择并没有改变成对应的名称

实际的结果是什么?

image

环境信息

System:
OS: Windows 10 10.0.22621
CPU: (16) x64 12th Gen Intel(R) Core(TM) i5-12500H
Memory: 1.14 GB / 15.69 GB
Binaries:
Node: 18.17.0 - D:\nodejs\node.EXE
npm: 9.6.7 - D:\nodejs\npm.CMD
pnpm: 8.6.10 - ~\AppData\Roaming\npm\pnpm.CMD
Browsers:
Edge: Spartan (44.22621.2134.0), Chromium (116.0.1938.69)
Internet Explorer: 11.0.22621.1

其他补充信息

版本上面已写

组件在小程序使用异常

使用uni_modules导入,组件在小程序使用异常,在H5显示正常

`

Component is not found in path "uni_modules/nutui-uni/components/nutui-uni/components/popup/popup" (using by "uni_modules/nutui-uni/components/nutui-uni/components/menuitem/menuitem")(env: Windows,mp,1.06.2306281; lib: 2.33.0)

`

image

商品卡片vipPrice不填也会展示

uniapp-nutui 版本号

0.2.5

平台

h5

重现链接

https://github.com/Yer11214/uniapp-nutui-findout-bug.git

重现步骤

npm run dev:h5 运行,首页中就可以看到 代码中没写vipPrice但是展示出了0元

期望的结果是什么?

不填不展示

实际的结果是什么?

不填不展示

环境信息

System:
OS: Windows 10 10.0.22621
CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700
Memory: 9.16 GB / 31.78 GB
Binaries:
Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 8.3.1 - C:\Program Files\nodejs\npm.CMD
pnpm: 8.6.12 - ~\AppData\Roaming\npm\pnpm.CMD
Browsers:
Edge: Spartan (44.22621.2134.0), Chromium (116.0.1938.62)
Internet Explorer: 11.0.22621.1
npmPackages:
uniapp-nutui: ^0.2.4 => 0.2.4

其他补充信息

No response

关于组件在使用时代码补全和类型推导的问题

操作系统:macos13.5
开发工具:vscode version 1.81
uniapp版本:3.0.0
uniapp-nutui组件库版本:0.2.2

问题描述:使用vscode开发时,需要借助插件: nutui-vscode-extension,才能获得nutui每个组件的类型推导能力,但我使用monorepo结构组织项目时,偶然发现,如果在uniapp-nutui包中的开发时依赖中加入@vue/runtime-core ,就像这样:

{
"devDependencies": {
    "@vue/runtime-core": "^3.2.47"
  },
}

之后在我的项目中把 tsconfig.jsontypes选项中加入 "uniapp-nutui/global.d.ts",像这样:

 {
 "types": [
      "@dcloudio/types",
      "./components.d.ts",
      **"uniapp-nutui/global.d.ts",**
      "wm-uni-design/components.d.ts",
      "vite/client",
      "uni-app-types"
    ]
}

然后重新安装依赖并重新打开vscode,此时同样可以获得非常友好的提示:
image

image

我了解这是volar在发挥作用。个人认为这是目前最好的获得uniapp组件类型推导的方式。

之后在项目中如果使用uniapp提供的easycom去自动加载依赖:

{
 "easycom": {
    "autoscan": true,
    "custom": {
      "^nut-(.*)?-(.*)": "uniapp-nutui/components/$1$2/$1$2.vue",
      "^nut-(.*)": "uniapp-nutui/components/$1/$1.vue",
    }
  }
}

甚至都不需要使用 @uni-helper/vite-plugin-uni-componentsresolvers 中注册 NutResolver() ,这样插件自动产生的 components.d.ts 仅仅只会产生项目中自己的全局组件类型,而不会多余生成nutui相关的组件类型声明。

组件库官网文档挂了,访问不了

nutui-uniapp 版本号

1.00

平台

h5

重现链接

官网文档地址访问不了

重现步骤

官网文档地址访问不了

期望的结果是什么?

官网文档地址访问不了

实际的结果是什么?

官网文档地址访问不了

环境信息

No response

其他补充信息

官网文档地址访问不了

大转盘-扇形颜色bug

大转盘-扇形颜色canvas不能画出来
console.log('-------------------------------')
console.log('ctx.fillStyle', ctx.fillStyle)
打印显示undefined

bug:navbar

uniapp-nutui-demo

pnpm dev:mp-weixin
<script setup lang="ts">
  const title = ref('订单详情')
  function onBack() {
    console.log('back');
  }
  function onClick() {
    console.log(title.value);
  }
</script>

<template>
   <nut-navbar fixed placeholder safe-area-inset-top @on-click-back="onBack" @on-click-title="onClick" :title="title">
    <template #left>
      <div>返回</div>
    </template>
    <template #right>
      <nut-icon name="share-n" share-n width="16px" />
    </template>
  </nut-navbar>
</template>

https://github.com/yang1206/uniapp-nutui/blob/a09a3f2339b43a09bf1727168bc0a56e86150a22/packages/nutui/components/navbar/navbar.vue#L87

这里的样式"nut-navbar--safe-area-inset-top"在小程序端并不会生效
建议加入条件判断

https://github.com/yang1206/uniapp-nutui/blob/a09a3f2339b43a09bf1727168bc0a56e86150a22/packages/nutui/components/navbar/navbar.vue#L22-L26

const styles: ComputedRef = computed(() => {
  return {
    zIndex: zIndex.value,
   // #ifdef MP
   paddingTop: `${pxCheck(statusBarHeight)}`
   // #endif
  }
})

avatar type errors

nutui-uniapp 版本号

1.1.7

平台

weapp

重现链接

https://github.com/MillCloud/presets/tree/main/uni-app

重现步骤

# 启用 corepack
npm install --location=global --force corepack
corepack enable
# 克隆仓库
npx tiged MillCloud/presets/uni-app test-uni-app
# 进入目录
cd test-uni-app
# 安装依赖
npm install --force
# 检查类型
npm run check:types

期望的结果是什么?

无报错

实际的结果是什么?

image

环境信息

image

其他补充信息

image

感谢作者的努力!

Input 输入框 autofocus报错

uniapp-nutui 版本号

1.0.0

平台

h5

重现链接

重现步骤

use-transition.ts:137 Uncaught (in promise) TypeError: inputRef.value.focus is not a function
at input.vue:170:20
at vue.runtime.esm.js:4109:40
at callWithErrorHandling (vue.runtime.esm.js:1375:22)
at callWithAsyncErrorHandling (vue.runtime.esm.js:1384:21)
at hook.__weh.hook.__weh (vue.runtime.esm.js:4083:29)
at flushPostFlushCbs (vue.runtime.esm.js:1562:47)
at flushJobs (vue.runtime.esm.js:1616:9)

期望的结果是什么?

input组件没有获取焦点

实际的结果是什么?

input组件能获取焦点

环境信息

No response

其他补充信息

No response

nut-address自定义地址显示问题

image
image
address组件按照官网demo选择自定义地址,标题栏中会出现返回箭头,点击跳转到配送至页面,如图所示,而官方示例中没有。

支付宝小程序不支持?? 等链式操作符

uniapp-nutui 版本号

1.1.1

平台

alipay

重现链接

重现步骤

使用nut-picker组件, 支付宝小程序编译报错
image

期望的结果是什么?

在支付宝小程序下正常运行

实际的结果是什么?

无法编译支付宝小程序

环境信息

System:
OS: macOS 13.3.1
CPU: (10) arm64 Apple M1 Pro
Memory: 91.92 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 19.5.0 - /opt/homebrew/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 9.3.1 - /opt/homebrew/bin/npm
Browsers:
Chrome: 116.0.5845.179
Safari: 16.4

其他补充信息

No response

infinite-loading组件无法使用

`

<nut-infinite-loading v-model="infinityValue" load-txt="Loading..." load-more-txt="End~" :has-more="hasMore" @load-more="loadMore" :threshold="500">

{{ index }}


<script setup> import { ref } from 'vue' const cycle = ref(0) const tabsValue = ref(0) const sum = ref(24) const infinityValue = ref(false) const hasMore = ref(true) const loadMore = (done) => { setTimeout(() => { sum.value = sum.value + 24 cycle.value++ if (cycle.value > 2) hasMore.value = false infinityValue.value = false }, 1000) } </script> <style> .test { padding: 12px 0 12px 20px; border-top: 1px solid #eee; } </style>

`

无法触发 loadMore 事件

address-list组件小程序端,del和edit事件无法阻止冒泡

nutui-uniapp 版本号

1.1.5

平台

weapp

重现链接

<nut-address-list :data="data" @click-item="clickItem" @del-icon="delClick" @edit-icon="editClick" :show-bottom-button="false" :options="dataOptions" > <script lang="ts"> import { ref, reactive } from 'vue'; export default { setup() { const data = ref([ { testid:3, testaddressName:'姓名', phone:'1234567', defaultAddress:false, fullAddress:'北京市通州区测试测试测试测试测试测试测试测试测试' }, { testid:4, testaddressName:'姓名', phone:'1234567', defaultAddress:true, fullAddress:'北京市通州区测试测试测试测试测试测试测试测试测试' }, ]); const dataOptions = reactive({ id: 'testid', addressDetail:'testaddressDetail', addressName:'testaddressName' }); const clickItem = ()=>{ console.log('Click To Address'); } const delClick = ()=>{ console.log('Click To Delete'); } const editClick = ()=>{ console.log('Click To Edit'); } return { data, clickItem, delClick, editClick, dataOptions }; } }; </script>

重现步骤

<script lang="ts"> import { ref, reactive } from 'vue'; export default { setup() { const data = ref([ { testid:3, testaddressName:'姓名', phone:'123****4567', defaultAddress:false, fullAddress:'北京市通州区测试测试测试测试测试测试测试测试测试' }, { testid:4, testaddressName:'姓名', phone:'123****4567', defaultAddress:true, fullAddress:'北京市通州区测试测试测试测试测试测试测试测试测试' }, ]); const dataOptions = reactive({ id: 'testid', addressDetail:'testaddressDetail', addressName:'testaddressName' }); const clickItem = ()=>{ console.log('Click To Address'); } const delClick = ()=>{ console.log('Click To Delete'); } const editClick = ()=>{ console.log('Click To Edit'); } return { data, clickItem, delClick, editClick, dataOptions }; } }; </script>

期望的结果是什么?

两个图标阻止冒泡

实际的结果是什么?

未实现阻止冒泡,小程序不能使用event.stopPropagation();,组件内部应该使用.stop

环境信息

No response

其他补充信息

No response

nut-uploader

nutui-uniapp 版本号

1.1.4

平台

weapp

重现链接

暂无

重现步骤

上传图片 {{ '(' + pageData.fileList.length + '/' + 3 + ')' }}

期望的结果是什么?

现在的版本



改为 uploadIcon 才能生效


实际的结果是什么?

自定义的插槽不生效

环境信息

No response

其他补充信息

No response

标签的ts类型报错

nutui-uniapp 版本号

1.1.10

平台

h5, 其他小程序

重现链接

暂无

重现步骤

按照官方提供的快速上手指引进行配置搭建。最后普通的标签报错.
WeChat20809bdb44475ce1181df679c2092da1
初步发现,好像是无法识别view这个标签。使用其他标签或者html标签都不会报错。

期望的结果是什么?

无报错

实际的结果是什么?

报错咯

环境信息

No response

其他补充信息

No response

[FR]: 项目启动报错

这个功能解决了什么问题?

Sourcemap for "E:/develop/quark/quark-uniapp/node_modules/vite/dist/client/client.mjs" points to missing source files​
​Sourcemap for "E:/develop/quark/quark-uniapp/node_modules/vite/dist/client/env.mjs" points to missing source files​
Cannot read properties of undefined (reading 'length')
12:49:16 [vite] Cannot read properties of undefined (reading 'length')
12:49:36 [vite] Cannot read properties of undefined (reading 'length') (x2)

你期望的组件设计是怎样的?

Sourcemap for "E:/develop/quark/quark-uniapp/node_modules/vite/dist/client/client.mjs" points to missing source files​
​Sourcemap for "E:/develop/quark/quark-uniapp/node_modules/vite/dist/client/env.mjs" points to missing source files​
Cannot read properties of undefined (reading 'length')
12:49:16 [vite] Cannot read properties of undefined (reading 'length')
12:49:36 [vite] Cannot read properties of undefined (reading 'length') (x2)

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.