didi / cube-ui Goto Github PK

main.js:

import Vue from 'vue/dist/vue'
import router from './router'
import Cube from 'cube-ui'
import 'cube-ui/lib/style.css'

Vue.use(Cube)

new Vue({
  el: '#app',
  router,
})

index.vue:

<template>
  <div id="index">
    <cube-button @click="showDiaog" :disabled="true" icon="cubeic-right">show dialog</cube-button>
    <cube-button type="submit" :active="true">submit</cube-button>
    <div class="scroll-wrapper">
      <cube-scroll :data="items"></cube-scroll>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items: [1, 2, 3, 4, 5],
      }
    },
    methods: {
      showDiaog() {
        this.$createDialog({
          type: 'alert',
          title: 'Alert',
          content: 'dialog content'
        }).show()
      }
    }
  }
</script>

A feature or reporting a bug?

Bug

What is the current behavior?

When using indexList component, it goes well in windows, but when I published my project on server and then access my domain,there is no data shows in the page, I don't know why...

What is the expected behavior?

some data, I think.

How to reproduce the current behavior (if this is a bug)?

publish on server.

Provide the test code and the tested page URL (if applicable)

Tested page URL:
http://rozwel.club/tby/#/list
Test code
Here is my code , I use the vConsole in my code to prove the xhr goes well, you can try to access the url above on computer and on your mobile.

<template>
...
<div v-if="cityData.length !==0">
<cube-index-list :data="cityData" @select="selectItem" :title="'列表'"></cube-index-list>
</div>
...
</template>

<script>
import { getDoc } from "@/api/document/document.js";
import { formatDocs } from "@/common/js/index.js";
export default {
  data() {
    return {
      cityData: []
    };
  },
  methods: {
  created() {
    getDoc().then(res => {
      this.cityData = formatDocs(res.data);
      //I try to convert the structure of data, I think there is no mistake in formatDocs function because it shows data on computer.
    })
  }
};
</script>

Specify your

• vue version:
• cube-ui version:

A feature or reporting a bug?

Feature

What is the current behavior?

Cannot rewrite btns

What is the expected behavior?

Can rewrite btns

Specify your

• vue version: 2.5.2
• cube-ui version: 1.0.2

A feature or reporting a bug?

Bug

What is the current behavior?

render error or render late.

What is the expected behavior?

render correctly

How to reproduce the current behavior (if this is a bug)?

1. Click Picker button
2. Click Picker(mutiple columns) button
3. Click Picker linkage

Provide the test code and the tested page URL (if applicable)

Tested page URL:
https://didi.github.io/cube-ui/example/#/picker

Test code
none

Specify your

• vue version: 2.5.2
• cube-ui version: 1.0.2

A feature or reporting a bug?

feature

What is the current behavior?

Official web pages haven't adopt mobile device.

What is the expected behavior?

adopt mobile device:

• home
• doc
• example
• navigator

click绑定的事件和vue实例方法名不一致，cube-button标签没有关闭

这个不是issue, 我想问下cube-content不使用流式布局是因为什么, 目前使用的是固定宽高通过overflow: scroll;让内部滚动. 业务使用会不会有局限性啊?

A feature or reporting a bug?

reporting a bug

What is the current behavior?

[Vue warn]: Invalid key "require" in validation rules object for prop "value"
看了一下错误的原因， 应该是
https://github.com/didi/cube-ui/blob/dev/lib/checkbox-group/index.js
这里面的 props 的问题 还是用了 require 的原因
value: {
type: [Boolean, String],
require: true
},

What is the expected behavior?

no warn

How to reproduce the current behavior (if this is a bug)?

value prop required

Specify your

• vue version: 2.5.2
• cube-ui version: 1.2.0

版本v.1.0.2
代码：
mounted(){
this.picker = this.$createPicker({
title: '选择文章类型',
data: this.linkageData,
onChange: (i, newIndex) => {
// console.log(i, newIndex)
if (newIndex !== this.tempIndex[i]) {
for (let j = 2; j > i; j--) {
this.tempIndex.splice(j, 1, 0)
this.picker.scrollTo(j, 0)
}
this.tempIndex.splice(i, 1, newIndex)
this.picker.setData(this.linkageData, this.tempIndex)
}
}
})
}

此版本报forEach错误

版本v.1.1.0
代码：
mounted(){
this.picker = this.$createPicker({
title: '选择文章类型',
data: this.linkageData,
onChange: (i, newIndex) => {
// console.log(i, newIndex)
if (newIndex !== this.tempIndex[i]) {
for (let j = 2; j > i; j--) {
this.tempIndex.splice(j, 1, 0)
this.picker.scrollTo(j, 0)
}
this.tempIndex.splice(i, 1, newIndex)
this.linkagePicker.setData(this.linkageData, this.tempIndex)
}
}
})
}

此版本报forEach错误，联动也失效

目前解决办法（只是联动起效，forEach仍报错）将linkagePicker改为picker，另外在获取数据之后再加上
this.picker.setData(this.linkageData, this.tempIndex)

A feature or reporting a bug?

Feature

What is the current behavior?

Need to remove global components by beforeDestroy

What is the expected behavior?

Auto destroy the global components

Specify your

• vue version: 2.5.2
• cube-ui version: 1.0.2

A feature or reporting a bug?

Bug

What is the current behavior?

IndexList component without title property may cause the position of uppercase bar unpredictable,also when tapping the fast navigation bar , for example, I should tap below the letter C to choose C.

What is the expected behavior?

Running as the demo shows to me.

How to reproduce the current behavior (if this is a bug)?

Not declaring the title property

Provide the test code and the tested page URL (if applicable)

Tested page URL:

Test code

<cube-index-list :data="cityData" @select="selectItem" ></cube-index-list>

Specify your

• vue version: 2.5.2
• cube-ui version: 1.1.0

上拉加载或者下拉刷新的时候 会有回弹的抖动啊
部分苹果7的版本

模版:

<template>
    <div @click="plus">
        测试
        <slot></slot>
    </div>
</template>
<script>
export default {
  name:"testDemo",
   props: {
    content: {
      type: String,
      default: 'Hello'
    }
  },
  methods:{
      plus(e){
        this.$emit('click',e)
      },
      hehe(){
          alert(1)
      }
  }
}
</script>
<style>
#foo{
  color:red;
}
</style>

引入:

import testDemo from "@/components/testDemo"
// 调用
createAPI(Vue, testDemo, ['plus'], true)

使用:

    showHello() {
      // 直接调用
      // 传入配置对象，默认传入的所有对象全都当做 props 传入组件
      // 除了在调用 createAPI 的时候传入了 events，这里对应的就是
      // on{event name} 会被当做事件回调处理
      //$createVueComponent
      const instance = this.$createTestDemo({
        content: 'My Hello Content',
        plus: "Hello Plus!",
        onPlus(e) {
          console.log(e)
          console.log('Hello component clicked.')
        }
      }, /* renderFn */(createElement) => {
        return <div id="foo"  onClick={this.hehe}>Hello World!
          <p></p>
        </div>
      })
    }

报错:Invalid handler for event "click": got undefined

Specify your

• vue version: ^2.2.2
• cube-ui version: ^1.0.1

A feature or reporting a bug?

feature

What is the current behavior?

cancelTxt and confirmTxt can not be configured.

What is the expected behavior?

can config them using props as picker does.

A feature or reporting a bug?

feature：need a cli to init the base code, and include post-compile related config.

As the topic

A feature or reporting a bug?

No

What is the current behavior?

...

What is the expected behavior?

...

How to reproduce the current behavior (if this is a bug)?

...

Provide the test code and the tested page URL (if applicable)

Tested page URL:

Test code

Picker component .How can I change the key & value name of data 。such as : [{name: JACK, id: 12},{name: TOM, id: 18}] .thanks

Specify your

• vue version: 2.42
• cube-ui version: 1.1.0

date-picker模板错误，从文档链接，链接到的date-picker插件书写有误。<template>中的“cube-cascade-picker“，应为“cube-picker”。

如果是异步数据的话，遍历的DOM为空，那么 Slide 组件在初始化是并不能成功，尝试着在异步数据过来后，push数据进去，然后在调用 refresh()，报错如下：

滚动列表里面有文本域 怎么让文本域的超出内容局部滚动

A feature or reporting a bug?

bug

What is the current behavior?

下拉刷新时滑动列表，列表会有卡顿

What problem does this feature solve?

Radio component

What does the proposed API look like?

<cube-radio ...props />

您好：
我们想基于cube-ui的单个组件进行二次封装使用，但奈何技术有限，实在有点搞不懂该如何引入调用组件。

例：基于 Dialog 二次封装，提供基本的方法直接使用。

import {Dialog, createAPI} from "cube-ui";

export default {
  alert: function (title, content) {
    // js该如何调用对应API
    Dialog({
      type: 'alert',
      title: 'Alert',
      content: 'dialog content'
    }).show()
  }
}

场景：
1、按照cube-ui文档的后编译四个步骤安装
2、不同之处在于.babelrc文件的plugin是这么配置的，保留了默认的transform-runtime(不知道使用了babel-polyfill之后这么配置是否多此一举)

"plugins": ["transform-runtime", ["transform-modules", {
    "cube-ui": {
      // 注意: 这里的路径需要修改到 src/modules 下
      "transform": "cube-ui/src/modules/${member}",
      "kebabCase": true
    }
  }]]

3、执行npm run dev
现状：
项目可以正常启动，但是编译的过程中会报错，找了很久没有找到解决方法，请指教

{ Error: Cannot find module '/Users/pengyong/Des/package.json'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at loadPkg (/Users/pengyong/Desktop/svn/projectPath/node_modules/[email protected]@webpack-post-compile-plugin/lib/util.js:68:11)
    at /Users/pengyong/Desktop/svn/projectPath/node_modules/[email protected]@webpack-post-compile-plugin/lib/util.js:16:17
    at Array.forEach (native)
    at Object.collectDependencies (/Users/pengyong/Desktop/svn/projectPath/node_modules/[email protected]@webpack-post-compile-plugin/lib/util.js:13:9)
    at PostCompilePlugin._collectCompileDependencies (/Users/pengyong/Desktop/svn/projectPath/node_modules/[email protected]@webpack-post-compile-plugin/lib/index.js:47:8)
    at Compiler.<anonymous> (/Users/pengyong/Desktop/svn/projectPath/node_modules/[email protected]@webpack-post-compile-plugin/lib/index.js:20:29)
    at Compiler.applyPluginsAsyncSeries (/Users/pengyong/Desktop/svn/projectPath/node_modules/[email protected]@tapable/lib/Tapable.js:206:13)
    at Watching._go (/Users/pengyong/Desktop/svn/projectPath/node_modules/[email protected]@webpack/lib/Compiler.js:47:17)
    at Watching.invalidate (/Users/pengyong/Desktop/svn/projectPath/node_modules/[email protected]@webpack/lib/Compiler.js:141:9)
    at watcher.compiler.watchFileSystem.watch (/Users/pengyong/Desktop/svn/projectPath/node_modules/[email protected]@webpack/lib/Compiler.js:122:9)
    at EventEmitter.watcher.once (/Users/pengyong/Desktop/svn/projectPath/node_modules/[email protected]@webpack/lib/node/NodeWatchFileSystem.js:45:4)
    at EventEmitter.g (events.js:292:16) code: 'MODULE_NOT_FOUND' }

Specify your

• vue version: 2.4.4
• cube-ui version: 1.0.2

实际使用:

//maIn.js

import Vue from 'vue'
import App from './App'
import router from "./router"
import 'cube-ui/lib/style.css'
import { createAPI } from 'cube-ui'

const MyComponent = Vue.extend({
  name: 'hello',
  props: {
    content: {
      type: String,
      default: 'Hello'
    }
  },
  template: '<div @click="clickHandler">{{content}}<slot name="other"></slot></div>',
  methods: {
    clickHandler(e) {
      this.$emit('click', e)
    }
  }
})
// 调用
createAPI(Vue, MyComponent, ['click'], true)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  router,
  render: h => h(App)
}).$mount('#app-box')

<template>
  <div>
    <button @click="showHello">Show Hello</button>
  </div>
</template>
<script>

export default {
  name: 'demo',
  methods: {
    showHello() {
      // 直接调用
      // 传入配置对象，默认传入的所有对象全都当做 props 传入组件
      // 除了在调用 createAPI 的时候传入了 events，这里对应的就是
      // on{event name} 会被当做事件回调处理
      // console.log(this)
      const instance = this.$createHello({
        content: 'My Hello Content',
        onClick(e) {
          console.log('Hello component clicked.')
        }
      }, /* renderFn */(createElement) => {
        return [
          createElement('p', {
            slot: 'other'
          }, 'other content')
        ]
      })
      // 通过 Vue 组件的 $on 也是可以监听的，看使用场景
      instance.$on('click', (e) => {
        console.log('on click', e)
      })
      // 移除销毁
      instance.remove()
    }
  }
}
</script>

报错: this.$createHello is not a function

改变成this.$createVueComponent 生效

    showHello() {
      // 直接调用
      // 传入配置对象，默认传入的所有对象全都当做 props 传入组件
      // 除了在调用 createAPI 的时候传入了 events，这里对应的就是
      // on{event name} 会被当做事件回调处理
      // console.log(this)
      const instance = this.$createVueComponent({
        content: 'My Hello Content',
        onClick(e) {
          console.log('Hello component clicked.')
        }
      }, /* renderFn */(createElement) => {
        return [
          createElement('p', {
            slot: 'other'
          }, 'other content')
        ]
      })
      // 通过 Vue 组件的 $on 也是可以监听的，看使用场景
      instance.$on('click', (e) => {
        console.log('on click', e)
      })
    }

Specify your

• vue version: "^2.2.2",
• cube-ui version: "^1.0.1"

建议支持scss，不仅仅是stylus

A feature or reporting a bug?

Featue

What is the current behavior?

The property names in data, like 'text', 'value', can not be configured.

What is the expected behavior?

Can be configured by props. For example, you could configure 'name' as the alias of 'text', and 'id' as the alias of 'value'.

vue官网vue-cli搭建新项目
npm install cube-ui --save 后提示stylus-loader、stylus模块未install
待把这两个modules install 后，还是报错

1. Module parse failed: Unexpected token (5:18)
   You may need an appropriate loader to handle this file type.
   | export default function parseRenderData(data = {}, events = {}) {
   | events = parseEvents(events)
   | const props = { ...data }
   | const on = {}
   | for (const name in events) {
   。。。。。。
2. These relative modules were not found:

• ./cubeic.ttf in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/postcss-loader/lib?{"sourceMap":false}!./node_modules/stylus-loader?{"sourceMap":false}!./node_modules/cube-ui/src/common/stylus/index.styl
  望大佬看看是什么问题，如何解决

A feature or reporting a bug?

bug

What is the current behavior?

docs menu can not scroll

What is the expected behavior?

docs menu can scroll

How to reproduce the current behavior (if this is a bug)?

Open docs website in firefox lateast version(firefox 57, Mac 10.12.6)

有以下两点问题：

1. timepicker只能显示和设置当前时间之后的时间，而不能设置当前时间之前的时间。这极大的限制了timepicker的应用场景。建议增加属性，以支持设置当前时间之前的时间。

2. 对于时间的显示，建议可以直接显示时间 ，而不是默认显示【今天】

A feature or reporting a bug?

Bug

What is the current behavior?

[Vue warn]: Invalid key "require" in validation rules object for prop "value".

What is the expected behavior?

No warn

How to reproduce the current behavior (if this is a bug)?

value prop required

Specify your

• vue version: 2.5.11
• cube-ui version: 1.2.0

Bug or Myself hole?

可以能是我自己的坑，为了避免出现我这个反面教材还是说下问题吧：选项卡中使用scroll组件。如果使用v-show只有默认激活的选项卡内容可以滚动，其他都不行；如果使用v-if则都可以滚动

code show

<template>
  <div class="scroll-query-wrap">
    <!-- tab item 区域 -->
    <div class="tab-wrap">
      <div class="tab-item" @click="onTabItem(0)" :class="{'tab-item-active': activeTabIndex == 0}">Con1</div>
      <div class="tab-item" @click="onTabItem(1)" :class="{'tab-item-active': activeTabIndex == 1}">Con2</div>
      <div class="tab-item" @click="onTabItem(2)" :class="{'tab-item-active': activeTabIndex == 2}">Con3</div>
    </div>

    <!-- tab content -->
    <div class="tab-con-wrap">
      <div class="con-main con1-wrap" v-if="activeTabIndex == 0">
        <cube-scroll
          ref="scrollCon1"
          :data="list1"
          :pull-up-load="true"
          @pulling-up="onPullingUp(0)">
          <ul class="con-list">
            <li class="item"
             v-for="(item, index) in list1"
             :key="index">{{item}}</li>
          </ul>  
        </cube-scroll>
      </div>
      <div class="con-main con2-wrap" v-if="activeTabIndex == 1">
        <cube-scroll
          ref="scrollCon2"
          :data="list2"
          :pull-up-load="true"
          @pulling-up="onPullingUp(1)">
          <ul class="con-list">
            <li class="item"
             v-for="(item, index) in list2"
             :key="index">{{item}}</li>
          </ul>  
        </cube-scroll>
      </div>
      <div class="con-main con3-wrap" v-if="activeTabIndex == 2">
        <cube-scroll
          ref="scrollCon3"
          :data="list3"
          :pull-up-load="true"
          @pulling-up="onPullingUp(2)">
          <ul class="con-list">
            <li class="item"
             v-for="(item, index) in list3"
             :key="index">{{item}}</li>
          </ul>  
        </cube-scroll>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'scrollQuery',
    data () {
      return {
        activeTabIndex: 0,
        list1: [1, 2, 3, 4, 5, 6],
        list2: [1, 2, 3, 4, 5, 6, 7, 8],
        list3: [1, 2, 3, 4, 5, 6, 8, 9]
      }
    },
    methods: {
      onTabItem (type) {
        this.activeTabIndex = type
      },
      onPullingUp (type) {
        setTimeout(() => {
          if (Math.random() > 0.5) {
            let itemIndex = 0
            // 如果有新数据
            let newPage = [
              'I am line ' + type + ', ' + ++itemIndex,
              'I am line ' + type + ', ' + ++itemIndex,
              'I am line ' + type + ', ' + ++itemIndex,
              'I am line ' + type + ', ' + ++itemIndex,
              'I am line ' + type + ', ' + ++itemIndex
            ]

            if (type === 0) this.list1 = this.list1.concat(newPage)
            if (type === 1) this.list2 = this.list2.concat(newPage)
            if (type === 2) this.list3 = this.list3.concat(newPage)
          } else {
            // 如果没有新数据
            if (type === 0) this.$refs.scrollCon1.forceUpdate()
            if (type === 1) this.$refs.scrollCon2.forceUpdate()
            if (type === 2) this.$refs.scrollCon3.forceUpdate()
          }
        }, 1000)
      }
    }
  }
</script>

<style scoped>
  .tab-wrap{
    display:flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    width:100%;
    background-color:#333;
  }
  .tab-item {
    padding:0 10px;
    margin-right:10px;
    color:#fff;
  }
  .tab-item-active{
    color:red;
  }

  /* con */
  .tab-con-wrap{
    position: relative;
    height: 500px;
    width:100%;
  }
  .con-main {
    position: absolute;
    left: 0;
    top:0;
    width:100%;
    height:100%;
    overflow:hidden;
  }
  .con-main .item {
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color:green;
    color:#fff;
    margin-bottom:30px;
  }
  .con-main .item:last-child {
    margin-bottom:0;
  }
</style>

My version

• vue version: 2.5.2
• cube-ui version: 1.0.2

What problem does this feature solve?

UI & UE

What does the proposed API look like?

None

您好：
我们想基于cube-ui的单个组件进行二次封装使用，但奈何技术有限，实在有点搞不懂该如何引入调用组件。

例：基于 Dialog 二次封装，提供基本的方法直接使用。

import {Dialog, createAPI} from "cube-ui";

export default {
  alert: function (title, content) {
    // js该如何调用对应API
    Dialog({
      type: 'alert',
      title: 'Alert',
      content: 'dialog content'
    }).show()
  }
}

问题就是代码中的注释那里：js该如何调用对应API

A feature or reporting a bug?

Feature.

What is the current behavior?

No dots slot.

What is the expected behavior?

Support dots slot.

Specify your

• vue version: 2.5.2
• cube-ui version: 1.1.1

What problem does this feature solve?

Upload

What does the proposed API look like?

<cube-upload ...props >
  ...
</cube-upload>

A feature or reporting a bug?

What is the current behavior?

What is the expected behavior?

How to reproduce the current behavior (if this is a bug)?

Provide the test code and the tested page URL (if applicable)

Tested page URL:

Test code

Specify your

• vue version:
• cube-ui version:

A feature or reporting a bug?

Feature.

What is the current behavior?

No slots supported.

What is the expected behavior?

Support slot

Specify your

• vue version: 2.5.2
• cube-ui version: 1.1.1

A feature or reporting a bug?

A feature

What is the current behavior?

Some coupled inner logic need considered, When create cascade picker.

What is the expected behavior?

Use CascadePicker component to do those common cascade logic.

【当前问题】bscoller有许多配置可用，当前配置被拆分开来一个一个填使得组件十分不灵活，一大部分不能配置例如bounce等。就算把bscoller参数全部配上去，在使用组件的时候需要配置一大堆属性。
【建议修改】建议把bscoller插件的配置统一到bsOption，文档指引到bscoller的配置文档，这样组件使用会不会更方便呢？

A feature or reporting a bug?

Feature

What is the current behavior?

If used postcss-px2rem, some components or behaviors will be not perfect.

What is the expected behavior?

Support rem.

Specify your

• vue version: 2.5.2
• cube-ui version: 1.1.1

popup 组件中 mask 点击事件中 emit 的方法名为 mask-click

picker 组件中 popup 注册的事件却是click

尝试将 picker 中监听的事件名称@click 更新为 @mask-click 后。点击 mask 遮罩部分可以正常关闭组件。

popup组件源码相关部分

<script type="text/ecmascript-6">
  import apiMixin from '../../common/mixins/api'
  const COMPONENT_NAME = 'cube-popup'
  const EVENT_MASK_CLICK = 'mask-click'
  export default {
    methods: {
      maskClick(e) {
        this.$emit(EVENT_MASK_CLICK, e)
      }
    }
  }
</script>

picker组件源码相关部分 @click

<template>
  <transition name="cube-picker-fade">
    <cube-popup
      type="picker"
      :mask="true"
      :center="false"
      v-show="isVisible"
      @touchmove.prevent
      @click="cancel">

• cube-ui version:1.0.0

A feature or reporting a bug?

feature

What is the current behavior?

The mask animation in the Toast component is not smooth, feeling an apparently lag when changing opacity.

What is the expected behavior?

The fade in animation will be smoother.

• vue version: 2.5.3
• cube-ui version: 1.0.0

入口文件全局加载cube-ui，在页面中引用某个组件后，页面能正常渲染出组件的dom结构，但是组件相关的css样式一个都没有加载，这是什么原因？

A feature or reporting a bug?

What is the current behavior?

What is the expected behavior?

How to reproduce the current behavior (if this is a bug)?

Provide the test code and the tested page URL (if applicable)

Tested page URL:

Test code

Specify your

• vue version:
• cube-ui version:

indexList中，当最后一个list的高度(数据较少时)少于屏幕的高度时，点击最后一个list时的currentIndex时没有落到lastIndex的，这个可否作出优化的处理？