Skip to content

docs: update docs for alert/autocomplete/carousel, etc. #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Oct 25, 2021

Conversation

xiaodemen
Copy link
Contributor

No description provided.

@vercel
Copy link

vercel bot commented Sep 17, 2021

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/ecomfe/veui-docs/AMZ7sASEGBGhjZTw2t6obv6nWQB6
✅ Preview: https://veui-docs-git-fork-xiaodemen-master-ecomfe.vercel.app

: false
},
filter ({ options }, _, { offsets }) {
// 不要 group
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

把自定义的逻辑写完整吧

<style lang="less" scoped>
.autocomplete-normal-demo {
display: flex;
section + section {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

selector 前面统一空一行吧


[[ demo src="/demo/alert/title.vue" ]]

### extra 插槽
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个写文字描述吧

Suggested change
### extra 插槽
### 额外内容

[[ demo src="/demo/autocomplete/normal.vue" ]]

### 严格模式

设置 `strict` 属性来指定严格模式,若输入值没有完全匹配建议值,那么会清空输入值。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

在失焦时?

@@ -0,0 +1,71 @@
<template>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个就叫 custom.vue?

设置 `filter` 属性来自定义搜索命中逻辑。

:::tip
`match` 一般是用来实现高亮的逻辑,比如实现模糊搜索等,而 `filter` 是控制是否命中,比如希望搜索结果中都是叶子节点,那么 `filter` 过滤掉父节点即可。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
`match` 一般是用来实现高亮的逻辑,比如实现模糊搜索等,`filter` 是控制是否命中,比如希望搜索结果中都是叶子节点,那么 `filter` 过滤掉父节点即可
`match` 用于高亮显示匹配文本的逻辑;`filter` 是控制是否命中。默认情况下 `filter` 会过滤掉未被 `match` 匹配的节点,且将包含非叶子节点。如希望搜索结果中都是叶子节点,可通过重写 `filter` 过滤掉非叶子节点

@@ -12,7 +34,8 @@
| -- | -- | -- | -- |
| `datasource` | `Array<string|Object>=` | `[]` | [^datasource] |
| `value` | `*` | - | [^prop-value] |
| `match` | `function(string|Object, string): boolean=` | - | 自定义搜索逻辑。 |
| `match` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑, 默认大小写不敏感。 |
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
| `match` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑, 默认大小写不敏感|
| `match` | `(item, keyword, { ancestors }) => boolean | [number, number] | Array<[number, number]>` | - | 支持自定义高亮逻辑,默认进行大小写不敏感的子串匹配|

其它地方也需要改一下,这里应该稍微详细一点,不然别的地方说参考 Autocomplete 好像也没有意义。

@@ -35,6 +43,7 @@
| `max` | `number` | - | 允许的最大值。 |
| `min` | `number` | - | 允许的最小值。 |
| `decimal-place` | `number` | 0 | 数值的小数精度位数,默认精确到整数位,`-1` 表示不处理精度。 |
| `step` | `number` | 1 | 每次递增/减的数值。 |
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
| `step` | `number` | 1 | 每次递增/减的数值|
| `step` | `number` | 1 | 每次递增/递减的数值|

@@ -20,6 +20,12 @@

[[ demo src="/demo/transfer/flat.vue" ]]

### 选中值的多种模式

设置 `merge-checked` 来指定选中值的多种模式。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
设置 `merge-checked` 来指定选中值的多种模式
设置 `merge-checked` 来指定选中值的合并模式

@@ -20,6 +20,12 @@

[[ demo src="/demo/transfer/flat.vue" ]]

### 选中值的多种模式
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
### 选中值的多种模式
### 选中值的合并模式

}
</script>

<style lang="less" scoped docs>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

docs 都去掉吧,我准备让 playground 里面和 demo 源码保持一致。

</script>

<style lang="less">
.custom-date button {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

不要用 element selector,demo 里面怎么写,业务代码里面都会抄过去的

<veui-radio-group
v-model="type"
:items="items"
/>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

感觉可以搞一个 Switch 或者 Checkbox,会简单一点


### 最小宽度

通过自定义CSS属性 `--dls-checkbox-button-stable: initial;` 来开启项目的最小宽度。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个删了吧,加到 ui 里面。


[[ demo src="/demo/uploader/controls.vue" ]]

### 继续上传的操作选项
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个是“上传入口自定义操作”?


[[ demo src="/demo/uploader/sortable.vue" ]]

### 上传项的操作选项
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

“已上传项自定义操作作”?

<template>
<article>
<section>
<h4>按`2/1`比例展示轮播项</h4>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<h4>按`2/1`比例展示轮播项</h4>
<h4>按 `2/1` 比例展示轮播项</h4>

ui="simple"
:items="flavors"
>
<template slot="desc">A description for coffee.</template>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

用 scoped slots,而且不要写 slot/slot-scope 了,用 #desc="{ desc }" 吧, 展示实际场景下的用法。

ui="simple"
:items="flavors"
>
<template slot="desc">A description for coffee.</template>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

同上

ui="simple"
:items="flavors"
>
<template slot="desc">A description for coffee.</template>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

同上

}
],
entries (defaultEntries) {
// debugger
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// debugger

},
methods: {
handleStar () {
toast.info('You click star!')
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
toast.info('You click star!')
toast.info('You clicked star!')

Change-Id: I76d0f72679cd75085f5ffd42f641daa198cafe11

docs: update docs for alert/autocomplete/carousel, etc.

Change-Id: Ib7507f4979024f53c127e4b64b88560b93999db7

fix: update for autocomplete filter

Change-Id: Ie54556715fa52838aeb6caaa19b4f9a9f14b490f

docs: add docs for calendar/transfer/cascader

Change-Id: I655b3cb3d25dd0649de9ae7e224e7063a40dd079

fix: add more demos for input/textarea

Change-Id: Iada527ca82643a435a4775110b332155512d62a7

docs: add docs for uploader,select,table, etc.

Change-Id: Ib034fd5cc9d9a420d4e002956ae925175783c5f3

docs: adjust formatting and punc.

docs: adjust docs for uploader, etc.

Change-Id: If06c8c1102eafce43f5802a333676fc9e62cd474

docs: add docs for nav

Change-Id: If56a653ec53f19239606128fd30cae80f8e10025

docs: improve anchor demos

Change-Id: I6ac1c08cc8905924d0062def1f8921fe1f302f15

docs: refine wording and format

docs: update docs for check-button-group desc

Change-Id: Ica7d6d0692250f0be6bd330b1ad4cc41938afd46
@@ -41,6 +41,8 @@
| `expanded` | `boolean=` | `false` | [^expanded] |
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
| `match` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑, 默认大小写不敏感,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
| `match` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑, 默认大小写不敏感参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)|
| `match` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑,默认大小写不敏感参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)|

@@ -50,6 +59,8 @@
| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
| `overlay-class` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#属性) 属性。 |
| `overlay-style` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#属性) 属性。 |
| `match` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑, 默认大小写不敏感,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
| `match` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑, 默认大小写不敏感参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)|
| `match` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑,默认大小写不敏感参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)|

@@ -52,6 +70,8 @@
| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
| `overlay-class` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#属性) 属性。 |
| `overlay-style` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#属性) 属性。 |
| `match` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑, 默认大小写不敏感,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
| `match` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑, 默认大小写不敏感参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)|
| `match` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑,默认大小写不敏感参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)|

@@ -57,6 +57,8 @@
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
| `overlay-class` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#属性) 属性。 |
| `overlay-style` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#属性) 属性。 |
| `match` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑, 默认大小写不敏感,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
| `match` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑, 默认大小写不敏感参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)|
| `match` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑,默认大小写不敏感参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)|

@@ -57,6 +57,8 @@
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
| `overlay-class` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#属性) 属性。 |
| `overlay-style` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#属性) 属性。 |
| `match` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑, 默认大小写不敏感,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
| `filter` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
| `filter` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)|
| `filter` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)|

@@ -41,6 +41,8 @@
| `expanded` | `boolean=` | `false` | [^expanded] |
| `disabled` | `boolean=` | `false` | 是否为禁用状态。 |
| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
| `match` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑, 默认大小写不敏感,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
| `filter` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
| `filter` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)|
| `filter` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)|

@@ -50,6 +59,8 @@
| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
| `overlay-class` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#属性) 属性。 |
| `overlay-style` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#属性) 属性。 |
| `match` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑, 默认大小写不敏感,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
| `filter` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
| `filter` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)|
| `filter` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)|

@@ -52,6 +70,8 @@
| `readonly` | `boolean=` | `false` | 是否为只读状态。 |
| `overlay-class` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#属性) 属性。 |
| `overlay-style` | `string|Array|Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#属性) 属性。 |
| `match` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑, 默认大小写不敏感,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
| `filter` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 |
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
| `filter` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)|
| `filter` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)|

Change-Id: I736b6fb95eeb45e4742718019f6734ebc71a7fc8
^^^item
每个节点的渲染插槽。

默认内容:渲染了 `icon` 插槽和 `item-label` 插槽。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

好像没有写 icon 插槽?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

目前 icon 的实现比较怪,先不暴露了?

@@ -110,7 +110,7 @@
| 名称 | 描述 |
| -- | -- |
| `activate` | 用户点击有 `to` 的节点触发,参数是激活节点在 [`items`](#props-items) 属性中对应的数据项。 |
| `click` | 用户点击节点时触发,参数是激活节点整个 `item` 数据。 |
| `click` | 用户点击节点时触发,参数是激活节点在 [`items`](#props-items) 属性中对应的数据项。 |
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

事件、图标、配置也是 public API,也加上 anchor 吧。

Change-Id: I050d1605d232415bc34b13046a8abd3cfc0fb1c4
@Justineo Justineo merged commit e69f8fc into ecomfe:master Oct 25, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants