dcloudio / uni-ui Goto Github PK

uni-ui/packages/uni-list-item/uni-list-item.vue

目前右侧只有角标/右箭头/Switch

希望在右侧增加一个可以自定义样式的slot

uniRate传参size 小于44upx即【uni.upx2px(44)】时候 选中的星星会发生向下偏移 请注意修复

错误提示：

[HBuilder] 18:04:55.603 Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
[HBuilder] 18:04:55.603 ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
[HBuilder] 18:04:55.636 Error: Missing binding /Users/bruce/Documents/work/my/tn/test/my-project/node_modules/node-sass/vendor/darwin-x64-57/binding.node
[HBuilder] 18:04:55.636 Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 8.x
[HBuilder] 18:04:55.669 Found bindings for the following environments:
[HBuilder] 18:04:55.670   - OS X 64-bit with Node.js 12.x
[HBuilder] 18:04:55.702 This usually happens because your environment has changed since running `npm install`.
[HBuilder] 18:04:55.733 Run `npm rebuild node-sass` to download the binding for your current environment.
[HBuilder] 18:04:55.763     at module.exports (/Users/bruce/Documents/work/my/tn/test/my-project/node_modules/node-sass/lib/binding.js:15:13)
[HBuilder] 18:04:55.793     at Object.<anonymous> (/Users/bruce/Documents/work/my/tn/test/my-project/node_modules/node-sass/lib/index.js:14:35)
[HBuilder] 18:04:55.794     at Module._compile (module.js:652:30)
[HBuilder] 18:04:55.824     at Object.Module._extensions..js (module.js:663:10)
[HBuilder] 18:04:55.825     at Module.load (module.js:565:32)
[HBuilder] 18:04:55.855     at tryModuleLoad (module.js:505:12)
[HBuilder] 18:04:55.855     at Function.Module._load (module.js:497:3)
[HBuilder] 18:04:55.886     at Module.require (module.js:596:17)
[HBuilder] 18:04:55.887     at require (internal/module.js:11:18)
[HBuilder] 18:04:55.916     at Object.sassLoader (/Users/bruce/Documents/work/my/tn/test/my-project/node_modules/sass-loader/lib/loader.js:46:72)
[HBuilder] 18:04:55.917     at runLoaders (/Users/bruce/Documents/work/my/tn/test/my-project/node_modules/webpack/lib/NormalModule.js:301:20)
[HBuilder] 18:04:55.947     at /Users/bruce/Documents/work/my/tn/test/my-project/node_modules/loader-runner/lib/LoaderRunner.js:367:11
[HBuilder] 18:04:55.948     at /Users/bruce/Documents/work/my/tn/test/my-project/node_modules/loader-runner/lib/LoaderRunner.js:233:18
[HBuilder] 18:04:55.977     at runSyncOrAsync (/Users/bruce/Documents/work/my/tn/test/my-project/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
[HBuilder] 18:04:55.977     at iterateNormalLoaders (/Users/bruce/Documents/work/my/tn/test/my-project/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
[HBuilder] 18:04:56.008     at iterateNormalLoaders (/Users/bruce/Documents/work/my/tn/test/my-project/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
[HBuilder] 18:04:56.009     at /Users/bruce/Documents/work/my/tn/test/my-project/node_modules/loader-runner/lib/LoaderRunner.js:236:3
[HBuilder] 18:04:56.038     at Object.context.callback (/Users/bruce/Documents/work/my/tn/test/my-project/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
[HBuilder] 18:04:56.039     at Object.module.exports (/Users/bruce/Documents/work/my/tn/test/my-project/node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader/index.js:60:10)
[HBuilder] 18:04:56.070  ERROR  Build failed with errors.
[HBuilder] 18:04:56.070 项目 'my-project'导出失败

上一个版本打包完，组件（uni-rate、uni-drawer）还可以正常显示的

<view class="item" @click="goPath"> <uni-swipe-action :options="options" class="item" @click.stop="listButtonClick"> <text>test</text> </uni-swipe-action> </view>

我看了下源码，都是中文注释，我猜应该是国人开发的，所以我还是用中文说吧。
现在呢又一个问题在uni-nav-bar，当right-text 使用2个中文字符的时候，它只显示一个中文字符，在iphonex下。

详细问题描述

最新版本的 UNI-APP 项目
使用 CLI 创建 UNI-APP 项目，将 index 和 vue 文件分离，
分离后 ts 文件中引入
import {uniBadge} from '@dcloudio/uni-ui' 会发生错误;

而在 2019-09-17 之前的版本中，则没有这个问题;

[内容]

重现步骤

[步骤]

1. vue create -p dcloudio/uni-preset-vue my-project

2. cd my-project

3. npm install @dcloudio/uni-ui node-sass sass-loader

4. 将 pages/index/index.vue 文件中 script 部分拆分到 index.ts

index.vue 中 script 部分改为

<script lang="ts" src='./index.ts'></script>

index.ts 内容如下:

import Vue from 'vue';
import {uniBadge} from '@dcloudio/uni-ui'; // 引入 uniBadge组件
// import uniBadge from '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue';  // 使用全路径方式引入可以正常工作;
export default Vue.extend({
	components: {uniBadge},
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	});

5. npm run serve

[结果]
安装 @dcloudio/uni-ui包、和相关依赖包
[期望]
正常编译（旧的版本，

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app，也需要在此说明]

[IDE版本号] HBuilderX 2.3.3.20190923

组件使用
组件名 uniCountdown
组件文件名 uni-count-down

引入文件时查找文件uni-countdown 到时引入错误

详细问题描述
[内容]

A组件有slot B组件有slot 在微信小程序端会出现B组件的slot会分发到A组件的slot.
通过查看微信小程序端的调试工具，source 发现了这个问题。提供了附件，麻烦处理一下

重现步骤
[步骤]

编译到微信小程序

[结果]

slot分发出错

IDE运行环境说明
HBuilderX 2.3.3.20190923

win10

uni-app运行环境说明
H5没问题，微信小程序有问题

HBuilderX创建

新的自定义组件模式

附件

怎么将项目运行到小程序中呢。package.json中好像也没有找到脚本。小程序好像无法用Vue.component来注册全局组件。

官方代码的icon图标名称与npm下载下来的不符，一个叫uni-cons，一个叫uni-icon。麻烦发布的时候仔细一些。文档介绍跟代码也不符。

例如uni-app的card，head部分就没有插槽，如果想做一个head右侧文字点击查看更多的功能，就没法做，可参考https://youzan.github.io/vant-weapp/#/card
还有list，强烈建议增加右侧插槽功能，picker和cell是绝配，然而现在只能自己布局。。。
插槽功能的设计建议参考vant和mint-ui，都很优雅使用，建议所有组件都增加扩展一下插槽功能，基本上大多数组件的传入参数所显示的dom都建议扩展成默认+slot，这样自由度更高

I need to view the UI demo online

点击效果：

uniapp当中的循环当中使用有bug,
我在两个循环当中使用NumberBox插件
发现，### 一个NumberBox 的值变动，另一个NumberBox也变动

在线等

引入后, 在小程序端 loadMore 区域展示 Undefined
H5 端没问题

****2种引入方式都已尝试 : 在小程序内均展示为 Undefined ****
1: 本地 components 文件下 已经下载load-more.vue 文件

import uniLoadMore from "@/components/load-more/load-more.vue"

2: npm install @dcloudio/uni-ui 安装

import { uniLoadMore } from '@dcloudio/uni-ui'

页面 template 内

<view class="ul">
    <view class="li" v-for="(item,index) in orderList" :key="index">
    </view>
    <uni-load-more :status="status" :show-icon="true" v-if="showLoadMore"></uni-load-more>
</view>

页面 data 内

status: 'more',
showLoadMore: true,
loadMoreText: "加载中...",

****页面 执行的方法 ****

       // 监听页面卸载
        onUnload() {
            this.max = 0,
            this.orderList = [],
            this.status = "more",
            this.showLoadMore = false;
        },
        // 上拉加载
        onReachBottom() {
            var that = this;
            console.log("onReachBottom");
            
            that.status = 'loading';
            that.showLoadMore = true;
            setTimeout(() => {
                that.newCurrent += 1;
                that.listFn(that.newCurrent,that.newPagesSize);
            }, 300);
        },
        // 下拉刷新
        onPullDownRefresh() {
            console.log('onPullDownRefresh');
            this.newCurrent = 1;
            this.newPagesSize = 10;
            setTimeout(() => {
                this.listFn(this.newCurrent,this.newPagesSize);
            }, 300);
        },
        methods: {
            listFn(nowCurrent,nowSize) {
                // 数据进行渲染
            },
        }

****左侧为H5端,右侧为小程序端 ****
http://qntemp.bejson.com/upload/22017058156632464loadMore%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AB%AF%E9%97%AE%E9%A2%98.png

-------code-------

<uni-number-box :value="selectedCount" @change="v => selectedCount = v" :min="minCount" :max="maxCount">

------code--------

----出现VUE 禁止修改prop警告
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"

found in

---> node-modules/@dcloudio/uni-ui/lib/uni-number-box/uni-number-box
node-modules/@dcloudio/uni-ui/lib/uni-popup/uni-popup

既然uni-ui是支持H5的，网页版demo什么时候发布？ uni-ui.io啥的demo页面好提前体验一下。

uni-list-item绑定了touch事件，发现提示错误。
代码：
<uni-list> <uni-list-item @touchstart="touchStart" @touchmove="touchMove" v-for="(item,index) in task.data" :title="item.content" class="uni-list-item" show-arrow="false"></uni-list-item> </uni-list>
运行到微信开发工具报错：
VM657:1 thirdScriptError Cannot read property 'touches' of undefined; [Component] Event Handler Error @ pages/index/Index#handleEvent TypeError: Cannot read property 'touches' of undefined

<uni-popup :show="type === 'itemList'" position="middle" mode="fiexd" @hidePopup="togglePopup('')">

fiexd（固定显示，有边框背景）

我在使用‘SwiperDot 轮播图指示点’组件时发现按照文档操作不生效，查找node_modules下的依赖发现@dcloudio/uni-ui包中的index.js各组件的导出路径有问题，我只能通过@dcloudio/uni-ui/lib/的方式引入 🐷

index.js中原代码如下：
import * as uniSwiperDot/uniSwiperDot.vue from './uni-swiper-dot/uni-swiper-dot.vue/uni-swiper-dot/uni-swiper-dot.vue.vue'

我注意到uni-ui/build/build-lib.js:54行：
return import * as ${names.join('')} from './${name}/${name}.vue'``

🐷

用在app上面的时候，数据不显示，这是为什么，有的时候还会莫名的报错，uni
.createSelectorQuery()
.in(this)
.select(#${this.elId})
.boundingClientRect()
.exec(ret => {
this.btnGroupWidth = ret[0].width;
});
说: Cannot read property 'width' of null

uni-popup组件有maskClick配置，但是使用popup组件的页面无法处理关闭的事件，但是增加按钮显式调用的交互有点不合理，所以强烈建议，支持回调

图标组件在H5下不会显示，小程序下会显示

申请将NavBar、uniicons等插件也加入到@cloudio/uni-ui项目

目前未在uni-ui项目中找到，无法使用npm安装，只能单独在项目中引入，为方便使用，申请将NavBar、uniicons等插件也加入到此项目

H5端可以显示：

微信小程序无法显示：

app端：

代码如下：

uni-nav-bar组建中的shadow设置无效,原因是该组件源码中的,shadow类由border属性判断了.

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Error: \?\e:\win32-x64-64_binding.node is not a valid Win32 application.

导入组件出问题。

这个top: 50%的缘故

npm 安装uniapp ui支付宝上传代码失败(不支持包含“@”文件名)。

import {uniBadge} from '@dcloudio/uni-ui';
export default {
components: {
uniBadge
},

遇到的问题

在mpvue项目里面引入uni-ui
编译时报错,没有引入sass变量

错误截图如下

期望的效果

直接把css样式编译到ui里面去吧
模板市场优秀的第3方模板,也可以按照规范,统一到官方ui库里面进行维护

https://ext.dcloud.net.cn/plugin?id=30
noticeBar显示更多的demo如下
<uni-notice-bar
@Getmore="getMore"
more-text="查看更多"
single="true"
text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏">

实际效果不会显示‘查看更多’的字样。

github中组件已经添加了一个属性 ‘show-get-more’

<uni-notice-bar
@Getmore="getMore"
:show-get-more="true"
more-text="查看更多"
single="true"
text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏">

官方的文档和demo没有更新。请及时更新一下。

已经提交 pull request
https://github.com/dcloudio/uni-ui/pull/38

uni-drawer点击遮罩关闭后无法再打开 visible即使设置为true也没有用

代码赶快同步，h5字体图片不显示的问题赶快处理，uni-icons uni-icon 命名问题

15:48:41.259 INFO Starting development server...
15:48:58.391 文件查找失败：'./index.wxs?vue&type=custom&index=0&blockType=script&issuerPath=F%3A%5Canjoy%5Cproject%5CuniAppBuyer%5Cnode_modules%5C%40dcloudio%5Cuni-ui%5Clib%5Cuni-swipe-action%5Cuni-swipe-action.vue&module=swipe&lang=wxs' at node_modules@dcloudio\uni-ui\lib\uni-swipe-action\uni-swipe-action.vue:21
15:48:58.392 文件查找失败：'./mp' at node_modules@dcloudio\uni-ui\lib\uni-swipe-action\uni-swipe-action.vue:33

目前在使用 uni-ui 的 popup 组件，需要用到 change 属性，看到更新记录里是 1.1.3 版本新增支持的。项目依赖是使用 npm 安装的，但是 uni-ui 的 npm 包还只有 1.0.0 版本，不知何时可以更新到最新？

npm run dev:mp-weixin出现You may need an appropriate loader to handle this file type

看见一个已关闭的Issuse说已解决 实测并未解决 测试环境H5/微信小程序
通过修改源码在遮罩层上添加@touchmove.stop.prevent="moveHandle"也无效

当我在main.js中引入uni-ui组件
import { uniBadge } from '@dcloudio/uni-ui';
Vue.component('uniBadge',uniBadge)
然后运行在H5浏览器就会报错：
Uncaught ReferenceError: getApp is not defined
为什么？官网不是说跨全端的吗？