diff --git a/document/components/docs/en-US/action-sheet.md b/document/components/docs/en-US/action-sheet.md index 77a082f42b023ed982342f9b0d41bfb476aa0ed6..f34137ec49ad40da8967561cd4ee2a2c92b9385e 100644 --- a/document/components/docs/en-US/action-sheet.md +++ b/document/components/docs/en-US/action-sheet.md @@ -2,6 +2,8 @@ `ActionSheet` provides two common styles and it is flexible. +__Notice:__ Cause this component used create-api, so you should read [create-api](#/en-US/docs/create-api) first. + ### Example - Basic usage diff --git a/document/components/docs/en-US/cascade-picker.md b/document/components/docs/en-US/cascade-picker.md index 7d5842f9d03772a59a5897d01f8cb07c63d3b238..6747093efc4b080d3983dd12d0e01ff173b0c14c 100644 --- a/document/components/docs/en-US/cascade-picker.md +++ b/document/components/docs/en-US/cascade-picker.md @@ -2,6 +2,8 @@ `CascadePicker` component is used to implement the cascading change between picker columns. What is the effect of cascade? Considering the usage of province-city-area picker, when the province is changed, you may want the city column to display the exact cities of current province, so does the area column. And the `CascadePicker` is here to help you handle this. +__Notice:__ Cause this component used create-api, so you should read [create-api](#/en-US/docs/create-api) first. + ### Example - Basic usage diff --git a/document/components/docs/en-US/create-api.md b/document/components/docs/en-US/create-api.md index 7d027a67cfac0c454c0d678fb20bc3660236927b..c1323f02a2bc6844edc9de36aef3f58e745b6016 100644 --- a/document/components/docs/en-US/create-api.md +++ b/document/components/docs/en-US/create-api.md @@ -2,6 +2,8 @@ This module exports a function called `createAPI` with which you can invoke the custom component which has been instantiated in api form. +__Notice:__ All componnets which used `createAPI` must be registered by `Vue.use`. + ### createAPI(Vue, Component, [events, single]) - Parameters: @@ -17,7 +19,7 @@ This module exports a function called `createAPI` with which you can invoke the - `{Object} config` It will be passed to the component as its props except the events in `events`(It will transform by default, eg: If `events` has value `['click']`, then the prop `onClick` will be treated as component's event and not component's props). - `{Function} [renderFn]` Optional, used to generate the VNode child node in the slot scene in general. - `{Boolean} [single]` Optional, whether the instantiated component is a singleton or not. If two parameters are provided and the `renderFn`'s type is not function, then the `single` value is the sencond parameter's value. - - The return of the method `instance` is a instantiated Vue component，and the `remove` method will be **attached** to this instance.You can invoke the `remove` method to destroy the component and detach the component's content from `body` element. + - The return of the method `instance` is a instantiated Vue component，and the `remove` method will be **attached** to this instance.You can invoke the `remove` method to destroy the component and detach the component's content from `body` element. If the caller is destroyed and the `instance` will be destroyed too. - Example: @@ -115,18 +117,14 @@ This module exports a function called `createAPI` with which you can invoke the ``` In this example, we create a component `Hello` which needs to be invoked in api form and we invoke it in another component.The focus is what `showHello()` does: invoking method `this.$createHello(config, renderFn)` to instantiate `Hello`. -### How to use in general JS files +### How to use in general JS files or use it in global -In vue component, you could call by `this.$createHello(config, renderFn)` because the `this` is just a vue instance. But in general JS files, you need to call `$createHello` method by `Vue.prototype` or create a vue instance. As shown below: +In vue component, you could call by `this.$createHello(config, renderFn)` because the `this` is just a vue instance. But in general JS files, you need to use `Hello.$create`. As shown below: ```js -import Vue from 'vue' - -Vue.prototype.$createHello(config, renderFn) +import Hello from './hello.vue' -// or -const vm = new Vue() -vm.$createHello(config, renderFn) +Hello.$create(config, renderFn) ``` There is another idea which used the mode of data-driven. For example, in vuex, you could use a global state to label whether to call the component, and watch this state in App.vue to handle this component. diff --git a/document/components/docs/en-US/dialog.md b/document/components/docs/en-US/dialog.md index 9e5cfce6184f5c11b5062ce5a76dc6067718cedf..5813daa03ce497ed8f6d50534bbde4df106b4e55 100644 --- a/document/components/docs/en-US/dialog.md +++ b/document/components/docs/en-US/dialog.md @@ -2,6 +2,8 @@ `Dialog` modal component，provides various styles and interactions. +__Notice:__ Cause this component used create-api, so you should read [create-api](#/en-US/docs/create-api) first. + ### Example - Dialog type diff --git a/document/components/docs/en-US/picker.md b/document/components/docs/en-US/picker.md index 9921a2b6d20767b004edee4e8297f43686ff6ef8..dfd3774eda8c4c5cc472129b09809ef0012753ab 100644 --- a/document/components/docs/en-US/picker.md +++ b/document/components/docs/en-US/picker.md @@ -2,6 +2,8 @@ `Picker` component supports multi-column selectors and linkage data. +__Notice:__ Cause this component used create-api, so you should read [create-api](#/en-US/docs/create-api) first. + ### Example - Basic usage @@ -10,7 +12,7 @@ Picker ``` ```js - const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, + const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, { text: '幽鬼', value: '幽鬼' }] export default { mounted () { @@ -50,7 +52,7 @@ Multi-column Picker ``` ```js - const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, + const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, { text: '幽鬼', value: '幽鬼' }] const col2Data = [{ text: '输出', value: '输出' }, { text: '控制', value: '控制' }, { text: '核心', value: '核心'}, { text: '爆发', value: '爆发' }, { text: '辅助', value: '辅助' }, @@ -87,9 +89,9 @@ } } ``` - + - Alias - + You can configure the `alias` of `value` and `text`, such as, use `id` to represent `value`, `name` to represent `text`. ```html @@ -128,7 +130,7 @@ } } } - ``` + ``` - Instance method `setData` @@ -174,7 +176,7 @@ } } ``` - + ### Props configuration | Attribute | Description | Type | Accepted Values | Default | diff --git a/document/components/docs/en-US/popup.md b/document/components/docs/en-US/popup.md index 247f61cbec24019ffaab3d60965cd4f5eed8d24f..764c267099cfe2776ffdfdeb66262d2fa070fd4d 100644 --- a/document/components/docs/en-US/popup.md +++ b/document/components/docs/en-US/popup.md @@ -2,7 +2,9 @@ The underlying popup component, mainly used to implement upper component encapsulation based on itself. It only provides basic functions: specifying the type, whether there's a background layer, showing content (HTML) and whether the component is in center position. -All of the built-in popup type components are implemented based on this component, including [Toast](#/en-US/docs/toast)、[Picker](#/en-US/docs/picker)、[TimePicker](#/en-US/docs/time-picker)、[Dialog](#/en-US/docs/dialog)、[ActionSheet](#/en-US/docs/action-sheet). +Most of the built-in popup type components are implemented based on this component, including [Toast](#/en-US/docs/toast)、[Picker](#/en-US/docs/picker)、[CascadePicker](#/en-US/docs/cascade-picker)、[DatePicker](#/en-US/docs/date-picker)、[TimePicker](#/en-US/docs/time-picker)、[SegmentPicker](#/en-US/docs/segment-picker)、[Dialog](#/en-US/docs/dialog)、[ActionSheet](#/en-US/docs/action-sheet). + +__Notice:__ All the components above used create-api, so you should read [create-api](#/en-US/docs/create-api) first. ### Example diff --git a/document/components/docs/en-US/select.md b/document/components/docs/en-US/select.md index 4956f491fd2471aa00be54b1f0696fc169e361bc..5893bda3dfb94d560f11ffa81e30d58896de9862 100644 --- a/document/components/docs/en-US/select.md +++ b/document/components/docs/en-US/select.md @@ -2,6 +2,8 @@ Select component. +__Notice:__ Cause this component depend on Picker component, and Picker used create-api, so you should read [create-api](#/en-US/docs/create-api) first. + ### Example - Basic usage diff --git a/document/components/docs/en-US/time-picker.md b/document/components/docs/en-US/time-picker.md index 395368f2ffadb1e89dc98020614a95f8b8b2d265..2ebce3c59d5bac1cda3bb2c5d8c2eca2221afdce 100644 --- a/document/components/docs/en-US/time-picker.md +++ b/document/components/docs/en-US/time-picker.md @@ -2,6 +2,8 @@ `TimePicker` component provides commonly used functions of date selection. +__Notice:__ Cause this component used create-api, so you should read [create-api](#/en-US/docs/create-api) first. + ### Example - Basic usage diff --git a/document/components/docs/en-US/toast.md b/document/components/docs/en-US/toast.md index ec1ba5a84a6fd570bb37092f6496febb38cd811d..352dc4b240f480ea1202d4986c2dc3621c41b56b 100644 --- a/document/components/docs/en-US/toast.md +++ b/document/components/docs/en-US/toast.md @@ -2,6 +2,8 @@ `Toast` component.You can use it to show non-modal tip message without user interaction. +__Notice:__ Cause this component used create-api, so you should read [create-api](#/en-US/docs/create-api) first. + ### Example - Duration of display diff --git a/document/components/docs/zh-CN/action-sheet.md b/document/components/docs/zh-CN/action-sheet.md index 96aacae527eb17276d861f49259891c00df40273..9da1b38856a0cdbe4966741c33e5ae0911adf719 100644 --- a/document/components/docs/zh-CN/action-sheet.md +++ b/document/components/docs/zh-CN/action-sheet.md @@ -2,6 +2,8 @@ `ActionSheet`操作列表提供了两种常见的样式，灵活可控内容。 +__注：__ 由于此组件基于 create-api 实现，所以在使用之前，请确保自己了解过 [create-api](#/zh-CN/docs/create-api)。 + ### 示例 - 基本用法 diff --git a/document/components/docs/zh-CN/cascade-picker.md b/document/components/docs/zh-CN/cascade-picker.md index b3e79b1c2233e3b1dfb56274e8b5cbad37f90bbb..5d84fd7f4ef93d3b76c4b4b75ce11ca82eee1440 100644 --- a/document/components/docs/zh-CN/cascade-picker.md +++ b/document/components/docs/zh-CN/cascade-picker.md @@ -2,6 +2,8 @@ `CascadePicker`组件是级联选择器，用于实现多列选择之间的级联变化。比如，在选择省市区时，当省切换到了江苏省，城市列应该变成江苏省的各个城市，同理，如果城市切换到苏州市，区列的选项也应变成苏州市的各个区，这就级联的意义。 +__注：__ 由于此组件基于 create-api 实现，所以在使用之前，请确保自己了解过 [create-api](#/zh-CN/docs/create-api)。 + ### 示例 - 基本用法 @@ -74,13 +76,13 @@ - 省市区选择器 对于省市区选择器，只需要构造出级联选择器的数据结构传入就可以了。 - + ```html City Picker ``` ```js import { provinceList, cityList, areaList } from 'example/data/area' - + const cityData = provinceList cityData.forEach(province => { province.children = cityList[province.value] @@ -88,7 +90,7 @@ city.children = areaList[city.value] }) }) - + export default { mounted () { this.cityPicker = this.$createCascadePicker({ @@ -203,7 +205,7 @@ } } ``` - + ### Props 配置 | 参数 | 说明 | 类型 | 默认值 | 示例 | diff --git a/document/components/docs/zh-CN/create-api.md b/document/components/docs/zh-CN/create-api.md index 2c9086620e6ef7ecc9fa2e20a138f30babd9610a..42351dd956541210c4080b02888a1676ca6798c0 100644 --- a/document/components/docs/zh-CN/create-api.md +++ b/document/components/docs/zh-CN/create-api.md @@ -2,6 +2,8 @@ 该模块默认暴露出一个 `createAPI` 函数，可以实现以 API 的形式调用自定义组件。 +__注：__ 所有通过 `createAPI` 实现的通过 API 的形式调用的自定义组件都需要通过 `Vue.use` 注册才可以。 + ### createAPI(Vue, Component, [events, single]) - 参数： @@ -17,7 +19,7 @@ - `{Object} config` 组件配置参数，默认所有的值都会当做 props 传给组件，但是要排除 `events` 中的事件（默认会做转换，例如：`events` 的值为 `['click']`，那么 `config` 中的 `onClick` 就是作为 `click` 事件的回调函数，而不是作为 props 传递给组件）。 - `{Function} [renderFn]` 可选参数，用于生成子 VNode 节点，一般场景是处理 slot。 - `{Boolean} [single]` 可选参数，创建的时候决定是否是单例的，优先级更高，如果没有传入 renderFn 的话，single 的值就是第二个参数的值。 - - 注意调用后的返回值 `instance` 就是组件实例，这个实例会被**附加**或者**代理** `remove` 方法，如果调用了，该实例就会被销毁且会从 `body` 下移除。 + - 注意调用后的返回值 `instance` 就是组件实例，这个实例会被**附加**或者**代理** `remove` 方法，如果调用了，该实例就会被销毁且会从 `body` 下移除。如果说实例化上下文（即 `this.$createXx` 中的 `this`）销毁的话会自动移除销毁该实例元素。 - 示例： @@ -119,18 +121,14 @@ 示例中就是创建了一个需要 API 调用的组件 `Hello`，然后在其他组件中去使用，重点就是 `showHello()` 方法做的事情：调用 `this.$createHello(config, renderFn)` 实现组件的实例化。 -### 如何在普通 js 文件中调用 +### 如何在普通 js 文件中或者全局调用 -一般当你在 vue 实例中，你可以直接通过 `this.$createHello(config, renderFn)` 调用该组件。而如果在普通 JS 中`this`不是 vue 实例，这时就需要通过`Vue.prototye`或者创建一个 vue 实例来调用`$createHello`方法了，比如： +一般当你在 Vue 实例中，你可以直接通过 `this.$createHello(config, renderFn)` 调用该组件。而如果在普通 JS 中`this`不是 vue 实例，这时就可以通过组件本身的 `$create` 来进行实例化了，比如： ```js -import Vue from 'vue' - -Vue.prototype.$createHello(config, renderFn) +import Hello from './hello.vue' -// 或者 -const vm = new Vue() -vm.$createHello(config, renderFn) +Hello.$create(config, renderFn) ``` 还有一种思路是通过数据驱动，比如用 vuex 维护一个全局 state，在需要调用该组件时更新状态，然后在 App.vue 里去 watch 这个状态变化来调用该组件。 diff --git a/document/components/docs/zh-CN/date-picker.md b/document/components/docs/zh-CN/date-picker.md index e8f2c674b0b30be56012b316ec37dec929f5c705..9c512f403948c875b22c676b6cb32920e80e5911 100644 --- a/document/components/docs/zh-CN/date-picker.md +++ b/document/components/docs/zh-CN/date-picker.md @@ -2,6 +2,8 @@ 日期选择器，可用于日期选择，选择粒度的灵活配置，如年月日、时分秒、年月日时分秒、年月等。 +__注：__ 由于此组件基于 create-api 实现，所以在使用之前，请确保自己了解过 [create-api](#/zh-CN/docs/create-api)。 + ### 示例 - 基本用法 @@ -48,7 +50,7 @@ - 列的配置 `DatePicker` 有一个非常灵活的能力，就是可以配置列，总共是年、月、日、时、分、秒六种的列，你可以通过 `startColumn` 和 `columnCount` 来配置起始列和列数，比如默认的”年月日“选择，是从“年”开始的“三列”，而时分秒，则是从“时”开始的“三列”。 - + ```html Time Picker ``` @@ -175,7 +177,7 @@ } } ``` - + ### Props 配置 | 参数 | 说明 | 类型 | 可选值 | 默认值 | 示例 | diff --git a/document/components/docs/zh-CN/dialog.md b/document/components/docs/zh-CN/dialog.md index 5561f54419411dfbbb7527d13a0180e68a06078b..131b54a2028ac3fbbca9720807d7f033db9e7476 100644 --- a/document/components/docs/zh-CN/dialog.md +++ b/document/components/docs/zh-CN/dialog.md @@ -2,6 +2,8 @@ `Dialog`模态框组件，提供了多种样式及交互形式。 +__注：__ 由于此组件基于 create-api 实现，所以在使用之前，请确保自己了解过 [create-api](#/zh-CN/docs/create-api)。 + ### 示例 - 类型设置 diff --git a/document/components/docs/zh-CN/picker.md b/document/components/docs/zh-CN/picker.md index 099c3740e91b18bc73414d764cc59b3ec9af5688..5cffadda658a8117177cf5fad62da4889a0349ef 100644 --- a/document/components/docs/zh-CN/picker.md +++ b/document/components/docs/zh-CN/picker.md @@ -2,6 +2,8 @@ `Picker`组件支持多列选择器及数据联动。 +__注：__ 由于此组件基于 create-api 实现，所以在使用之前，请确保自己了解过 [create-api](#/zh-CN/docs/create-api)。 + ### 示例 - 基本用法 @@ -10,7 +12,7 @@ Picker ``` ```js - const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, + const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, { text: '幽鬼', value: '幽鬼' }] export default { mounted () { @@ -43,14 +45,14 @@ ``` - 多列选择器 - + `data`字段接收一个数组，其长度决定了`picker`的列数。 ```html Multi-column Picker ``` ```js - const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, + const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' }, { text: '幽鬼', value: '幽鬼' }] const col2Data = [{ text: '输出', value: '输出' }, { text: '控制', value: '控制' }, { text: '核心', value: '核心'}, { text: '爆发', value: '爆发' }, { text: '辅助', value: '辅助' }, @@ -87,9 +89,9 @@ } } ``` - + - 配置别名 - + 可通过`alias`属性配置`value`和`text`的别名。如，用`id`代表`value`，用`name`代表`text`。 ```html @@ -128,7 +130,7 @@ } } } - ``` + ``` - 实例方法 `setData` @@ -172,9 +174,9 @@ } } ``` - + 实例方法`setData`可接受2个参数，都为数组类型。第一个参数为滚轴需要显示的数据，第二个参数为选中值的索引。 - + ### Props 配置 | 参数 | 说明 | 类型 | 默认值 | 示例 | diff --git a/document/components/docs/zh-CN/popup.md b/document/components/docs/zh-CN/popup.md index 667d9afebd9087055b62cc81fa0434fba26f3fcb..a8e8513cac50e1eca555e3df0d7343844682ba71 100644 --- a/document/components/docs/zh-CN/popup.md +++ b/document/components/docs/zh-CN/popup.md @@ -2,7 +2,9 @@ 底层弹层组件，主要用于基于此组件实现上层组件封装，只提供了基础功能：指定类型、是否有背景层、显示内容（HTML）以及是否居中。 -内置所有的弹层类组件都是基于此组件实现，包括：[Toast](#/zh-CN/docs/toast)、[Picker](#/zh-CN/docs/picker)、[TimePicker](#/zh-CN/docs/time-picker)、[Dialog](#/zh-CN/docs/dialog)、[ActionSheet](#/zh-CN/docs/action-sheet)。 +内置弹层类组件基本都是基于此组件实现，包括：[Toast](#/zh-CN/docs/toast)、[Picker](#/zh-CN/docs/picker)、[CascadePicker](#/zh-CN/docs/cascade-picker)、[DatePicker](#/zh-CN/docs/date-picker)、[TimePicker](#/zh-CN/docs/time-picker)、[SegmentPicker](#/zh-CN/docs/segment-picker)、[Dialog](#/zh-CN/docs/dialog)、[ActionSheet](#/zh-CN/docs/action-sheet)。 + +__注：__ 以上组件都是基于 create-api 实现，所以在使用之前，请确保自己了解过 [create-api](#/zh-CN/docs/create-api)。 ### 示例 diff --git a/document/components/docs/zh-CN/select.md b/document/components/docs/zh-CN/select.md index a9dc1bb7e89439c882879cf1336a0e787cc6171d..47f2cb1485307c49e665d03f050cdcd269c8e713 100644 --- a/document/components/docs/zh-CN/select.md +++ b/document/components/docs/zh-CN/select.md @@ -2,6 +2,8 @@ Select 组件，用于单项选择。 +__注：__ 由于此组件依赖 [Picker](#/zh-CN/docs/picker) 组件，而 Picker 组件是基于 create-api 实现，所以在使用之前，请确保自己了解过 [create-api](#/zh-CN/docs/create-api)。 + ### 示例 - 基本用法 diff --git a/document/components/docs/zh-CN/time-picker.md b/document/components/docs/zh-CN/time-picker.md index d681c226184641c781a6bd3fcb67c52128b756dc..ea37a9649d17fc1729d694430a06d39842a667d7 100644 --- a/document/components/docs/zh-CN/time-picker.md +++ b/document/components/docs/zh-CN/time-picker.md @@ -2,6 +2,8 @@ `TimePicker`组件提供了常用的日期选择功能。 +__注：__ 由于此组件基于 create-api 实现，所以在使用之前，请确保自己了解过 [create-api](#/zh-CN/docs/create-api)。 + ### 示例 - 基本用法 diff --git a/document/components/docs/zh-CN/toast.md b/document/components/docs/zh-CN/toast.md index d513fcb9bb5373a3dc31a66c15980236b7610d22..b89889e83ef11fe2f18b3153fec1ceafeff964be 100644 --- a/document/components/docs/zh-CN/toast.md +++ b/document/components/docs/zh-CN/toast.md @@ -2,6 +2,8 @@ `Toast`组件主要用于非模态信息提醒，无需用户交互。 +__注：__ 由于此组件基于 create-api 实现，所以在使用之前，请确保自己了解过 [create-api](#/zh-CN/docs/create-api)。 + ### 示例 - 显示时间设置