Skip to content

N
nutui

京东前端 / nutui

通知 37
Star 4
Fork 1
N
nutui

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 3660b6f7 编写于 作者: K kaixuan 提交者： GitHub
浏览文件
操作

fix: picker 滑动问题和props问题修改 (#419) 

* feat: add datepicker

* fix: 修复datepicker问题

* fix: datepicker解决导入相关问题

* fix: picker 联动bug

* fix: picker bug

* fix: picker props
上级 9742012f
隐藏空白更改
内联 并排
Showing with 47 addition and 71 deletion
src/packages/datepicker/demo.vue
浏览文件 @ 3660b6f7
......@@ -6,12 +6,10 @@
<nut-cell title="日期选择" :desc="desc2" @click="open(1)"></nut-cell>
<h2>限制开始结束时间（有默认值）</h2>
<nut-cell title="日期时间选择" :desc="desc3" @click="open(2)"></nut-cell>
<h2>12小时制</h2>
<nut-cell title="日期选择" :desc="desc4" @click="open(3)"></nut-cell>
<h2>限制开始结束小时</h2>
<nut-cell title="时间选择" :desc="desc5" @click="open(4)"></nut-cell>
<nut-cell title="时间选择" :desc="desc4" @click="open(3)"></nut-cell>
<h2>分钟数递增步长设置</h2>
<nut-cell title="时间选择" :desc="desc6" @click="open(5)"></nut-cell>
<nut-cell title="时间选择" :desc="desc5" @click="open(4)"></nut-cell>
<nut-datepicker
v-model="currentDate"
......@@ -21,7 +19,7 @@
confirm(0, val);
}
"
v-model:is-visible="show"
v-model:visible="show"
:is-show-chinese="false"
></nut-datepicker>
<nut-datepicker
......@@ -34,7 +32,7 @@
confirm(1, val);
}
"
v-model:is-visible="show2"
v-model:visible="show2"
:is-show-chinese="false"
></nut-datepicker>
<nut-datepicker
......@@ -48,7 +46,7 @@
confirm(2, val);
}
"
v-model:is-visible="show3"
v-model:visible="show3"
></nut-datepicker>
<nut-datepicker
v-model="currentDate"
......@@ -56,26 +54,12 @@
type="time"
:min-date="minDate"
:max-date="maxDate"
:is-use12-hours="true"
@confirm="
val => {
confirm(3, val);
}
"
v-model:is-visible="show4"
></nut-datepicker>
<nut-datepicker
v-model="currentDate"
title="时间选择"
type="time"
:min-date="minDate"
:max-date="maxDate"
@confirm="
val => {
confirm(4, val);
}
"
v-model:is-visible="show5"
v-model:visible="show4"
></nut-datepicker>
<nut-datepicker
v-model="currentDate"
......@@ -86,10 +70,10 @@
:max-date="maxDate"
@confirm="
val => {
confirm(5, val);
confirm(4, val);
}
"
v-model:is-visible="show6"
v-model:visible="show5"
></nut-datepicker>
</div>
</template>
......@@ -106,31 +90,28 @@ export default createDemo({
const show3 = ref(false);
const show4 = ref(false);
const show5 = ref(false);
const show6 = ref(false);
const showList = [show, show2, show3, show4, show5, show6];
const showList = [show, show2, show3, show4, show5];
const currentDate = new Date(2020, 0, 1);
const today = currentDate;
const desc1 = ref('2020-1-1');
const desc2 = ref('2020-1-1');
const desc3 = ref('2020年-1月-1日-0时-0分');
const desc4 = ref('0时-0分-上午');
const desc4 = ref('0时-0分-0秒');
const desc5 = ref('0时-0分-0秒');
const desc6 = ref('0时-0分-0秒');
const descList = [desc1, desc2, desc3, desc4, desc5, desc6];
const descList = [desc1, desc2, desc3, desc4, desc5];
return {
show,
show2,
show3,
show4,
show5,
show6,
desc1,
desc2,
desc3,
desc4,
desc5,
desc6,
currentDate,
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1),
......
src/packages/datepicker/doc.md
浏览文件 @ 3660b6f7
......@@ -21,7 +21,7 @@ app.use(DatePicker);
<nut-datepicker
v-model="currentDate"
@confirm="confirm"
v-model:is-visible="show"
v-model:visible="show"
:is-show-chinese="false"
></nut-datepicker>
```
......@@ -53,7 +53,7 @@ export default createDemo({
:min-date="minDate"
:max-date="maxDate"
@confirm="confirm"
v-model:is-visible="show"
v-model:visible="show"
:is-show-chinese="false"
></nut-datepicker>
```
......@@ -88,7 +88,7 @@ export default createDemo({
:max-date="maxDate"
type="datetime"
@confirm="confirm"
v-model:is-visible="show"
v-model:visible="show"
></nut-datepicker>
```
```javascript
......@@ -123,7 +123,7 @@ export default createDemo({
:max-date="maxDate"
:is-use12-hours="true"
@confirm="confirm"
v-model:is-visible="show"
v-model:visible="show"
></nut-datepicker>
```
### 时间选择-分钟数递增步长设置
......@@ -136,7 +136,7 @@ export default createDemo({
:max-date="maxDate"
:is-use12-hours="true"
@confirm="confirm"
v-model:is-visible="show"
v-model:visible="show"
></nut-datepicker>
```
......@@ -148,7 +148,7 @@ export default createDemo({
|--------------|----------------------------------|--------|------------------|
| v-model | 初始值 | Date |`null` |
| type | 类型，日期'date'， 日期时间'datetime'，时间'time' | String |`'date'` |
| is-visible | 是否可见 | Boolean | `false` |
| visible | 是否可见 | Boolean | `false` |
| is-use12-hours | 是否十二小时制度，只限类型为'time'时使用 | Boolean | `false` |
| minute-step | 分钟步进值 | Number | `1` |
| is-show-chinese | 每列是否展示中文 | Boolean | `false` |
......
src/packages/datepicker/index.vue
浏览文件 @ 3660b6f7
<template>
<view-block>
<nut-picker
:is-visible="show"
:visible="show"
@close="closeHandler"
:list-data="columns"
@change="changeHandler"
......@@ -35,7 +35,7 @@ export default create({
children: [picker],
props: {
modelValue: null,
isVisible: {
visible: {
type: Boolean,
default: false
},
......@@ -47,10 +47,6 @@ export default create({
type: String,
default: 'date'
},
isUse12Hours: {
type: Boolean,
default: false
},
isShowChinese: {
type: Boolean,
default: true
......@@ -70,7 +66,7 @@ export default create({
validator: isDate
}
},
emits: ['click', 'update:isVisible', 'confirm'],
emits: ['click', 'update:visible', 'confirm'],
setup(props, { emit }) {
const state = reactive({
......@@ -183,11 +179,7 @@ export default create({
result = result.slice(0, 5);
break;
case 'time':
if (props.isUse12Hours) {
result = result.slice(3, 5);
} else {
result = result.slice(3, 6);
}
result = result.slice(3, 6);
break;
case 'month-day':
result = result.slice(1, 3);
......@@ -269,9 +261,6 @@ export default create({
res.type
);
});
if (props.type === 'time' && props.isUse12Hours) {
val.push({ values: ['上午', '下午'], defaultIndex: 0 });
}
return val;
});
const handleClick = (event: Event) => {
......@@ -279,11 +268,11 @@ export default create({
};
const closeHandler = () => {
emit('update:isVisible', false);
emit('update:visible', false);
};
const confirm = (val: Event) => {
emit('update:isVisible', false);
emit('update:visible', false);
emit('confirm', val);
};
......@@ -299,7 +288,7 @@ export default create({
);
watch(
() => props.isVisible,
() => props.visible,
val => {
state.show = val;
}
......
src/packages/picker/Column.vue
浏览文件 @ 3660b6f7
......@@ -155,7 +155,7 @@ export default create({
const momentum = (distance: number, duration: number) => {
const speed = Math.abs(distance / duration);
distance = state.offset + (speed / 0.003) * (distance < 0 ? -1 : 1);
distance = state.offset + (speed / 0.03) * (distance < 0 ? -1 : 1);
const index = getIndexByOffset(distance);
......
src/packages/picker/demo.vue
浏览文件 @ 3660b6f7
......@@ -8,21 +8,21 @@
<nut-cell title="请选择地址" :desc="desc3" @click="open(3)"></nut-cell>
<nut-picker
v-model:is-visible="show"
v-model:visible="show"
:list-data="listData1"
title="城市选择"
@confirm="confirm"
@close="close"
></nut-picker>
<nut-picker
v-model:is-visible="show2"
v-model:visible="show2"
:list-data="listData2"
title="多列选择"
@confirm="confirm2"
@close="close"
></nut-picker>
<nut-picker
v-model:is-visible="show3"
v-model:visible="show3"
:list-data="listData3"
title="地址选择"
@confirm="confirm3"
......
src/packages/picker/doc.md
浏览文件 @ 3660b6f7
......@@ -20,7 +20,7 @@ app.use(Picker);
```html
<nut-cell title="请选择城市" :desc="desc" @click="open"></nut-cell>
<nut-picker
v-model:is-visible="show"
v-model:visible="show"
:list-data="listData"
title="城市选择"
@confirm="confirm"
......@@ -59,7 +59,7 @@ export default createDemo({
```html
<nut-cell title="请选择时间" :desc="desc" @click="open"></nut-cell>
<nut-picker
v-model:is-visible="show"
v-model:visible="show"
:list-data="listData"
title="多列选择"
@confirm="confirm"
......@@ -100,7 +100,7 @@ export default createDemo({
```html
<nut-cell title="地址" :desc="desc" @click="open"></nut-cell>
<nut-picker
v-model:is-visible="show"
v-model:visible="show"
:list-data="listData"
title="地址选择"
@confirm="confirm"
......@@ -162,7 +162,7 @@ export default createDemo({
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------------------------|--------|------------------|
| is-visible | 是否可见 | Boolean | false |
| visible | 是否可见 | Boolean | false |
| title | 设置标题 | String | - |
| list-data | 列表数据 | Array | - |
| default-value-index | 初始选中项的索引，默认为 0 | number | 0 |
......
src/packages/picker/index.scss
浏览文件 @ 3660b6f7
......@@ -46,6 +46,9 @@
color: #fa2c19;
font-size: 16px;
}
&__button {
cursor: pointer;
}
&__item {
display: flex;
justify-content: center;
......
src/packages/picker/index.vue
浏览文件 @ 3660b6f7
......@@ -7,9 +7,13 @@
@close="close"
>
<view-block class="nut-picker__bar">
<view-block class="nut-picker__left" @click="close">取消</view-block>
<view-block class="nut-picker__left nut-picker__button" @click="close"
>取消</view-block
>
<view-block> {{ title }}</view-block>
<view-block @click="confirm()">确定</view-block>
<view-block class="nut-picker__button" @click="confirm()"
>确定</view-block
>
</view-block>
<view-block class="nut-picker__column">
......@@ -61,7 +65,7 @@ const { create, componentName } = createComponent('picker');
export default create({
children: [column, popup],
props: {
isVisible: {
visible: {
type: Boolean,
default: false
},
......@@ -71,8 +75,7 @@ export default create({
},
...commonProps
},
emits: ['close', 'change', 'confirm', 'update:isVisible'],
emits: ['close', 'change', 'confirm', 'update:visible'],
setup(props, { emit }) {
const childrenKey = 'children';
const valuesKey = 'values';
......@@ -172,7 +175,7 @@ export default create({
const close = () => {
emit('close');
emit('update:isVisible', false);
emit('update:visible', false);
};
const changeHandler = (columnIndex: number, dataIndex: number) => {
......@@ -223,11 +226,11 @@ export default create({
);
}
emit('update:isVisible', false);
emit('update:visible', false);
};
watch(
() => props.isVisible,
() => props.visible,
val => {
state.show = val;
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或