Skip to content

Commit

Permalink
feat: 重构 Popover，去除第三方依赖 (#1873)
Browse files Browse the repository at this point in the history 
* fix: 修复 ImagePreview 在Taro编译成H5后报错的问题

* fix: 地址关闭时, Close 事件触发两次问题解决

* feat: 组件DatePicker 添加双向绑定

* docs: 组件Picker文档修改

* feat: 组件Picker与DatePicker新增属性safe-area-inset-bottom

* feat: imagepreview

* fix: 组件imagepreview点击视频遮罩关闭(#1729)

* fix: 解决 Picker 在微信小程序中无法使用问题 (#1774)

* fix: 修改 Picker 组件 v-model 失效问题

* fix: 组件NoticeBar修改height之后，垂直轮播会卡顿

* fix: 删除Datepicker Demo演示多余内容

* fix: 组件Picker在JD小程序上适配

* fix: 组件Address京东小程序适配

* feat: 京东小程序适配

* fix: 删除空格

* feat: 删除console

* fix: 京东小程序imagepreview适配

* fix: 修复 imagepreview 动态设置 initNo 显示不正确问题

* fix: 组件 InfiniteLoading 某些情况下会错误触发下拉刷新#1819

* fix: 删除pullrefresh

* feat: 组件 imagepreview瘦身

* feat: 组件Picker 瘦身

* feat: popover

* feat: 新增

* feat: 组件 Popover 重构

* feat: 重构 popover

* fix: 删除多余文件

* fix: address线上问题修改

* fix: 完善imagepreview

* feat: 公共函数提取

* feat: 函数式改用 createComponent

* feat: 组件冲突解决

* feat: 更换实现方式
  • Loading branch information
@yangxiaolu1993
yangxiaolu1993 authored Nov 29, 2022
1 parent 618dea7 commit c0bc148
Show file tree
Hide file tree
Showing 8 changed files with 390 additions and 596 deletions.
1 change: 0 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,6 @@
"devDependencies": {
"@commitlint/cli": "^10.0.0",
"@commitlint/config-conventional": "^10.0.0",
"@popperjs/core": "^2.11.5",
"@tarojs/taro": "3.5.6",
"@types/jest": "^26.0.22",
"@types/node": "^17.0.16",
Expand Down
146 changes: 80 additions & 66 deletions src/packages/__VUE/popover/demo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,14 @@

<nut-row type="flex">
<nut-col :span="8">
<nut-popover
v-model:visible="visible.lightTheme"
:list="iconItemList"
location="bottom-start"
@choose="chooseItem"
>
<nut-popover v-model:visible="lightTheme" :list="iconItemList" location="bottom-start" @choose="chooseItem">
<template #reference>
<nut-button type="primary" shape="square">{{ translate('light') }}</nut-button>
</template>
</nut-popover>
</nut-col>
<nut-col :span="8">
<nut-popover v-model:visible="visible.darkTheme" theme="dark" :list="iconItemList">
<nut-popover v-model:visible="darkTheme" theme="dark" :list="iconItemList">
<template #reference>
<nut-button type="primary" shape="square">{{ translate('dark') }}</nut-button>
</template>
Expand All @@ -28,14 +23,14 @@

<nut-row type="flex">
<nut-col :span="8">
<nut-popover v-model:visible="visible.showIcon" theme="dark" :list="itemList">
<nut-popover v-model:visible="showIcon" theme="dark" :list="itemList">
<template #reference>
<nut-button type="primary" shape="square">{{ translate('showIcon') }}</nut-button>
</template>
</nut-popover>
</nut-col>
<nut-col :span="8">
<nut-popover v-model:visible="visible.disableAction" :list="itemListDisabled">
<nut-popover v-model:visible="disableAction" :list="itemListDisabled" location="bottom-end">
<template #reference>
<nut-button type="primary" shape="square">{{ translate('disableAction') }}</nut-button>
</template>
Expand All @@ -44,7 +39,7 @@
</nut-row>

<h2>{{ translate('title2') }}</h2>
<nut-popover v-model:visible="visible.Customized" location="bottom-start">
<nut-popover v-model:visible="Customized" location="top-start" custom-class="customClass">
<template #reference>
<nut-button type="primary" shape="square">{{ translate('content') }}</nut-button>
</template>
Expand All @@ -61,29 +56,22 @@

<h2>{{ translate('title3') }}</h2>

<nut-row type="flex" justify="center">
<nut-col :span="24" style="text-align: center">
<nut-popover
v-model:visible="visible.customPositon"
:location="curPostion"
theme="dark"
:list="positionList"
customClass="brickBox"
>
<template #reference>
<div class="brick"></div>
</template>
</nut-popover>
</nut-col>
</nut-row>

<nut-radiogroup v-model="curPostion" direction="horizontal" class="radiogroup">
<nut-radio shape="button" :label="pos" v-for="(pos, i) in position" :key="i">{{ pos }}</nut-radio>
</nut-radiogroup>
<nut-cell title="点击查看更多方向" @click="handlePicker"></nut-cell>
<nut-picker v-model:visible="showPicker" :columns="columns" title="" @change="change" :swipe-duration="500">
<template #top>
<div class="brickBox">
<nut-popover v-model:visible="customPositon" :location="curPostion" theme="dark" :list="positionList">
<template #reference>
<div class="brick"></div>
</template>
</nut-popover>
</div>
</template>
</nut-picker>
</div>
</template>
<script lang="ts">
import { reactive, ref } from 'vue';
import { reactive, ref, toRefs } from 'vue';
import { createComponent } from '@/packages/utils/create';
const { createDemo, translate } = createComponent('popover');
import { useTranslate } from '@/sites/assets/util/useTranslate';
Expand Down Expand Up @@ -116,7 +104,7 @@ const initTranslate = () =>
export default createDemo({
setup() {
initTranslate();
const visible = ref({
const state = reactive({
showIcon: false,
placement: false,
darkTheme: false,
Expand All @@ -126,22 +114,25 @@ export default createDemo({
topLocation: false, //向上弹出
rightLocation: false, //向右弹出
leftLocation: false, //向左弹出
customPositon: false
customPositon: false,
showPicker: false
});
const curPostion = ref('top');
const position = ref([
'top',
'top-start',
'top-end',
'right',
'right-start',
'right-end',
'bottom',
'bottom-start',
'bottom-end',
'left',
'left-start',
'left-end'
const columns = ref([
{ text: 'top', value: 'top' },
{ text: 'top-start', value: 'top-start' },
{ text: 'top-end', value: 'top-end' },
{ text: 'right', value: 'right' },
{ text: 'right-start', value: 'right-start' },
{ text: 'right-end', value: 'right-end' },
{ text: 'bottom', value: 'bottom' },
{ text: 'bottom-start', value: 'bottom-start' },
{ text: 'bottom-end', value: 'bottom-end' },
{ text: 'left', value: 'left' },
{ text: 'left-start', value: 'left-start' },
{ text: 'left-end', value: 'left-end' }
]);
const iconItemList = reactive([
Expand Down Expand Up @@ -223,20 +214,32 @@ export default createDemo({
const chooseItem = (item: unknown, index: number) => {
console.log(item, index);
alert('selected');
};
const handlePicker = () => {
state.showPicker = true;
setTimeout(() => {
state.customPositon = true;
});
};
const change = ({ selectedValue }) => {
curPostion.value = selectedValue[0];
state.customPositon = true;
};
return {
iconItemList,
itemList,
visible,
...toRefs(state),
itemListDisabled,
selfContent,
chooseItem,
position,
curPostion,
positionList,
translate
translate,
columns,
change,
handlePicker
};
}
});
Expand All @@ -247,10 +250,12 @@ export default createDemo({
}
.brickBox {
margin: 80px 0;
display: flex;
justify-content: center;
.brick {
width: 60px;
height: 60px;
background: #1989fa;
background: linear-gradient(135deg, #fa2c19 0%, #fa6419 100%);
border-radius: 10px;
}
}
Expand All @@ -271,23 +276,32 @@ export default createDemo({
}
}
.self-content {
width: 195px;
display: flex;
flex-wrap: wrap;
&-item {
margin-top: 10px;
margin-bottom: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.nut-popover-content {
width: 120px;
}
.customClass {
.nut-popover-content {
width: auto;
}
&-desc {
margin-top: 5px;
width: 60px;
font-size: 10px;
text-align: center;
.self-content {
width: 195px;
display: flex;
flex-wrap: wrap;
&-item {
margin-top: 10px;
margin-bottom: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
&-desc {
margin-top: 5px;
width: 60px;
font-size: 10px;
text-align: center;
}
}
}
</style>
8 changes: 8 additions & 0 deletions src/packages/__VUE/popover/doc.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -296,6 +296,14 @@ export default {
| offset `v3.1.21` | the offset of the occurrence position | [number, number] | [0, 12] |
| show-arrow `v3.1.21` | whether to show small arrows | boolean | true |
| custom-class `v3.1.21` | custom class | string | '' |
| duration `v3.1.21` | Transition duration | [number, number] | 0.3 |
| iconPrefix `v3.1.21` | Icon className prefix | string | 'nut-icon'' |
| overlay `v3.2.8` | Whether to show overlay | Boolean | false |
| overlay-class `v3.2.8` | Custom overlay class | string | '' |
| overlay-style `v3.2.8` | Custom overlay style | string | '' |
| close-on-click-overlay `v3.2.8` | Whether to close when clicking overlay | boolean | true |
| close-on-click-action `v3.2.8` | Whether to close when clicking action | boolean | true |
| close-on-click-outside `v3.2.8` | Whether to close when clicking outside | boolean | true |

### List data structure

Expand Down
8 changes: 8 additions & 0 deletions src/packages/__VUE/popover/doc.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -295,6 +295,14 @@ export default {
| offset `v3.1.21` | 出现位置的偏移量 | [number, number] | [0, 12] |
| show-arrow `v3.1.21` | 是否显示小箭头 | boolean | true |
| custom-class `v3.1.21` | 自定义 class 值 | string | '' |
| duration `v3.1.21` | 动画时长 | [number, number] | 0.3 |
| iconPrefix `v3.1.21` | 图标自定义类值,等同于 Icon 组件的[ class-prefix 属性](https://nutui.jd.com/#/zh-CN/component/icon) | string | 'nut-icon'' |
| overlay `v3.2.8` | 是否显示遮罩层 | Boolean | false |
| overlay-class `v3.2.8` | 自定义遮罩层类名 | string | '' |
| overlay-style `v3.2.8` | 自定义遮罩层样式 | string | '' |
| close-on-click-overlay `v3.2.8` | 是否在点击遮罩层后关闭菜单 | boolean | true |
| close-on-click-action `v3.2.8` | 是否在点击选项后关闭 | boolean | true |
| close-on-click-outside `v3.2.8` | 是否在点击外部元素后关闭菜单 | boolean | true |

### List 数据结构

Expand Down
Loading

0 comments on commit c0bc148

Please sign in to comment.