vuecomponent / ant-design-vue Goto Github PK
View Code? Open in Web Editor NEW🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜
Home Page: https://antdv.com/
License: Other
🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜
Home Page: https://antdv.com/
License: Other
想用例CDN方式引用,不想使用node.js
简要阐述:
该demo已完善,很精炼。
这里的自动也只是绑定了个blur事件……不过很好用。
表单验证还是自己写逻辑好,便于控制流程,其次是安全性处理。就算是sync-validator也只是简化了些代码。
其他:
为什么会有d_data
这种莫名其妙的命名?其实还可能有c_data
,只是为了区分变量来自data或computed,便于在看template的时候大致了解数据来源,其次减少命名难度,我可以同时存在d_password和c_password。
我贴的代码肯定还有好些地方写得不好,希望有大神能提出来让我改进下。表单验证还是用函数来解决吧,正则一下也不复杂。更多交流直接进群吧。这个vue-ant-design在表单处理这保留了jsx处理办法其实挺好的,只是个人觉得没必要用jsx处理表单。
<template>
<a-form class="login" layout="horizontal">
<a-form-item :validateStatus="d_help.account.length?'error':'success'" :help="d_help.account">
<a-input @blur="checkAccount()" v-model="d_form.account" size="large" maxlength="32" autocomplete="off" spellcheck="false" placeholder="用户名/邮箱" />
</a-form-item>
<a-form-item :validateStatus="d_help.password.length?'error':'success'" :help="d_help.password">
<a-input @blur="checkPassword()" v-model="d_form.password" size="large" maxlength="32" autocomplete="off" spellcheck="false" placeholder="6~32位密码" type="password" />
</a-form-item>
<a-checkbox v-model="d_form.remember">七日免登陆</a-checkbox>
<a-button class="submit" @click="submit()" :loading="d_loading" size="large" type="primary">账号登录</a-button>
</a-form>
</template>
<script>
import {sleep} from '../../libs/function'
import apiMe from '../../api/me'
export default {
data() {
return {
d_loading: false,
d_form: {
account: '',
password: '',
remember: false
},
d_help: {
account: '',
password: ''
}
}
},
watch: {
'd_form.account': function(newValue) {
this.d_form.account = newValue.toLowerCase()
}
},
methods: {
async submit() {
if (this.d_loading) return false
if (await this.checkAccount()) return false
if (this.checkPassword()) return false
this.d_loading = true
await this.$store.actions('me/login', {
form: this.d_form,
cbRes: async () => {
this.$router.push({path: '/user/monitor'})
},
cbErr: async err => {
await sleep(200)
if (err.response.data.error.code === 'LOGIN_FAILED') return this.d_help.password = '账号或密码错误!'
if (err.response.data.error.code === 'LOGIN_FAILED_EMAIL_NOT_VERIFIED') this.d_code = -1
}
})
await sleep(1000)
this.d_loading = false
},
async checkAccount() {
let _value = this.d_form.account
let _type = ''
if (_value == '') return this.d_help.account = '账号不能为空!'
if (/^1[34578]{1}\d{9}$/.test(_value)) _type = 'phone'
else if (/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(_value)) _type = 'email'
else if (/^(?!\d+)[a-zA-Z0-9_-]{1,32}$/.test(_value)) _type = 'username'
else return this.d_help.account = '账号格式错误!'
this.d_loading = true
let res = await apiMe.uniqueness(_type, _value)
await sleep(1000)
this.d_loading = false
if (!res.data) return this.d_help.account = '该账号未注册!'
return this.d_help.account = ''
},
checkPassword() {
let _value = this.d_form.password
if (_value === '') return this.d_help.password = '密码不能为空!'
if (_value.length < 6) return this.d_help.password = '密码至少6位!'
return this.d_help.password = ''
}
}
}
</script>
<style lang="less" scoped>
.login {
margin-top: 24px;
padding: 2px;
}
.submit {
margin-top: 12px;
width: 100%;
}
</style>
add an a-input-search with a v-model
v-model value would be string
v-model's value is an object containing the event
...
如果您和您的公司或组织使用了 ant-design-vue ,非常感谢您的支持,欢迎留下公司或产品名,您的回复将成为维护者、社区用户和观望者的信心来源。
在不泄露信息的前提下,建议把截图晒一晒~
无关回复将会定期删除
推荐回复格式:
- 产品:
- 公司或组织:(如果可以)
- 链接:(如果可以)
- 截图:(如果可以)
We appreciate you support if you or your organization is using ant-design-vue. You are welcome to leave replies about your product and organization here, which could became the confidence of maintiners, communication and undecided watchers.
Recommended reply format:
- Product:
- Company or Organization: (if any)
- Link: (if any)
- Screenshot: (if any)
0.6.4
win7/Firefox
<style>
加上scoped,样式能生效
<style>
加上scoped,样式不生效
https://vuecomponent.github.io/ant-design/components/form-cn/#components-form-demo-dynamic-form-item
长期使用iview,但是iview的css样式定制一直是一个坑,想转移一下阵地。
0.6.2
win7/ Chrome,FireFox
none
https://vuecomponent.github.io/ant-design/components/popover-cn/
Popover代码演示章节,点击从浮层内关闭的【Click me】按钮无反应
弹出气泡式的卡片浮层。
现在需要一个一个导入,希望作者能够跟elelement一样,一句话导入
例如如何配置一行多个可编辑的并不是全部编辑。
首先感谢提供这么棒的ant design的Vue实现。
我已经进行了一些基本的尝试,体验还不错,但是有一个比较头疼的问题,就是每一个组件都需要import之后再使用Vue.component
进行注册。而且官网上没有直接告诉我们应当导入哪一个组件,怎么去注册。只是给出了一个componen list的链接,在里面你们给出了所有组件的注册示例。所以现在我在开发的时候必须打开这个文件,添加组件的时候去参考里面的内容。使用起来不太方便。
通常情况下在Vue组件库中应当提供install方法注册所有组件,使用者在使用的时候可以直接使用Vue.use()
去导入整个组件库,不需要每次导入并且指定组件名。
官网给出的例子不起作用
vue-antd-ui: 0.4.2
webBroswer: Chromium 66, firefox 59
node.js: v8.9.4
npm: 5.6.0
vue: 2.5.2
<a-input-number :min="1" :max="10" v-model="form.step" @change="onChange" />
a number input box
here is the html:
<div data-v-0581c1e5="" class="ant-input-number">
<div class="ant-input-number-handler-wrap">
<span unselectable="unselectable" role="button" aria-label="Increase Value" class="ant-input-number-handler ant-input-number-handler-up ">
<span unselectable="unselectable" class="ant-input-number-handler-up-inner"></span>
</span>
<span unselectable="unselectable" role="button" aria-label="Decrease Value" aria-disabled="true" class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled">
<span unselectable="unselectable" class="ant-input-number-handler-down-inner"></span>
</span>
</div>
<div role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="1" class="ant-input-number-input-wrap">
<input autocomplete="off" max="10" min="1" step="1" class="ant-input-number-input">
</div>
</div>
html都有,但是a-input-number似乎缺少class了
oh my god, I will be crazy, git always tracks it when i modify my workspace setting.
thanks.
组件库暂时缺少单元测试,因精力有限,希望通过社区共建的方式来尽快完成所有组件的测试用例,进一步提高组件的正确性、稳定性等。
组件 | 认领状态 | 认领人 | 完成情况 |
---|---|---|---|
Affix | |||
AutoComplete | |||
Alert | |||
Avatar | |||
BackTop | |||
Badge | |||
Breadcrumb | |||
Button | 已认领 | tangjinzhou | 已完成 |
Calendar | |||
Card | |||
Collapse | |||
Cascader | |||
Checkbox | |||
Col | |||
DatePicker | |||
Divider | |||
Dropdown | |||
Form | |||
Icon | |||
Input | |||
InputNumber | |||
Layout | |||
LocaleProvider | |||
Menu | |||
Modal | |||
Pagination | |||
Popconfirm | |||
Popover | |||
Progress | |||
Radio | |||
Rate | |||
Row | |||
Select | |||
Slider | |||
Spin | |||
Steps | |||
Switch | |||
Table | |||
Transfer | |||
Tree | |||
Tabs | |||
Tag | |||
TimePicker | |||
Timeline | |||
Tooltip | |||
Upload |
大家可以在下面的 issue 评论认领,有任何疑问可以通过QQ群 217490093 联系我们
...0.4.1
...vue2.5.2
...模态框中能不能指定只显示Ok或者Cancel其中的一个
...
0.6.1
{ 'version-tag-prefix': 'v',
'version-git-tag': true,
'version-commit-hooks': true,
'version-git-sign': false,
'version-git-message': 'v%s',
'init-version': '1.0.0',
'init-license': 'MIT',
'save-prefix': '^',
'bin-links': true,
'ignore-scripts': false,
'ignore-optional': false,
registry: 'https://registry.npm.taobao.org',
'strict-ssl': true,
'user-agent': 'yarn/1.7.0 npm/? node/v8.11.2 win32 ia32',
'cache-folder': 'D:\\Program Files (x86)\\nodejs\\yarn_cache',
lastUpdateCheck: 1529443503735,
prefix: 'D:\\Program Files (x86)\\nodejs\\yarn_global',
bin: 'D:\\Program Files (x86)\\nodejs\\yarn_global\\bin' }
info npm config
{ prefix: 'D:\\Program Files (x86)\\nodejs\\npm_global',
cache: 'D:\\Program Files (x86)\\nodejs\\npm_cache',
registry: 'https://registry.npm.taobao.org',
electron_mirror: 'https://npm.taobao.org/mirrors/electron/',
python: 'D:\\python27\\python.exe',
msvs_version: '2015',
arch: 'ia32',
target_arch: 'ia32',
disturl: 'https://atom.io/download/atom-shell',
runtime: 'electron',
build_from_source: true,
bin: 'D:\\Program Files (x86)\\nodejs\\yarn_global\\bin' }
测试代码为官方文档中的代码,报错如下:
TypeError: Cannot read property 'layout' of undefined
"vue-antd-ui": "^0.5.4"
node 8.11.2
No link
###Problem
只要往表格里面放入:scroll="{ y: 240 }",就会出现表头消失不见。
我试过将此链接整个代码原封不动拿入工程
https://vuecomponent.github.io/ant-design/components/table-cn/#components-table-demo-fixed-header
运行结果依然是无表头 去掉scroll表头出现如下图
我这边放不上图片不知道咋回事儿。
<a-table
style="margin-right:24px;"
:columns="columns"
:dataSource="data"
:rowSelection="rowSelection"
bordered
rowKey='id'
:pagination='pagination'
:expandedRowKeys = "rowstr"
:indentSize='indentSize'
:hideDefaultSelections='hideDefaultSelections'
>
rowstr(){
return this.data.map(val=>val.id)
}
用的这个解决的expandedRowKeys
查一下吧
0.6.3
node 8.11.2
add a form
no warning
WARNING Compiled with 2 warnings 14:25:37
warning in ./node_modules/vue-antd-ui/es/form/index.js
"export 'FormComponentProps' was not found in './Form'
warning in ./node_modules/vue-antd-ui/es/form/index.js
"export 'ValidateCallback' was not found in './Form'
The missing exports is not really in ./Form
现在的select选择器使用起来感觉有点冗余,是否可以简化一下?
<a-select v-model="value">
<a-select-option v-for="option of options"
:value="option.value" :key="option.value">{{option.label}}</a-select-option>
</a-select>
<a-select v-model="value" :data-source="options"></a-select>
...
...
由于项目正在从iview迁移过来,所以在使用vue-antd-ui的过程中会有不少的疑问。得知0.6.2支持template语法自动校验功能,于是便和团队一起尝试了下,发现在实际操作中还是有诸多不便,下面仅仅以登陆为例说明。
之前的demo请参考 #43
1、
:fieldDecoratorOptions="{rules: [{ required: true, message: 'Please input your name' }]}"
改为
:fieldDecoratorOptions="[{ required: true, message: 'Please input your name' }]"
会不会好些。
虽然可以这样::fieldDecoratorOptions="{rules: [d_rules]}" 其中d_rules是Vue 实例的数据
,但是我们在将fieldDecoratorOptions绑定到vue实例数据时候:
不可能这样干:
account: {
rules: [{规则一},{规则二}]
},
password:{
rules: [{规则一},{规则二}]
}
更多的是这样:
rules: {
account: [{规则一},{规则二}],
password: [{规则一},{规则二}],
}
2、:fieldDecoratorOptions是否可能去掉,像iview一样在a-form指定rules
期待得到优化,感谢大家的付出。
下面这个demo是之前iview实现的自动校验,线上正在使用,自动校验基于 async-validator,blur事件也会触发校验。不得不说已经尽量简洁了。
<template>
<div class="login">
<!-- 表单 -->
<Form ref="form" :model="d_form" :rules="d_form_check">
<Form-item prop="account">
<i-input ref="d_form.account" v-model="d_form.account" :maxlength="32" type="text" size="large" autocomplete="off" spellcheck="false" placeholder="用户名/邮箱"></i-input>
</Form-item>
<Form-item ref="password" prop="password">
<i-input ref="d_form.password" v-model="d_form.password" :maxlength="32" type="password" size="large" autocomplete="off" spellcheck="false" placeholder="6~32位密码"></i-input>
</Form-item>
<Checkbox class="remember" v-model="d_form.remember">七日内免登录</Checkbox>
<Button v-on:click="submit()" type="primary" size="large" long>账号登录</Button>
</Form>
</div>
</template>
<script>
import {sleep} from '../../libs/function'
import apiMe from '../../api/me'
export default {
data() {
return {
d_loading: false,
d_form: {
account: '',
password: '',
remember: false
},
d_form_check: {
account: [
{
trigger: 'blur',
required: true,
message: '用户名不能为空!'
},
{
trigger: 'blur',
async validator(rule, value, callback) {
let type = ''
if (/^1[34578]{1}\d{9}$/.test(value)) type = 'phone'
else if (/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(value)) type = 'email'
else if (/^(?!\d+)[a-zA-Z0-9_-]{1,32}$/.test(value)) type = 'username'
else return callback(new Error('账号格式错误!'))
let res = await apiMe.uniqueness(type, value)
if (!res.data) return callback(new Error('该账号未注册!'))
}
}
],
password: [
{
trigger: 'blur',
required: true,
message: '密码不能为空!'
},
{
trigger: 'blur',
min: 6,
message: '密码至少6位!'
}
]
}
}
},
watch: {
'd_form.account': function(newValue) {
this.d_form.account = newValue.toLowerCase()
}
},
methods: {
async submit() {
if (this.d_loading) return
this.d_loading = true
this.$refs.form.validate(async errors => {
if (!errors) {
this.d_loading = false
return false
}
await this.$store.actions('me/login', {
form: this.d_form,
cbRes: async () => {
this.$router.push({path: '/home'})
},
cbErr: async err => {
this.$refs.password.error = ''
await sleep(200)
if (err.response.data.error.code === 'LOGIN_FAILED') this.$refs.password.error = '账号或密码错误!'
if (err.response.data.error.code === 'LOGIN_FAILED_EMAIL_NOT_VERIFIED') this.d_code = -1
}
})
await sleep(1000)
this.d_loading = false
})
}
}
}
</script>
<style lang="less" scoped>
.remember {
padding-left: 2px;
margin-bottom: 12px;
}
</style>
html
<a-input :value="addValue" placeholder="输入需要增加的次数"/>
data
data() {
return {
addValue: 12344,
increase: false,
dataSource: []
}
}
如上所示代码,无法实现双向绑定,既无法删除输入框内的数据,也无法通过输入框修改输入框内的数据
在文档里没有给出如何配置输入控件的校验规则,请教一下如何配置?
组件版本为:"vue-antd-ui": "^0.5.1",
使用环境为:web应用在浏览器中使用,chrome正常,mac safari正常
遇到问题:新版本的ipad浏览器可以正常使用,但在旧版本的ipad,ios9.3.5系统中组件无法显示,格栅中的内容也不能被显示出来,旧版本ipad安装360极速版组件也不能正常表达,初步考虑问题出在了webview上,怎么处理
import Vue from 'vue';
import { Button,Form } from 'vue-antd-ui';
Vue.component(Button.name, Button);
Vue.component(Form.name, Form);
Vue.component(Form.Item.name, Form.Item);
复制运行了登录的demo。
发现很多还是和react版本差很多,不知道作者的进度安排是什么呢?多久能赶上现在的react版本呢?
version: 0.6.1
This bottom is the small example,
<template lang="pug">
a-popover(
placement="bottomRight"
trigger="click"
)
div#content(slot="content")
a-select()
a-select-option() xxx
...
</template>
When I click the select
item, the popover will be colsed, but I only expect colsed when outside the content element.
参与共建咨询讨论等可加QQ群217490093
不过提bug还是要提issue的,谢谢!
加群提问前建议阅读 提问的智慧
如果你连文档都不会看,还是不要进群了!!!
layout组件预计什么时候上线
...
...node8.9.3,npm 6.1.0,win8.1
..
...
...
...
群友介绍了dayjs,发现这个组件比momentjs轻量,且api与momentjs一样。
想了解下是否可能换为momentjs。如果不会的话我就自己单独调整修改。
官网的backTop组件不起作用
0.5.4
<i class="far fa-clipboard-check" />
inside a <MenuItem>
Render icon only when the <Sider>
is collapsed
Icon is rendered correctly when the <Sider>
is expanded
When collapsed, however, part of the menu item text is still visible.
如题
vue-antd-ui版本:0.6.2
vue版本:2.5.16
疑是 ant-design/components/vc-table/src/Table.jsx
441行代码造成。
已知可以通过<a-table>
外部包裹<a-spin>
修复解决。
测试代码:
<a-table :loading="true" :columns="d_columns" :dataSource="[]"></a-table>
正确状态:
<a-table :loading="false" :columns="d_columns" :dataSource="[]"></a-table>
Cannot read property 'querySelectorAll' of undefined
<a-table rowKey='id' :columns="columns" :scroll="{ x: 1900,y:700 }" :dataSource="data" :loading='loadingData' @change="handleChange" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"/>
去掉
:loading='loadingData' @change="handleChange" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
就不会出现这个错误
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.