Git Product home page Git Product logo

wot-design's Introduction

Wot Design

An ui component library built on vue.js.

Documentation

Build Status

Netlify Status

Install

npm i wot-design

Quick Start

import Vue from 'vue'
import WotDesign from 'wot-design'

Vue.use(WotDesign)

// or
import {
  Button,
  Swipe
} from 'wot-design'

Vue.use(Button)
Vue.use(Swipe)

For more information, please refer to Quick Start in our documentation.

LICENSE

MIT

wot-design's People

Contributors

awjing avatar cjj520 avatar dependabot-preview[bot] avatar dependabot[bot] avatar ftf-bot avatar fxlfxl avatar gkxie avatar gulu20150515 avatar hxcstudio123 avatar mrjianglei avatar redjoy avatar tclyjy avatar wlin00 avatar xugaobo 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

wot-design's Issues

checkbox渲染问题

京麦

{{item.gdl_name}}

单独写死能正常渲染,使用for循环构造就会渲染不出来

cell

cell组件右侧,当文字非12px时没有和箭头在水平方向保持居中对齐。

tooltip组件

气泡里的文案不能换行诶,还请小姐姐改下下

Tabbar status display wrong with a string type value

Version
2.2.1

Steps to reproduce
Set Tabbar-item's props name & Tabbar's value to a String Type value.

What is expected?
Display current tabbar-item Correctly。

What is actually happening?
Miss active status
1
2

.

[Bug Report]组件文档Tab章节标题名不一致

Wot Design version

v1.4.0

OS/Browsers version

Chrome

重现步骤

打开Tabs章节

期待的行为

Tabs章节标题名和左侧导航栏标题应保持一致。

实际的行为

发现Tabs章节标题名(Tab 标签页)和左侧导航栏标题(Tabs 标签页)不一致。

文件上传前无法修改文件名

文件上传组件:
<wd-upload
v-model="planForm.fileList"
multiple
:limit="3"
:before-upload="imgBeforeUpload"
@exceed="imgUploadLimit"
@success="imgUploadSuccess"
@remove="imgRemoveSuccess"
:action="uploadUrl">

上传文件之前的钩子:
imgBeforeUpload ({ files, fileList, resolve }) {
for (let i = 0; i < files.length; i++) {
console.log(files[i].name);
let suffix = files[i].name.substring(files[i].name.lastIndexOf(".")); //.txt
files[i].name = 'dispatch-' + this.generateUniqueString() + suffix
console.log(customFile.name)
}
resolve(true)
},

以上,文件名修改不生效,各种方法都尝试过了。麻烦帮忙看看是啥原因哦,感谢!

[Bug Report] Upload 上传组件,重复选择相同的图片,无反应

Wot Design version
2.3.2

OS/Browsers version
Mac 10.15.7

Vue version
2.6.14

复现步骤:
使用 before-upload 钩子时,选择一张图片后,不让通过,再次选择同一张图片

期待的行为:
重新触发 before-upload 钩子事件

实际的行为:
不触发 before-upload 钩子事件

[Bug Report] DropMenu 下拉菜单中没有 dropmenuItem时报错,自定义内容只有一个,没有隔开

Wot Design version

v2.0.0-beta2

OS/Browsers version

Android Chrome

重现步骤

<wd-drop-menu>
  <div slot="menu" style="line-height: 14px;">
    <wd-sort-button v-model="value"  title="价格"/>
  </div>
</wd-drop-menu>

期待的行为

自定义菜单插槽应该是在 wd-drop-menu-item 中,这样才支持多组合使用

实际的行为

只能自定义一个菜单插槽,且必须有 wd-drop-menu-item 。

[Bug Report] pickerView 数据延迟传入,没有默认选中第一项,导致picker无法选中第一项,因为内部pickerView的值为空

Wot Design version

v2.0.0-beta2

OS/Browsers version

Android Chrome

重现步骤

<wd-picker-view v-model="value" :columns="columns" />

<script>
export default {
  data () {
    value: '',
    columns: []
  },
  mounted () {
    setTimeout(() => {
      this.columns = ['选项一', '选项二', '选项三', '选项四', '选项五']
    }, 500)
  }
}
</script>

期待的行为

数据延迟传入,默认选中第一项

实际的行为

数据延迟传入,没有选中第一项

tabbar 问题

b a

这样使用的:但是遇到问题是默认选中的第一个tab点击到其他的tab也无法取消第一个选中,

input

文档里面的demo对齐(rows)改成string
image

input

添加对align对齐方式的支持

picker-view组件 setColumnData 逻辑交互上可以优化

当前picker-view组件 setColumnData 方法,当column项变化时候,对比新旧数据后调用 column.setIndex 重置selectedIndex为0。
所以在使用日期组件时候,选择每次选择月份都会将原有日期重置为01(因为月份大小月间隔原因,每个月的日 column 项都不同)
bug:在使用datetime-picker-view组件的时候,切换月份v-model绑定数值无法正确同步,可见 https://ftf.jd.com/wot-design/demo.html#/datetimePickerView 第一个示例可以复现
建议:
在新column项数据中包含当前选择项时,使用新数据中的index作为selectedIndex的值

if (column && JSON.stringify(columnData) !== JSON.stringify(newData)) {
  column.data = data
  const newIndex = data.map(c => c[this.valueKey]).indexOf(column.getValue())
  if (newIndex === -1) {
     column.setIndex(0, false)
  } else {
     column.setIndex(newIndex, false)
  }
}

Search组件 type为number 清空输入值出现NaN

问题:Search组件 type为number 清空输入值出现NaN
原因分析:
wecom-temp-cf86b9225e96e74efa833c4cec126305
解决:

// wot-design/packages/search/src/main.vue
input(e) {
  if (this.type === 'number') {
    e.target.value = e.target.value.replace(/[^0-9]/g, '')
  }
  this.$emit('input', this.type === 'number' && e.target.value ? parseInt(e.target.value) : e.target.value)
},

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.