Merge branch 'dev' into next

This commit is contained in:
chenjiahan
2022-07-23 21:20:27 +08:00
22 changed files with 141 additions and 86 deletions
@@ -7,3 +7,7 @@
<demo-button color="#03a9f4" style="margin-left: 15px">按钮</demo-button>
</demo-block>
</template>
<script setup>
import DemoButton from '../index.vue';
</script>
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "create-vant-cli-app",
"version": "2.0.0",
"version": "2.0.1",
"description": "Create Vant CLI App",
"main": "lib/index.js",
"bin": {
+5
View File
@@ -1,5 +1,10 @@
# 更新日志
## v5.0.0 (未发布)
- 升级 `vite` 3.0.0
- 不再默认安装 `gh-pages` 依赖,请将 `package.json` 中的 `gh-pages -d site-dist` 替换为 `npx gh-pages -d site-dist`
## v4.0.3
`2022-07-02`
+3 -3
View File
@@ -57,8 +57,8 @@
"@vant/markdown-vetur": "^2.3.0",
"@vant/stylelint-config": "^1.4.2",
"@vant/touch-emulator": "^1.3.2",
"@vitejs/plugin-vue": "^2.0.0",
"@vitejs/plugin-vue-jsx": "^1.3.3",
"@vitejs/plugin-vue": "^3.0.1",
"@vitejs/plugin-vue-jsx": "^2.0.0",
"@vue/babel-plugin-jsx": "^1.1.1",
"autoprefixer": "^10.4.0",
"commander": "^9.3.0",
@@ -88,7 +88,7 @@
"stylelint": "^13.0.0",
"transliteration": "^2.2.0",
"typescript": "^4.7.4",
"vite": "^2.9.0",
"vite": "^3.0.0",
"vite-plugin-html": "^2.1.1",
"vite-plugin-md": "^0.11.4",
"vue-router": "^4.0.12"
+1 -1
View File
@@ -204,7 +204,7 @@ export function getViteConfigForSiteProd(): InlineConfig {
base: publicPath,
build: {
outDir,
brotliSize: false,
reportCompressedSize: false,
emptyOutDir: true,
// https://github.com/youzan/vant/issues/9703
cssTarget: ['chrome53'],
+1 -1
View File
@@ -250,7 +250,7 @@ export default {
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| v-model | Check status | _boolean_ | `false` |
| name | Checkbox name | _any_ | - |
| name | Checkbox name, usually a unique string or number | _any_ | - |
| shape | Can be set to `square` | _string_ | `round` |
| disabled | Disable checkbox | _boolean_ | `false` |
| label-disabled | Whether to disable label click | _boolean_ | `false` |
+11 -11
View File
@@ -265,17 +265,17 @@ export default {
### Checkbox Props
| 参数 | 说明 | 类型 | 默认值 |
| -------------- | ------------------------- | ------------------ | --------- |
| v-model | 是否为选中状态 | _boolean_ | `false` |
| name | 标识符 | _any_ | - |
| shape | 形状,可选值为 `square` | _string_ | `round` |
| disabled | 是否禁用复选框 | _boolean_ | `false` |
| label-disabled | 是否禁用复选框文本点击 | _boolean_ | `false` |
| label-position | 文本位置,可选值为 `left` | _string_ | `right` |
| icon-size | 图标大小,默认单位为 `px` | _number \| string_ | `20px` |
| checked-color | 选中状态颜色 | _string_ | `#1989fa` |
| bind-group | 是否与复选框组绑定 | _boolean_ | `true` |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| v-model | 是否为选中状态 | _boolean_ | `false` |
| name | 标识符,通常为一个唯一的字符串或数字 | _any_ | - |
| shape | 形状,可选值为 `square` | _string_ | `round` |
| disabled | 是否禁用复选框 | _boolean_ | `false` |
| label-disabled | 是否禁用复选框文本点击 | _boolean_ | `false` |
| label-position | 文本位置,可选值为 `left` | _string_ | `right` |
| icon-size | 图标大小,默认单位为 `px` | _number \| string_ | `20px` |
| checked-color | 选中状态颜色 | _string_ | `#1989fa` |
| bind-group | 是否与复选框组绑定 | _boolean_ | `true` |
### CheckboxGroup Props
+13 -2
View File
@@ -1,7 +1,10 @@
import { useRect } from '@vant/use';
import { Ref, ref, onMounted, nextTick } from 'vue';
export const useHeight = (element: Element | Ref<Element | undefined>) => {
export const useHeight = (
element: Element | Ref<Element | undefined>,
withSafeArea?: boolean
) => {
const height = ref<number>();
const setHeight = () => {
@@ -10,8 +13,16 @@ export const useHeight = (element: Element | Ref<Element | undefined>) => {
onMounted(() => {
nextTick(setHeight);
// If the element is using safe area, the system will not return the correct height on page load.
// So we need to wait for the height to be set.
// https://github.com/youzan/vant/issues/10131
setTimeout(setHeight, 100);
// https://stackoverflow.com/questions/64891541
if (withSafeArea) {
for (let i = 1; i <= 3; i++) {
setTimeout(setHeight, 100 * i);
}
}
});
return height;
@@ -3,7 +3,7 @@ import { useHeight } from './use-height';
import type { BEM } from '../utils/create';
export function usePlaceholder(contentRef: Ref<Element | undefined>, bem: BEM) {
const height = useHeight(contentRef);
const height = useHeight(contentRef, true);
return (renderContent: () => JSX.Element) => (
<div
+1 -1
View File
@@ -509,7 +509,7 @@ export default {
| Key | Description | Type |
| --- | --- | --- |
| required | Whether to be a required field, the value is not allowed to be empty string, empty array, `undefined`, `null` | _boolean_ |
| required | Whether to be a required field, the value is not allowed to be empty string, empty array, `false`, `undefined`, `null` | _boolean_ |
| message | Error message | _string \| (value, rule) => string_ |
| validator | Custom validator | _(value, rule) => boolean \| string \| Promise_ |
| pattern | Regex pattern | _RegExp_ |
+1 -1
View File
@@ -545,7 +545,7 @@ export default {
| 键名 | 说明 | 类型 |
| --- | --- | --- |
| required | 是否为必选字段,当值为空字符串、空数组、`undefined``null` 时,校验不通过 | _boolean_ |
| required | 是否为必选字段,当值为空字符串、空数组、`false``undefined``null` 时,校验不通过 | _boolean_ |
| message | 错误提示文案 | _string \| (value, rule) => string_ |
| validator | 通过函数进行校验 | _(value, rule) => boolean \| string \| Promise_ |
| pattern | 通过正则表达式进行校验 | _RegExp_ |
+25 -21
View File
@@ -93,25 +93,31 @@ export default defineComponent({
const wrapperRef = ref<HTMLElement>();
const popoverRef = ref<ComponentInstance>();
const getPopoverOptions = () => ({
placement: props.placement,
modifiers: [
{
name: 'computeStyles',
options: {
adaptive: false,
gpuAcceleration: false,
},
},
extend({}, offsetModifier, {
options: {
offset: props.offset,
},
}),
],
});
const createPopperInstance = () => {
if (wrapperRef.value && popoverRef.value) {
return createPopper(wrapperRef.value, popoverRef.value.popupRef.value, {
placement: props.placement,
modifiers: [
{
name: 'computeStyles',
options: {
adaptive: false,
gpuAcceleration: false,
},
},
extend({}, offsetModifier, {
options: {
offset: props.offset,
},
}),
],
});
return createPopper(
wrapperRef.value,
popoverRef.value.popupRef.value,
getPopoverOptions()
);
}
return null;
};
@@ -125,9 +131,7 @@ export default defineComponent({
if (!popper) {
popper = createPopperInstance();
} else {
popper.setOptions({
placement: props.placement,
});
popper.setOptions(getPopoverOptions());
}
});
};
@@ -207,7 +211,7 @@ export default defineComponent({
}
});
watch(() => [props.show, props.placement], updateLocation);
watch(() => [props.show, props.offset, props.placement], updateLocation);
useClickAway(wrapperRef, onClickAway, { eventName: 'touchstart' });
+12 -1
View File
@@ -85,6 +85,17 @@ const show = ref({
const showPicker = ref(false);
const currentPlacement = ref<PopoverPlacement>('top');
const onClickChoosePlacement = () => {
showPicker.value = true;
setTimeout(() => {
show.value = {
...show.value,
placement: true,
};
}, 300);
};
const onPickerChange = (value: PopoverPlacement) => {
setTimeout(() => {
show.value.placement = true;
@@ -129,7 +140,7 @@ const onSelect = (action: { text: string }) => showToast(action.text);
readonly
name="picker"
:label="t('choosePlacement')"
@click="showPicker = true"
@click="onClickChoosePlacement"
/>
<van-popup
+1 -1
View File
@@ -178,7 +178,7 @@ import type {
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| name | Radio name | _any_ | - |
| name | Radio name, usually a unique string or number | _any_ | - |
| shape | Can be set to `square` | _string_ | `round` |
| disabled | Whether to disable radio | _boolean_ | `false` |
| label-disabled | Whether to disable label click | _boolean_ | `false` |
+9 -9
View File
@@ -176,15 +176,15 @@ export default {
### Radio Props
| 参数 | 说明 | 类型 | 默认值 |
| -------------- | ------------------------- | ------------------ | --------- |
| name | 标识符 | _any_ | - |
| shape | 形状,可选值为 `square` | _string_ | `round` |
| disabled | 是否为禁用状态 | _boolean_ | `false` |
| label-disabled | 是否禁用文本内容点击 | _boolean_ | `false` |
| label-position | 文本位置,可选值为 `left` | _string_ | `right` |
| icon-size | 图标大小,默认单位为 `px` | _number \| string_ | `20px` |
| checked-color | 选中状态颜色 | _string_ | `#1989fa` |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| name | 标识符,通常为一个唯一的字符串或数字 | _any_ | - |
| shape | 形状,可选值为 `square` | _string_ | `round` |
| disabled | 是否为禁用状态 | _boolean_ | `false` |
| label-disabled | 是否禁用文本内容点击 | _boolean_ | `false` |
| label-position | 文本位置,可选值为 `left` | _string_ | `right` |
| icon-size | 图标大小,默认单位为 `px` | _number \| string_ | `20px` |
| checked-color | 选中状态颜色 | _string_ | `#1989fa` |
### RadioGroup Props
+1 -1
View File
@@ -128,7 +128,7 @@ export default {
| max | Max value | _number \| string_ | - |
| default-value | Default value, valid when v-model is empty | _number \| string_ | `1` |
| step | Value change step | _number \| string_ | `1` |
| name | Stepper name | _number \| string_ | - |
| name | Stepper name, usually a unique string or number | _number \| string_ | - |
| input-width | Input width | _number \| string_ | `32px` |
| button-size | Button size | _number \| string_ | `28px` |
| decimal-length | Decimal length | _number \| string_ | - |
+1 -1
View File
@@ -148,7 +148,7 @@ export default {
| max | 最大值 | _number \| string_ | - |
| default-value | 初始值,当 v-model 为空时生效 | _number \| string_ | `1` |
| step | 步长,每次点击时改变的值 | _number \| string_ | `1` |
| name | 标识符,可以在 `change` 事件回调参数中获取 | _number \| string_ | - |
| name | 标识符,通常为一个唯一的字符串或数字,可以在 `change` 事件回调参数中获取 | _number \| string_ | - |
| input-width | 输入框宽度,默认单位为 `px` | _number \| string_ | `32px` |
| button-size | 按钮大小以及输入框高度,默认单位为 `px` | _number \| string_ | `28px` |
| decimal-length | 固定显示的小数位数 | _number \| string_ | - |
+1 -1
View File
@@ -107,7 +107,7 @@ export default {
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| name | Identifier of SwipeCell | _number \| string_ | - |
| name | Identifier of SwipeCell, usually a unique string or number | _number \| string_ | - |
| left-width | Width of the left swipe area | _number \| string_ | `auto` |
| right-width | Width of the right swipe area | _number \| string_ | `auto` |
| before-close | Callback function before close | _(args) => boolean \| Promise\<boolean\>_ | - |
+1 -1
View File
@@ -114,7 +114,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| name | 标识符,可以在事件参数中获取到 | _number \| string_ | `''` |
| name | 标识符,通常为一个唯一的字符串或数字,可以在事件参数中获取到 | _number \| string_ | `''` |
| left-width | 指定左侧滑动区域宽度,单位为 `px` | _number \| string_ | `auto` |
| right-width | 指定右侧滑动区域宽度,单位为 `px` | _number \| string_ | `auto` |
| before-close | 关闭前的回调函数,返回 `false` 可阻止关闭,支持返回 Promise | _(args) => boolean \| Promise\<boolean\>_ | - |
+1 -1
View File
@@ -308,7 +308,7 @@ export default {
| --- | --- | --- | --- |
| v-model | List of uploaded files | _FileListItem[]_ | - |
| accept | Accepted [file type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers) | _string_ | `image/*` |
| name | Input name | _number \| string_ | - |
| name | Input name, usually a unique string or number | _number \| string_ | - |
| preview-size | Size of preview image | _number \| string \| Array_ | `80px` |
| preview-image | Whether to show image preview | _boolean_ | `true` |
| preview-full-image | Whether to show full screen image preview when image is clicked | _boolean_ | `true` |
+1 -1
View File
@@ -327,7 +327,7 @@ export default {
| --- | --- | --- | --- |
| v-model | 已上传的文件列表 | _FileListItem[]_ | - |
| accept | 允许上传的文件类型,[详细说明](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file#%E9%99%90%E5%88%B6%E5%85%81%E8%AE%B8%E7%9A%84%E6%96%87%E4%BB%B6%E7%B1%BB%E5%9E%8B) | _string_ | `image/*` |
| name | 标识符,可以在回调函数的第二项参数中获取 | _number \| string_ | - |
| name | 标识符,通常为一个唯一的字符串或数字,可以在回调函数的第二项参数中获取 | _number \| string_ | - |
| preview-size | 预览图和上传区域的尺寸,默认单位为 `px` | _number \| string \| Array_ | `80px` |
| preview-image | 是否在上传完成后展示预览图 | _boolean_ | `true` |
| preview-full-image | 是否在点击预览图后展示全屏图片预览 | _boolean_ | `true` |