airyland / vux

Mobile UI Components based on Vue & WeUI

Be Cool with Vue@^2.3.0 and WeUI.

Live Demo >>

Sponsors

Requirements

• vue@^2.3.0(for .sync modifier)
• webpack@^2.0
• node@^7.6(development)

Docs

• 中文文档
• English(working)

Quick Start

vux2 template is directly modified from Vue official webpack template.

npm install vue-cli -g
vue init airyland/vux2 projectPath

cd projectPath
npm install // or yarn
npm run dev // or yarn dev

Maintainers

• airyland
• lichunqiang
• graysheeep
• unclay
• wg5945
• Sapphire2k

Vux is Inspired or Powered By:

• Vue
• WeUI
• FrozenUI
• Ant Design
• Ant Design Mobile
• XScroll
• Ionic
• SUI Mobile
• PhotoSwipe
• WePayUI
• autosize(MIT)
• buefy

License

MIT

vux's Issues

Import milestone data from local

step component

请问是如何配置可以省略后缀？

我现在遇到一个问题：

import App from './App'

提示找不到：

Module not found: Error: Cannot resolve 'file' or 'directory' ./App in xxxx

而使用·./App.vue 就没问题

我看你的项目中都是省略了后缀的。

webpack已经配置了 extensions: ['', '.js', '.vue']

仔细比对了下webpack的配置，目前看不出有啥差别，望指教。

对于不同的控件，有一个文档说明有什么属性吗？

比如textarea有enabled属性吗？

提个关于datetime的开发建议

提个关于datetime的开发建议（开个issue不是很对，说声对不起）：
日期和时间不知道能不能也想year一样，添加一个min和max，好像日期，今天是15号，那15号之前的都不用显示了，好像时间，比如一个送货时间选择，只能选择8点到18点。

Refactor Calendar

npm 版本Style.vue缺少weui.min.css

刚才更新了一下vux，我单独引入了Style.vue，报找不到weui.min.css错，发现npm的版本没有assets目录

Range: enable selecting start number and end number?

Scroller

Should not use relative path

https://github.com/airyland/vux/blob/master/src%2Fcomponents%2Fscroller%2Findex.vue#L12-L14

这里是不是不要用相对路径...

import XScroll from 'vux-xscroll/build/cmd/xscroll.js'
import Pulldown from 'vux-xscroll/build/cmd/plugins/pulldown'
import Pullup from 'vux-xscroll/build/cmd/plugins/pullup'

这样可好

datetimepicker初始化时日期和时间不是当前日期时间

问题如题如图，请问需要传初始化值吗？还有下午2点应该显示应显示为14点吧

input 不能用

<template>
    <div class="container">
        <a v-link="{path:'/event'}">活动</a>
        <a v-link="{path:'/reglist'}">列表</a>
        <a v-link="{path:'/register'}">注册</a>
        <div style="width:100%;">
            <router-view
                transition
                transition-mode="out-in">
            </router-view>
        </div>
        <input></input>
    </div>
</template>
<script>
    import Input from 'vux/components/input'
    export default{
        name:"app",
        components:{
            Input
        }
    }
</script>

模板不能渲染出dom结构

pull2refresh component

vux中的地区选择component，在安卓系统下的微信浏览器出现加载延迟严重

我开发的spa，在安卓微信浏览器下，加载很慢，然后通过浏览器的timeline，发现加载延迟严重的文件里面，有地区选择的数据，在我的项目里，就只有vux里面有这种component。我觉得把地区选择这么庞大的数据放在文件里，会很影响加载速度的。

address的popup被mask盖住

如果有父div并且没有设置z-index的话，在微信下popup-picker会被mask盖住，建议把picker-dialog给append到body后面

关于控件datetime的bug

环境 mac safari

能不能增加一个$ripple的方法?

用惯了material之后,特别喜欢这个ripple的样式~但是自己又不会写,希望作者能够增加一个ripple 的按钮效果

Tab: custom default text color

vux.li 无法正常显示网页

Console error:

Uncaught Error: Cannot find module "!!vue-html-loader!./../../node_modules/.npminstall/vue-loader/8.2.1/vue-loader/lib/selector.js?type=template&index=0!./Calendar.vue"

swiper 设置高度后无法按照图片大小适应。

swiper 设置高度后无法按照图片大小适应。

address组件异步加载数据

希望address组件支持从后台异步加载数据，可以将list作为组件参数传给组件

Test on Android

• Android: demo icon missing

Milestone v0.2

• Range: enable selecting start number and end number? #12
• i18n

address组件不能二次赋值？

因为用到这个组件的页面是异步加载数据。this.address = ['福建省', '福州市', '台江区']

ie11以下浏览器报错。。

用的 webpack ie11浏览器以下版本报语法错误

`// },
/ 11 /
// function(module, exports, webpack_require) {

eval("!function(e,t){ true?module.exports=t():\"function\"==typeof define&&define.amd?define([],t):\"object\"==typeof exports?exports.vux=t():e.vux=t()}`

XButton上绑定click事件后会执行两次

RT。。很奇怪的问题

<template>
    <h1>这是欢迎界面</h1>
    <x-button type="primary" @click="startGame" text="开始闯关"></x-button>
</template>

<style lang="less">

</style>

<script>
    import {XButton} from 'vux'

    export default {
        components:{
            XButton
        },
        data() {

        },
        methods:{
            startGame:function() {
                console.log('start game')
            }
        }
    }
</script>

radio控件问题

我用了radio控件，使用的是demo的代码，但显示不了选择项。

路由位置Bug

滑到A页面底部，跳转到B页面，点击返回，又到了A页面顶部；没有记住位置

bug

好多机型用微信，UC，QQ浏览器都打不开

按需加载时，babel-loader如何配置

当我按需加载vue组件时，比如

import Sticky from 'vux/src/components/sticky/index.vue'

这个组件时，因为index.vue里面包含sticky.js，但是sticky.js是用es6语法写的，而我们已经配置了babel-loader的exclude选项把node_modules排除掉了，该怎么写exclude才能把vux加入babel的编译中，文档中是否应该加入提醒？

Swiper无法正常使用

如果按demo中直接写list倒还可以工作，换成动态list就不行了

<template>
  <div>
    <swiper :list="list"></swiper>
  <div>
</template>

<script>
import Swiper from 'vux/components/swiper/'
export default {
  components: {
    Swiper
  },

  data () {
    return {
      isLoading: false,
      list: []
    }
  },

  ready () {
    this.list =  [{
        url: 'http://mp.weixin.qq.com/s?__biz=MzAxNjU0MDYxMg==&ampmid=400385458&ampidx=1&ampsn=78f6b8d99715384bdcc7746596d88359&ampscene=19#wechat_redirect',
        img: 'http://7xqzw4.com2.z0.glb.qiniucdn.com/1.jpg',
        title: '如何手制一份秋意的茶？'
      }, {
        url: 'http://mp.weixin.qq.com/s?__biz=MzAxNjU0MDYxMg==&ampmid=400160890&ampidx=1&ampsn=29ef02af25793a11a3f6aec92bfb46c1&ampscene=19#wechat_redirect',
        img: 'http://7xqzw4.com2.z0.glb.qiniucdn.com/2.jpg',
        title: '茶包VS原叶茶'
      }, {
        url: 'http://mp.weixin.qq.com/s?__biz=MzAxNjU0MDYxMg==&ampmid=400094682&ampidx=1&ampsn=8231a2053b772b2108784fccc254d28c&ampscene=19#wechat_redirect',
        img: 'http://7xqzw4.com2.z0.glb.qiniucdn.com/3.jpg',
        title: '播下茶籽，明春可发芽？'
      }]
  }
}
</script>

或者使用ajax加载对list对行赋值，也不能工作，图片无法显示，但用list.length, 是显示长度正确的

Number: add fillable prop

Android: demo icon missing

Calendar: fix swiping

touch && untouch?

微信webview路由有点问题

进入demo，点击返回无法返回父菜单，直接退出浏览器

swiper

<template>
  <div>
    <swiper :list="list" :auto=true></swiper>
  <div>
</template>

<script>
import {Swiper} from 'vux'
export default {
  components: {
    Swiper
  },
  data: function () {
    return {
      list: [{
        url: 'http://mp.weixin.qq.com/s?__biz=MzAxNjU0MDYxMg==&ampmid=400385458&ampidx=1&ampsn=78f6b8d99715384bdcc7746596d88359&ampscene=19#wechat_redirect',
        img: 'http://7xqzw4.com2.z0.glb.qiniucdn.com/1.jpg',
        title: '如何手制一份秋意的茶？'
      }, {
        url: 'http://mp.weixin.qq.com/s?__biz=MzAxNjU0MDYxMg==&ampmid=400160890&ampidx=1&ampsn=29ef02af25793a11a3f6aec92bfb46c1&ampscene=19#wechat_redirect',
        img: 'http://7xqzw4.com2.z0.glb.qiniucdn.com/2.jpg',
        title: '茶包VS原叶茶'
      }, {
        url: 'http://mp.weixin.qq.com/s?__biz=MzAxNjU0MDYxMg==&ampmid=400094682&ampidx=1&ampsn=8231a2053b772b2108784fccc254d28c&ampscene=19#wechat_redirect',
        img: 'http://7xqzw4.com2.z0.glb.qiniucdn.com/3.jpg',
        title: '播下茶籽，明春可发芽？'
      }]
    }
  }
}
</script>

<style>

</style>

[HMR] Vue component hot reload shim applied.
vue.common.js?e881:986[Vue warn]: Unknown custom element: - did you mean ? HTML is case-insensitive, remember to use kebab-case in templates.
Failed to parse SourceMap: data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiIxMi5qcyIsInNvdXJjZVJvb3QiOiIifQ==

Popop: add destroy function

fix server-side routes

Search 不好用了

下拉刷新和上拉刷新都不能用?

手机,电脑模拟器都试了下,不行

搜索界面位置问题

刚看到走了边demo.
在搜索页面里, 当focus到input后, 整个页面看不到搜索框了, 应该是键盘弹出后把搜索框挤到上面去了,
当输入一个字符后变回正常.

add valid and show_error for every form element

Image loader

• lazy load
• webp url support

vux playground

A code playground may be the best way to create demos and reproduce issues.

datetime、flexbox等挺多组件在手机火狐浏览器都有问题

datetime、flexbox等挺多组件在手机火狐浏览器都有问题，在电脑火狐浏览器也有问题

Circle: custom inside text

说些遇到的问题

这个项目中的组件有些挺好的。因为没全部用过所以不敢说全部都好。比如下拉刷新那个组件，从demo里打开没问题，但重新刷新后就会变得无限刷新，根本停不下来。
另外，组件可以做到单个引用么？有些组件是可以，例如group、cell这种，直接把引用路径写到项目里的components就可以引用，但比较复杂点的组件貌似不行，比如picker、address这些。这个项目体积挺大的，项目代码跟自己写的代码加起来体积看着有点肉疼。所以，如果可以做到需要什么再从项目中引入什么的话会更好的。

Tab: animate bottom border

打包后太大了

没用vux前打包出来只有80K不到，打包这一点进去后就变成500多了

<template>
  <div>
    <group>
      <cell title="vue" value="cool"></cell>
    </group>
  </div>
</template>

<script>
import { Style, Group, Cell } from 'vux'
export default {
  components: {
    Style, // style component is necessary
    Group,
    Cell
  }
}
</script>