youzan / vant Goto Github PK

当外部改变checkbox的值时，不应该触发change事件。
应该是checkbox本身点击后才触发change事件。
目前要实现一个全选功能，通过计算属性去检测checkboxGroup中选中的数组和所有数组是否一样，一样就让另外一个单独的checkbox的值变为true，即打上勾，如果不一样，则不打勾。可是当计算属性中改变全选checkbox值之后，触发了这个change事件。以前在iview的checkbox组件中是可以实现上述功能的。
求帮助，蟹蟹。

请认真写 PR 的标题，会用于生成 change log。

Do you want to request a feature or report a bug?

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/n879nke7/).

What is the expected behavior?
建议可以看看elementUi的issues 入口！

Which versions of Vant and Vue, and which browser / OS are affected by this issue? Did this work in previous versions of Vant?

https://www.youzanyun.com/zanui/captain/component/
GoodsAction 商品操作组件为什么需要安装GoodsList组件？

为什么要设置

* {
  box-sizing: content-box;
}

这样设置导致了很多问题。这个属性设置为border-box，更合理一些。

如题

请问在微信支付的回调函数里可以直接使用Toast('something')或者是Dialog吗？蟹蟹！！

分页功能还是很常用的，能不能增加一个？

按照官网的作法
安装 babel-plugin-import 插件
npm i babel-plugin-import -D
// 在 .babelrc 或 babel-loader 中添加插件配置
{
"plugins": [
["import", { "libraryName": "vant", "style": true }]
]
}
问题 在 .babelrc中只要添加
["import", { "libraryName": "vant", "style": true }]
然后npm run dev 就开始报错了

报错主要说是在 main.js 找不到 “import” 相对于目录

报错的代码

error in ./src/main.js
Module build failed: Error: Couldn't find preset "import" relative to directory "/Users/xxxxxxx/Desktop/xxxxxx"

我看到现在vant里面似乎只是用的px 来标注width，padding等，为何不考虑rem方案自适应屏幕的宽度呢。我想知道不这么做的原因是什么，因为我最近也在考虑做组件库，所以参考各个开源库，故有此问

请认真写 PR 的标题，会用于生成 change log。

Do you want to request a feature or report a bug?
bug
What is the current behavior?
你们的在线demo例子，Sku商品购买组件，基础用法例子里，（安卓手机微信浏览器）输入input在上半屏幕里，会出现看不到输入框的位置。。。

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/n879nke7/).

What is the expected behavior?
可以看到输入框的位置
Which versions of Vant and Vue, and which browser / OS are affected by this issue? Did this work in previous versions of Vant?

MacOS下npm run dev报错

node -v 8.0.0
vant -v 0.9.9

 ERROR  Failed to compile with 1 errors                                                     10:04:09

 error  in ./packages/.DS_Store

Module parse failed: /Users/apple/Documents/github/vant/packages/.DS_Store Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

 @ ./packages/index.js 1:0-34
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 packages

需要在get-components.js的excludes里加入'.DS_Store'

 <van-swipe>
            <van-swipe-item v-for="(img, index) in images" :key="index">
                <a href="https://youzan.com" target="_blank">
                    <img v-lazy="img" alt="">
                </a>
            </van-swipe-item>
</van-swipe>

使用 提示如下：
SVG's SMIL animations (, , etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.

页面显示空白

"devDependencies": {
"axios": "^0.15.3",
"bootstrap-sass": "^3.3.7",
"cross-env": "^3.2.3",
"jquery": "^3.1.1",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"vue": "^2.1.10"
},
"dependencies": {
"mint-ui": "^2.2.3",
"pingpp-js": "^2.1.8",
"vant": "^0.6.2"
}

如果想自定义icon，除了自己引入字体文件，有没有其他的方式增加到默认的ICON库中。

为什么在methods中添加了onSelect方法，但是无效，add事件和edit事件是可以的。

<van-address-list
v-model="chosenAddressId"
:list="list"
@edit="onEdit"
@select="onSelect"
/>

请认真写 PR 的标题，会用于生成 change log。

Do you want to request a feature or report a bug?

What is the current behavior?
Swipe image not displayed

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/n879nke7/).
I am trying out the swipe demo.

1. installed vue webpack template
2. installed vant according to the doc
3. installed babel-plugin-import and updated .babelrc
4. created a component and copied demo code

<template>
    <van-swipe auto-play @pagechange:end="handlePageEnd">
        <van-swipe-item v-for="(img, index) in autoImages" :key="index">
            <img v-lazy="img" alt="">
        </van-swipe-item>
    </van-swipe>
</template>

<script>
    import { Swipe } from 'vant';
    import { SwipeItem } from 'vant';
    import 'vant/lib/vant-css/swipe.css';
    export default {
        name: 'swipe',
        components: {
            'van-swipe': Swipe,
            'van-swipe-item': SwipeItem
        },
        data() {
            return {
                autoImages: [
                    'https://img.yzcdn.cn/upload_files/2017/03/09/FvkZahKoq1vkxLQFdVWeLf2UCqDz.png',
                    'https://img.yzcdn.cn/upload_files/2017/03/09/Fk0rpe_svu9d5Xk3MUCWd1QeMXOu.png'
                ]
            }
        },
        methods: {
            handlePageEnd(page, index) {
                console.log(page, index);
            }
        }
    }
</script>

<style>

</style>

5. import vue and Lazyload in main.js

In Chrome dev-tool the code looks good and I can see the element move across the screen. however, the image itself does not show. Please see a screenshot below:

What is the expected behavior?
It should behave like the demo (https://www.youzanyun.com/zanui/vue/examples/component/swipe)

Which versions of Vant and Vue, and which browser / OS are affected by this issue? Did this work in previous versions of Vant?
vue: 2.8.2
vant: 0.8.4
OS: Mac OSX
Browser: chrome

datetime-picker 的取消事件无法触发。更改事件触发的是vant.js中的事件，不执行页面指定的事件。完成事件没有问题

<van-datetime-picker
v-model="currentDate"
type="date"
format="yyyy-mm-dd"
@change="handlePickerChange"
@cancel="handlePickerCancel"
@confirm="handlePickerConfirm">

见LICENSE：
Copyright (c) 2016 ElemeFE

Error: Cannot find module 'gulp-clean-css'

查看package.json里面并没有gulp-clean-css这个包模块，而是用的另一个gulp-cssmin，但是却在packages/vant-css/gulpfile.js里面加载的是gulp-clean-css，从而导致了错误的发生

使用vue-cli搭建完项目根据vant文档我继续在根目录中执行

npm i vant -S

安装成功我在我的main.js文件中完整引入组件

import Vue from 'vue'
import App from './App'
import router from './router'
import ZanUI from 'vant'
import 'vant/lib/vant-css/index.css';
Vue.use(ZanUI)

然后在页面中注册并使用基础组件，到这里都没有问题，我想使用业务组件，在使用GoodsList 商品列表组件过程中，我根据文档继续安装

npm i captain-goods-list -S

安装成功后，我在页面引入并注册组件

import GoodsList from 'captain-goods-list';
export default{
	components: {
   		'cap-goods-list':GoodsList
	}
}

接着我继续根据文档引入该组件的css文件，我是在.vue文件中style标签内引入，尝试过在js中import 'captain-goods-list'; 引入无果

@import 'captain-goods-list';

这里报错，Can't resolve './captain-goods-list.less' in 'C:\web\paintingStore\paintingStore\painting\src\pages' in C:\web\paintingStore\paintingStore\painting\src\pages\index.vue (line 197, column 4) 我猜测可能是webpack配置问题，但是当我注释掉这个css文件引入时，开始在main.js文件中引入的基础组件css也报错了，

Module build failed: Unknown word (5:1)

  3 | // load the styles
  4 | var content = require("!!../../../.0.28.4@css-loader/index.js?{\"minimize\":false,\"sourceMap\":false}!./index.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
    | ^
  6 | if(content.locals) module.exports = content.locals;
  7 | // add the styles to the DOM
  8 | var update = require("!../../../.3.0.1@vue-style-loader/lib/addStylesClient.js")("140cd8f9", content, false);


 @ ./~/.0.6.6@vant/lib/vant-css/index.css 4:14-172 18:2-22:4 19:20-178
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

当我注释掉所有有关这个GoodsList 业务组件再重新执行

npm i vant -S

错误才消失，我又继续尝试安装其他业务组件也导致这个问题，当我安装好业务组件再启动项目基础组件的css引入便会失败，知道我注释掉所有的业务组件代码重新安装基础组件错误才会消失。这里我不对于css文件引入不知道是否是webpack有关css-loader配置问题，我主要有两个问题：
1.业务组件css样式该如何引入项目
2.为什么在我安装业务组件并引入样式文件后，在全局main.js中引入的基础组件样式也出现问题
求答惑，非常感谢！

屏幕底部的toobar可否考虑增加一个
粗略的看了一下目前的组件 强烈感受有赞团队的用心 👍

报的错误是生成的 examples-dist/entry-docs.js 文件中，文件路径分隔符只用了单个反斜线的问题。
error in ./docs/examples-dist/entry-docs.js Syntax Error: Bad character escape sequence (45:118) 43 | 'zh-CN/radio': wrapAsyncComponent(r => require.ensure([], () => r(require('E:\vue\vant**\**docs\examples-docs\zh-CN\radio.md')), 'zh-CN/radio.md')), 44 | 'zh-CN/switch': wrapAsyncComponent(r => require.ensure([], () => r(require('E:\vue\vant\docs\examples-docs\zh-CN\switch.md')), 'zh-CN/switch.md')), 45 | 'zh-CN/uploader': wrapAsyncComponent(r => require.ensure([], () => r(require('E:\vue\vant\docs\examples-docs\zh-CN\uploader.md')), 'zh-CN/uploader.md')),

主要原因在 zan-doc 包下面的 build-entry.js 文件，直接使用的 path.resolve 方法，这个方法返回的路径就是上面的 E:\vue\vant\docs\ 这种。在windows 下应该要再把这个路径转成两个反斜线分隔。

docs.push(`'${lang}/${name}': wrapAsyncComponent(r => require.ensure([], () => r(require('${path.resolve(src, docPath)}')), '${lang}/${name}.md'))`);

中间那部分可以修改为：

path.resolve(src, docPath).replace(/\\/g, '\\\\')

请认真写 PR 的标题，会用于生成 change log。

Do you want to request a feature or report a bug?

What is the current behavior?
click the image does not go to the link specified by href

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/n879nke7/).
It appears the click event is used to stop the slide.

What is the expected behavior?
Click the image it will follow the href link

Which versions of Vant and Vue, and which browser / OS are affected by this issue? Did this work in previous versions of Vant?
vant: 0.8.4
Vue: 2.8.2

请认真写 PR 的标题，会用于生成 change log。

Do you want to request a feature or report a bug?
mac 下 安装vant 全局引用，报错了vant没有定义
What is the current behavior?
（1）vue-cli 安装自己的项目
（2）全局引入vant的写法，入口文件main.js 里写
import Vue from 'vue';
import vant from 'vant';
import 'vant/lib/vant-css/index.css';

Vue.use(vant);

pageage.json
{
"name": "hxsapp-fe",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "wuwanbin [email protected]",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js"
},
"dependencies": {
"mint-ui": "^2.2.9",
"vant": "^0.9.3",
"vue": "2.4.2",
"vue-router": "^2.7.0",
"vuex": "^2.4.0"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-loader": "^7.1.1",
"babel-plugin-component": "^0.10.0",
"babel-plugin-import": "^1.4.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.3.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^2.0.1",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"cssnano": "^3.10.0",
"es2015": "0.0.0",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"friendly-errors-webpack-plugin": "^1.1.3",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.3",
"opn": "^5.1.0",
"optimize-css-assets-webpack-plugin": "^2.0.0",
"ora": "^1.2.0",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"url-loader": "^0.5.8",
"vant-css": "^0.9.3",
"vue-loader": "^13.0.4",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "2.4.2",
"webpack": "^2.6.1",
"webpack-bundle-analyzer": "^2.2.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.18.0",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

报错如下：
main.js?1c90:21 Uncaught ReferenceError: vant is not defined

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/n879nke7/).

What is the expected behavior?

Which versions of Vant and Vue, and which browser / OS are affected by this issue? Did this work in previous versions of Vant?

美团同事，内网里看了你写的Payui，很不错，看了你的经历很有感触，支持一个

能添加个底部tabbar吗

npm 包里没有navbar组件。

node_modules文件夹

git文件夹

请问captain-ui开源了吗？

请认真写 PR 的标题，会用于生成 change log。

Do you want to request a feature or report a bug?

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/n879nke7/).

What is the expected behavior?

Which versions of Vant and Vue, and which browser / OS are affected by this issue? Did this work in previous versions of Vant?

当按钮被点击/常按的时候可以很明显看到有一部分空白

原因是因为button contaniner宽高定了之后。
用的是before，占据宽高百分百以后最大也会减去contaniner的1px。
before又使用的inherit 父级的border-radius。
所以导致了空白的出现。。
个人暂时想到两种解决方案
1.是active时候的border-radius为0；父contaniner的overflow:hidden;
2.active时候after的top right bottom left的调整
这样子的会导致border的像素值稍微有一些加深。

已经提交pr用的是第二种方法。因为overflow:hidden的话可能对一些现有使用者影响较大些。

请认真写 PR 的标题，会用于生成 change log。

Do you want to request a feature or report a bug?
bug
What is the current behavior?
ImagePreview 图片预览，有bug，滑动就没有图片了！
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/n879nke7/).

What is the expected behavior?
别隐藏图片，正常滑动，可以切换显示图片！
Which versions of Vant and Vue, and which browser / OS are affected by this issue? Did this work in previous versions of Vant?

轮播组件可以添加高度自适应功能吗？主要是为了适应不同大小的屏幕，高度可以跟随宽度改变，可以采用轮播的高度与宽度成比例。目前测试发现轮播默认高度是0，必须给定一个高度才能显示，但是当屏幕宽度改变的时候，高度不变的话，图片显示效果就异常了。
蟹蟹大佬。

1.放一些demo效果，让开发者可以先预览一下对于UI框架会更好吧
2.可以申明一下Vue的版本支持例如：support Vue1.x&2.x

demo是将高度直接设为200px,。
建议添加

.van-swipe-item:first-child {
    position: relative;
}

这样高度会根据图片等比缩放

$ npm i vant -S

npm WARN [email protected] requires a peer of [email protected] but none was installed.

• [email protected]
  updated 1 package in 5.834s

总是出现这样的提示，没有安装。我的vue全局安装的。

Thank you again!

vue-cli项目，一些工具的版本都是最新的。
然后run build后会发现地址列表会出现在app.xxxxx.js里。

是我webpack没有配置对吗，还是说一定会打包进去呢。
json文件是这样导入的

以前的产品 橱窗组件怎么没有了？

报错内容：

遇到过这个错误，意思是组件未注册就使用了，但是我使用其它的组件没有问题。
代码是用官网的：

file组件 里 textarea 获取不了scrollHeight
顺带 提个建议 vant文档 里面的demo 建议贴上https://jsfiddle.net 发现文档写的一些demo 和 旁边 展示的例子 出入

业务组件的cap-goods-list出现问题 与文档效果不一致，点击事件会回滚到页面顶部不会出发事件。

**与文档效果不一致，点击事件会回滚到页面顶部不会触发事件。
**css样式也不完整，是不是没有更新到npm的原因？

请认真写 PR 的标题，会用于生成 change log。

Do you want to request a feature or report a bug?

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/n879nke7/).

What is the expected behavior?

Which versions of Vant and Vue, and which browser / OS are affected by this issue? Did this work in previous versions of Vant?

网页拉拽没问题，可一到移动端高分屏就按像素，这个在哪里设置呢？

请认真写 PR 的标题，会用于生成 change log。

Do you want to request a feature or report a bug?

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/n879nke7/).

What is the expected behavior?

Which versions of Vant and Vue, and which browser / OS are affected by this issue? Did this work in previous versions of Vant?

我的滑动单元格里是一个地址：

向左滑之后会出现“删除”按钮：

点击右侧的小箭头ye'ke'y也可以出现“删除”按钮：

实现的原理是修改translate3d值，例如给一个 translate3d(-100px, 0px, 0px) ，就会左滑出100px，再点一次会清零translate3d，就是说会弹回去。
问题来了：通过点击弹出来，不能滑回去，滑出来的可以点击弹回去。
怎么才能让滑动和点击都通用呢？

请认真写 PR 的标题，会用于生成 change log。

Do you want to request a feature or report a bug?

What is the current behavior?
When 'showIndicators' set to 'false' The second image in demo disappears.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/n879nke7/).
Please refer to issue #79 for setup

What is the expected behavior?
The 'showIndicators' parameter shouldn't impact display of swipe images.

Which versions of Vant and Vue, and which browser / OS are affected by this issue? Did this work in previous versions of Vant?
vant: 0.8.4
vue: 2.8.2