Merge branch 'dev' into next
This commit is contained in:
@@ -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,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": {
|
||||
|
||||
@@ -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`
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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'],
|
||||
|
||||
@@ -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` |
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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_ |
|
||||
|
||||
@@ -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_ |
|
||||
|
||||
@@ -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' });
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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` |
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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_ | - |
|
||||
|
||||
@@ -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_ | - |
|
||||
|
||||
@@ -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\>_ | - |
|
||||
|
||||
@@ -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\>_ | - |
|
||||
|
||||
@@ -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` |
|
||||
|
||||
@@ -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` |
|
||||
|
||||
Reference in New Issue
Block a user