diff --git a/docs/.vuepress/generate-ts/README.md b/docs/.vuepress/generate-ts/README.md new file mode 100644 index 000000000..b255aad31 --- /dev/null +++ b/docs/.vuepress/generate-ts/README.md @@ -0,0 +1,126 @@ +# 生成 ts`*.d.ts`文件 + +## RoadMap + +- [x] 全部内部组件vue ts 声明文件 + +- [ ] markdown格式规范声明 + + 1. 属性声明标题格式为`**属性声明**` + 2. 表格行声明，必须以`|`开始，以`|`结束，例如：`|属性|类型|说明|` + 3. 属性声明表格合法表头属性字段 + + |合法属性名|解析时字段名| + |:-|:-| + |备注|notes| + |属性|property| + |类型|type| + |默认值|default| + |说明|comment| + |必填|must| + |生效时机|effectiveTiming| + |平台差异说明|platformDifferences| + + 4. 枚举值声明 + + 标题声明：`**AudioReverbType**`, 引用枚举值时声明 + +```ts +interface LivePusherProps{ + audioReverbType: AudioReverbType +} +``` + + 枚举值value + |名称|表格标题| + |:-|:-| + |枚举值key|键| + |枚举值Value|值| + |枚举值备注/说明|说明| + +- [ ] 属性枚举值生成 +- [ ] 一个组件内包含多个接口或类型声明，声明 [type-relations.json][type-relations.json] + - [x] map + - [x] radio + - [ ] image 有枚举值 + - [ ] live-pusher + - [ ] 其他待排查的组件文档 + +## 为什么需要这个功能 + +1. 方便 Volar 展现内置组件类型，方便开发者查看组件内置组件属性和事件，提高工作效率 +2. 基于项目 markdown 文档生成，便于后续 markdown 修改时，通过脚本生成的方式，同步修改内置组件 types + +## 生产`*.d.ts` + +### node环境 + +node: `v20.10.0` + +### 构建命令 + +```shell +pnpm generate-ts +``` +### 产物文件列表 +[docs/.vuepress/types/inner-components](docs/.vuepress/types/inner-components)目录下生成文件 +```log +animation-view.d.ts +camera.d.ts +cover-image.d.ts +index.d.ts +map.d.ts +movable-view.d.ts +progress.d.ts +slider.d.ts +textarea.d.ts +view.d.ts +audio.d.ts +canvas.d.ts +form.d.ts +label.d.ts +match-media.d.ts +picker.d.ts +radio.d.ts +swiper.d.ts +types.d.ts +web-view.d.ts +button.d.ts +checkbox.d.ts +icon.d.ts +live-player.d.ts +movable-area.d.ts +picker-view.d.ts +rich-text.d.ts +switch.d.ts +video.d.ts +``` + +## 产物发布 + +建议放`@dcloudio/types`包内`inner-components` + +### 使用并配置 + +基于发布产物目标`@dcloudio/types/inner-components` + +在[quickstart-cli][quickstart-cli]中的[uni-preset-vue typescript][uni-preset-vue:ts]项目`src/shime-uni.d.ts`中增加一行 + +```ts +/// +``` + +#### IDE工具提示 + +- VSCode + +vscode需要安装Vue[Volar]插件，内置组件内置组件的属性和事件正常提示。 + +- WebStorm + +IDE工具`webstorm`暂无测试条件，支持效果未知。 + +[quickstart-cli]: https://uniapp.dcloud.net.cn/quickstart-cli.html +[uni-preset-vue:ts]: https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite.zip +[Volar]: https://marketplace.visualstudio.com/items?itemName=Vue.volar +[type-relations.json]: https://github.com/weiquanju/unidocs-zh/blob/master/docs/.vuepress/generate-ts/type-relations.json \ No newline at end of file diff --git a/docs/.vuepress/generate-ts/index.mjs b/docs/.vuepress/generate-ts/index.mjs new file mode 100644 index 000000000..392e9b349 --- /dev/null +++ b/docs/.vuepress/generate-ts/index.mjs @@ -0,0 +1,57 @@ +import { readFile, writeFile } from "fs/promises" +import { existsSync, mkdirSync } from 'node:fs' +import { resolve, dirname } from "path" +import generateInterface, { addIndex, getIndexDoc, getTypeDoc } from "./interface.mjs"; + + +/** + * 生成组件路径 + * @param {string} name 组件名称 + * @returns + */ +const getPath = (name) => resolve(process.cwd(), `docs/component/${name}.md`) + +/** + * 生成组件文档 + * @param {string[]} componentNames + */ +const main = async (componentNames) => { + for (const i in componentNames) { + const comp = componentNames[i] + const path = getPath(comp) + const data = await readFile(path, { encoding: 'utf-8' }) + const tsDoc = generateInterface(comp, data) + + const savePath = resolve(process.cwd(), `docs/.vuepress/types/inner-components/${comp}.d.ts`) + const dir = dirname(savePath) + if (!existsSync(dir)) { + mkdirSync(dir, { recursive: true }); + } + if (tsDoc) { + addIndex(`export * from './${comp}'`) + writeFile(savePath, tsDoc, { encoding: 'utf-8' }).catch((err) => console.error(err)) + } else { + console.warn('loss doc: ' + comp) + } + } + //并入types + addIndex(`export * from './types'`) + /** + * 生成index索引文件 + */ + const saveIndexPath = resolve(process.cwd(), `docs/.vuepress/types/inner-components/index.d.ts`) + const indexDoc = getIndexDoc() + indexDoc && writeFile(saveIndexPath, indexDoc, { encoding: 'utf-8' }).catch((err) => console.error(err)) + + /** + * 生成vue Volor ide文件，自动对uniapp内置组件进行提示 + */ + const saveTypePath = resolve(process.cwd(), `docs/.vuepress/types/inner-components/types.d.ts`) + const typeDoc = getTypeDoc() + typeDoc && writeFile(saveTypePath, typeDoc, { encoding: 'utf-8' }).catch((err) => console.error(err)) +} + +const innerComponents = 'view,scroll-view,swiper,match-media,movable-area,movable-view,cover-view,cover-image,icon,text,rich-text,progress,button,checkbox,editor,form,input,label,picker,picker-view,radio,slider,switch,textarea,animation-view,audio,camera,image,video,live-player,live-pusher,map,canvas,web-view'.split(',') + +main(innerComponents) +console.log('finish!') \ No newline at end of file diff --git a/docs/.vuepress/generate-ts/interface.mjs b/docs/.vuepress/generate-ts/interface.mjs new file mode 100644 index 000000000..92acdd4a8 --- /dev/null +++ b/docs/.vuepress/generate-ts/interface.mjs @@ -0,0 +1,412 @@ +import { getFieldCN, getFieldEN, getFieldMap, mustMap } from "./utils.mjs"; +import generateRelation from "./relation.mjs"; + +/** + * @typedef {{ [k: string]: number; }} FieldMap + */ +/** + * @typedef {{table: string[][]; events?: string[][]; fieldCN: string[]; fieldEN: any; fieldMap: FieldMap} TableConfig + */ +/** + * 根据table，生成格式化的接口数据 + * @param {string} str + * @returns + */ +const generateInterfaceTable = (str) => { + const titleContent = /\*\*属性说明\*\*\n+([^\n]+\n)*/mg + + const data = titleContent.exec(str) + if (!data?.[0]) return + const table = data[0].replace('**属性说明**', '').trim().split("\n").filter(Boolean) + return generateInterfaceTableFields(table) +} + +/** + * + * @param {string[]} table + * @returns + */ +export const generateInterfaceTableFields = (table) => { + // console.log(table) + const fieldCN = getFieldCN(table.shift()) + table.shift() + + // |属性|说明|类型|平台差异说明| + // const fieldCN = '|属性名|类型|默认值|说明|生效时机|平台差异说明|'.split('|') + const fieldEN = getFieldEN(fieldCN) + + const fieldMap = getFieldMap(fieldEN) + + const { property } = fieldMap + const t = table.map(s => s.split('|').map(s => s.trim())).filter(Boolean) + + const events = t.filter((item) => item[property].startsWith('@') === true) + return { + table: t.filter((item) => item[property].startsWith('@') === false), + events, + fieldCN, + fieldEN, + fieldMap + } +} + + +/** + * 生成一条数据类型的内容 + * @param {string[]} arr + * @param {TableConfig} files + * @param {import("./relation.mjs").Property} propertyIns 读取的原始字符串 + * @returns + */ +const generateInterfaceProperty = (arr, files, propertyIns) => { + const { fieldMap, fieldCN } = files + const { property, type, default: defaultIndex, comment, effectiveTiming, platformDifferences, must } = fieldMap + + if (!arr[property]) return + + + const baseName = arr[property].trim() + // if(baseName === 'content') { + // debugger + // } + let relativeType = propertyIns ? propertyIns.getType(baseName) : undefined + + if (!relativeType) { /** + * 处理`string/Array` + */ + const types = arr[type].replace(/(|)|(\\|\/)/g, '|').split('|').map(s => s.trim()) + relativeType = types.map(t => { + switch (t) { + case 'Array<Number>': + case 'Array<number>': + case 'Array＜Number＞': + return 'number[]'; + case 'Array<Object>': + case 'Array<object>': + case 'Array＜Object＞': + return 'Record[]'; + case 'Array<String>': + case 'Array<string>': + case 'Array＜String＞': + return 'string[]'; + case 'Array<Boolean>': + case 'Array<boolean>': + case 'Array＜Boolean＞': + return 'boolean[]'; + case 'Color': + case 'color': + return 'string'; + + default: + return t && ['String', 'Number', 'Boolean', 'Null'].includes(t) ? t.toLowerCase() : t + } + }).join(' | ') + } + + const name = toCamel(baseName) + + //处理defaultVal为字符串的情况 + let defaultVal = (arr[defaultIndex] || '').trim() + // console.log({ defaultVal }) + let defaultLine = '' + switch (defaultVal) { + case 'true': + case 'false': + case '无': + case '[]': + case '{}': + case 'null': + defaultLine = ` * @default ${defaultVal}` + break; + + default: + //默认值是字符串 + if (defaultVal && /^-?\d+\.?\d*$/.test(defaultVal) === false) { + const val = defaultVal.replace(/"|'/g, '').trim() + defaultLine = !val ? '' : ` * @default "${val}"` + } else { + defaultLine = ` * @default ${defaultVal}` + } + break; + } + + const effectiveTimingLine = arr[effectiveTiming] ? `\n * @effectiveTiming ${fieldCN[effectiveTiming]} ${arr[effectiveTiming]}` : '' + const platformDifferencesLine = arr[platformDifferences] ? `\n * @platformDifferences ${fieldCN[platformDifferences]}:${arr[platformDifferences]}` : '' + + const isMust = arr[must] === mustMap['true'] + const mustSymbol = isMust ? '' : '?' + return ` + /** + * ${[arr[comment], defaultLine].filter(Boolean).join('\n')} + * @name ${name} ${effectiveTimingLine}${platformDifferencesLine} + */ + ${name}${mustSymbol}: ${relativeType}` +} + + +/** + * 生成事件接口 + * @param {string} interfaceName + * @param {TableConfig} data + * @returns + */ +const generateEvent = (interfaceName, data) => { + const lines = data.table.map((item) => generateEventProperty(item, data)) + + if (!lines.length) return + + return ` +export interface ${getEventName(toUpperCamel(interfaceName))} { + ${lines.join('\n')} +} + +` +} +/** + * 生成事件接口名称 + * @param {string} interfaceName 接口名称 + * @returns + */ +const getEventName = (interfaceName) => `${toUpperCamel(interfaceName)}Events` + +/** + * 根据备注内容生成事件属性 + * @param {string} comment 单元格的备注内容 + * @returns + */ +const getEventTypeByComment = (comment) => (/detail\s*=\s*\{[^\]]+\}/mg.exec(comment)?.[0] || '').replace('=', ':') + +/** + * 生成一条事件类型的内容 + * @param {string[]} arr + * @param {TableConfig} + * @returns + */ +const generateEventProperty = (arr, { fieldMap, fieldCN }) => { + // "update:modelValue": (value: string) => boolean; + + const { property, comment, platformDifferences, effectiveTiming } = fieldMap + if (!arr[property]) return '' + let name = arr[property].trim() + + name = toCamel(name.startsWith('@') ? name.replace('@', 'on-') : `on-${name}`) + + const type = getEventTypeByComment(arr[comment]) + const eventType = type ? `{${type}}` : 'any' + + const effectiveTimingLine = arr[effectiveTiming] ? `\n * @effectiveTiming ${fieldCN[effectiveTiming]} ${arr[effectiveTiming]}` : '' + const platformDifferencesLine = arr[platformDifferences] ? `\n * @platformDifferences ${fieldCN[platformDifferences]}:${arr[platformDifferences]}` : '' + return ` + /** + * ${arr[comment]} + * @name ${name} ${effectiveTimingLine}${platformDifferencesLine} + */ + ${name}?: (event: ${eventType}) => void; + ` +} +/** + * 转大驼峰命名风格 + * @param {string} s 字符串 + * @returns + */ +const toUpperCamel = s => toCamel(s.toString()).replace(/^\w/, (s) => s.toUpperCase()) +/** + * 转小驼峰命名风格 + * @param {string} s 字符串 + * @returns + */ +const toCamel = (s) => s.toString().replace(/-(\w)/g, (m0, m1) => m1.toUpperCase()) + +/** + * 驼峰转下中横线风格 + * @param {string} s + * @returns + */ +const toSnackCase = (s) => s.toString().replace(/[A-Z]/g, (m, i) => { + return i === 0 ? m.toLowerCase() : `-${m.toLowerCase()}` +}).replace('_', '-') +/** + * 获取接口名称的注释说明 + * @param {string} name + * @param {string} str + * @returns + */ +const getInterfaceComment = (name, str) => { + const reg = new RegExp(`#\\s+${name}\\n+([^\\n]+)`) + const res = str.match(reg) + if (res && res[1]) { + return res[1].replace(/。$/, '') + } +} + +/** + * @typedef {{str: string;property: import("./relation.mjs").Property; file?: string; isComponent?: boolean}} GenerateInterfaceOptions + */ +/** + * 生成接口 + * @param {string} interfaceName 接口名称 + * @param {TableConfig} data 格式化的表格数据和字段 + * @param {GenerateInterfaceOptions} + * @returns + */ +export const generateInterface = (interfaceName, data, { str, property, isComponent, file }) => { + const comp = file || interfaceName.toString() + + const { fieldMap, fieldEN, fieldCN, table: interfacePropertyTable, events } = data + + // 获取接口说明 + const interfaceComment = getInterfaceComment(interfaceName, str) + const interfaceCommentContent = interfaceComment ? `/** +* ${interfaceComment} +*/` : '' + + + + const interfaceCamel = toUpperCamel(interfaceName) + + const interfaceProps = isComponent === false ? interfaceCamel : `${interfaceCamel}Props` + + + const eventDoc = generateEvent(interfaceName, { table: events, fieldMap, fieldEN, fieldCN }) + + + /** + * @type {string[]} + */ + const propsLines = interfacePropertyTable.map((item) => generateInterfaceProperty(item, data, property)).filter(Boolean) + + const propsDoc = !propsLines.length ? undefined : `${interfaceCommentContent} +export interface ${interfaceProps}{ + ${propsLines.join('\n')} +}` + + + const interfaceOfEvent = eventDoc && getEventName(interfaceCamel) + + const joinPropsArr = [propsDoc && interfaceProps, interfaceOfEvent].filter(Boolean) + + const exportNamedComponent = ` +export declare type ${interfaceCamel}Component = import("vue").DefineComponent<${joinPropsArr.join(' & ') || 'any'}>; +` + + if (isComponent !== false) { + addType(` ${interfaceCamel}: import('./${comp}').${interfaceCamel}Component`) + addType(` "${toSnackCase(interfaceCamel)}": import('./${comp}').${interfaceCamel}Component`) + const joinProps = joinPropsArr.map((name) => `import('./${comp}').${name}`).join(' & ') + jsxList.push(` "${toSnackCase(interfaceCamel)}": ${joinProps} & JSXElementAttr;`) + } + + return [propsDoc, eventDoc, isComponent === false ? '' : exportNamedComponent].filter(Boolean).join('\n') +} + + +/** + * 生成接口 + * @param {string} name 组件名称，生成的接口将以这个名称命名，例如button + * @param {string} str 要解析的文本内容 + * @returns + * @example +const str = ` + +**属性说明** + +|属性名|类型|默认值|说明|生效时机|平台差异说明| +|:-|:-|:-|:-|:-|:-| +|size|String|default|按钮的大小||| +|type|String|default|按钮的样式类型||| +` +toInterface('button',str) + * + */ +const toInterface = (name, str) => { + const clearStr = str.replace(/\r?\n/gm, '\n') + /** + * 通过配置关系解析当个md中多个组件声明 + */ + const relationInterfaces = generateRelation(name.toString(), clearStr) + if (relationInterfaces) { + return relationInterfaces + } + /** + * 通过当个md生成声明 + */ + const table = generateInterfaceTable(clearStr) + if (table) { + return generateInterface(name.toString(), table, { str: clearStr }) + } +} + +const indexList = [] + +/** + * 为索引文件添加导出项 + * @param {string} str 导出项，例如: `export * from './view'` + */ +export const addIndex = (str) => { + indexList.push(str) +} + +export const getIndexDoc = () => { + return `/** + * @author weiquanju + */ + +export {} + +${Array.from(new Set(indexList)).join('\n')} +` +} +const typeList = [] + +/** + * 为索引文件添加导出项 + * @param {string} str 导出项，例如: `export * from './view'` + */ +const addType = (str) => { + typeList.push(str) +} +const jsxList = [] +export const getTypeDoc = () => { + return `/* eslint-disable */ +/* prettier-ignore */ +// @ts-nocheck +// Generated by weiquanju +// Read more: https://github.com/vuejs/core/pull/3399 +export {} + +import { StyleValue } from "vue"; +interface JSXElementAttr { + class?: any + style?: StyleValue +} + +export interface MPComponents { +${typeList.join('\n')} +} + +declare global { + namespace JSX { + //避免jsx命名冲突 + interface IntrinsicElements { +${jsxList.join('\n')} + } + } +} + +declare module "@vue/runtime-core" { + + export interface IntrinsicElementAttributes { +${jsxList.join('\n')} + } + + export type NativeElements = { + [K in keyof IntrinsicElementAttributes]: IntrinsicElementAttributes[K]; + }; +} +declare module "vue" { + export interface GlobalComponents extends MPComponents {} +} +` +} + +export default toInterface \ No newline at end of file diff --git a/docs/.vuepress/generate-ts/relation.mjs b/docs/.vuepress/generate-ts/relation.mjs new file mode 100644 index 000000000..a535c5760 --- /dev/null +++ b/docs/.vuepress/generate-ts/relation.mjs @@ -0,0 +1,172 @@ +// import relationConfig from './type-relations.json' with { type: "json" } /** node v22 */ +// import relationConfig from './type-relations.json' assert { type: "json" } /** node v17-v21 */ +import { readFile } from 'node:fs/promises' +import { join } from 'node:path' +import { generateInterface, generateInterfaceTableFields } from "./interface.mjs"; + +const relationConfig = await readFile(join(import.meta.dirname, './type-relations.json'), { encoding: 'utf8' }).then(r => JSON.parse(r)) + +/** + * json声明接口的属性 + * @typedef {{name: string;type: string;}} PropertyDefine + */ + +/** + * json声明接口 + * @typedef {{name: string; titleName: string; titleLevel: string; property?:PropertyDefine[];isComponent?:boolean}} InterfaceDefine + */ + +/** + * 接口 + * @typedef {{name: string; titleName: string; titleLevel: string; property?:Property;isComponent?:boolean}} Interface + */ + +/** + * json声明组件 + * @typedef {component: string; interfaces: Interfaces[]} ComponentDefine + */ + +export class Property { + /** + * @type {Map} + */ + #propertyMap + /** + * + * @param {PropertyDefine[]} param + */ + constructor(param) { + this.#propertyMap = new Map(param.map(({ name, type }) => [name, type])) + } + /** + * 根据属性名称获取属性类型 + * @param {string} name + * @returns + */ + getType(name) { + return this.#propertyMap.get(name) + } +} + +class Relation { + + /** + * 关系map + * @type {Map} + */ + #relation + + /** + * 初始化 + * @param {ComponentDefine[]} config 接口关系配置，json + */ + constructor(config) { + this.#relation = new Map(config.map(({ component, interfaces }) => { + /** + * @type {Interface[]} + */ + const interfaceMap = interfaces.map(({ name, titleLevel, titleName, property, isComponent }) => ({ + name, + titleLevel, + titleName, + isComponent, + property: property && Array.isArray(property) ? new Property(property) : undefined + })) + return [component, interfaceMap] + })) + } + + /** + * 设置当前组件名称 + * @param {string} name 组件名称 + * @returns + */ + getComponent(name) { + return this.#relation.get(name) + } +} +/** + * markdown表格正则表达式 + */ +export const mdTableRegex = /^((?:\|.*?\|)+)\r?\n((?:\|.*?\|)*)(?:\r?\n)?$/gm; + +/** + * 根据Interface标题获取正则 + * @param {Interface['titleName']} titleName 标题名称 + * @param {Interface['titleLevel']} titleLevel 标题级别 + * @returns + */ +export const getTitleRegExp = (titleName, titleLevel) => { + + switch (titleLevel) { + case 'h1': + return new RegExp(`#\\s*${titleName}`, 'gm') + case 'h2': + return new RegExp(`##\\s*${titleName}`, 'gm') + case 'h3': + return new RegExp(`###\\s*${titleName}`, 'gm') + case 'null': + return new RegExp(titleName, 'gm') + + default: + return new RegExp(`\\*{2}\\s*${titleName}\s*\\*{2}`, 'gm') + } +} + + + +/** + * 分割表格，获取要解析的表格 + * @param {string} str + * @param {string} titleName + * @param {string} titleLevel + * @returns string[] + */ +const getTableContent = (str, titleName, titleLevel) => { + + + const sp = str.split(getTitleRegExp(titleName, titleLevel)).filter(Boolean) + if (sp && sp[1]) { + + let dataStr = sp[1].trim() + const indexStart = dataStr.indexOf("|") + + if (indexStart > -1) { + dataStr = dataStr.substring(indexStart - 1) + } + const indexEnd = dataStr.indexOf('\n\n') + + if (indexEnd > -1) { + dataStr = dataStr.substring(0, indexEnd) + } + + if (!dataStr) return + const table = dataStr.trim().split('\n').filter(Boolean) + if (!table) return + return table.filter(Boolean) + } +} +export const relation = new Relation(relationConfig) + +/** + * 通过relation配置，生成接口声明文件 + * @param {string} str + * @param {string} componentName + * @returns + */ +const generateRelation = (componentName, str) => { + + const component = relation.getComponent(componentName) + if (!component) return + return component.map(({ titleName, titleLevel, name, property, isComponent }) => { + const table = getTableContent(str, titleName, titleLevel) + if (!table?.length) return + + const config = generateInterfaceTableFields(table) + if (config) { + return generateInterface(name, config, { str, property, file: componentName, isComponent }) + } + }).filter(Boolean).join('\n\n') +} + +export default generateRelation \ No newline at end of file diff --git a/docs/.vuepress/generate-ts/type-relations.json b/docs/.vuepress/generate-ts/type-relations.json new file mode 100644 index 000000000..562e59c5f --- /dev/null +++ b/docs/.vuepress/generate-ts/type-relations.json @@ -0,0 +1,81 @@ +[ + { + "component": "map", + "interfaces": [ + { + "name": "Map", + "titleName": "属性说明", + "titleLevel": "bold" + }, + { + "name": "MapMarker", + "titleName": "MapMarker", + "titleLevel": "bold", + "isComponent": false + }, + { + "name": "MapMarkerLabel", + "titleName": "MapMarkerLabel", + "titleLevel": "bold", + "isComponent": false + }, + { + "name": "MapMarkerCallOut", + "titleName": "MapMarkerCallOut", + "titleLevel": "bold", + "isComponent": false + }, + { + "name": "MapPolyLine", + "titleName": "MapPolyLine", + "titleLevel": "bold", + "isComponent": false + }, + { + "name": "MapPolygon", + "titleName": "MapPolygon", + "titleLevel": "bold", + "isComponent": false + }, + { + "name": "MapCircle", + "titleName": "MapCircle", + "titleLevel": "bold", + "isComponent": false + }, + { + "name": "MapControl", + "titleName": "MapControl", + "titleLevel": "bold", + "isComponent": false + }, + { + "name": "MapPosition", + "titleName": "MapPosition", + "titleLevel": "bold", + "isComponent": false + }, + { + "name": "MapPoint", + "titleName": "MapPoint", + "titleLevel": "bold", + "isComponent": false + } + ] + }, + { + "component": "radio", + "interfaces": [ + { + "name": "RadioGroup", + "titleName": "radio-group", + "titleLevel": "h3" + }, + { + "name": "Radio", + "titleName": "radio\\n", + "titleLevel": "h3" + } + ] + } +] diff --git a/docs/.vuepress/generate-ts/utils.mjs b/docs/.vuepress/generate-ts/utils.mjs new file mode 100644 index 000000000..18cdcf6a5 --- /dev/null +++ b/docs/.vuepress/generate-ts/utils.mjs @@ -0,0 +1,106 @@ +/** + * 获取中文字段 + * @param {string} str + * @returns + */ +export const getFieldCN = (str) => str.trim().split("|").map(s => s.trim()).map((field) => { + switch (field) { + case '属性名': + case '属性': + return '属性'; + + case '平台兼容': + case '平台差异': + case '平台差异说明': + return '平台差异说明'; + + default: + if (field.includes('平台差异')) { + return '平台差异说明' + } else if (field.startsWith('属性')) { + return '属性' + } else if (field.toLowerCase().startsWith('google地图')) { + return 'google地图' + } else if (field.startsWith('高德')) { + return '高德' + } else if (['类型', '默认值', '说明', '生效时机', '必填', '高德是否支持', '备注', ''].includes(field)) { + return field + } else { + throw new Error(`警告：有未判断字段: "${field}", ${str}`) + return field + } + } +}) + +export const mustMap = { + '是': true, + '否': false, + 'true': '是', + 'false': '否' +} + +const mapRelation = { + '高德': 'AMapSupported', + 'AMapSupported': '高德', + + 'google地图': 'GoogleMapSupported', + 'GoogleMapSupported': 'google地图', + + '备注': 'notes', + 'notes': '备注', + + '属性': 'property', + 'property': '属性', + + '类型': 'type', + 'type': '类型', + + '默认值': 'default', + 'default': '默认值', + + '说明': 'comment', + 'comment': '说明', + + '必填': 'must', + 'must': '必填', + + '生效时机': 'effectiveTiming', + 'effectiveTiming': '生效时机', + + '平台差异说明': 'platformDifferences', + 'platformDifferences': '平台差异说明', + + '': '' +} + +/** + * 通过`fieldsCN`获取fieldEN + * @param {keyof typeof map[]} fieldsCN + * @returns string[] + */ +export const getFieldEN = (fieldsCN) => { + return fieldsCN.map(field => mapRelation[field]) +} + +/** + * @typedef {property: number;type: number;default: number;comment: number;effectiveTiming: number;platformDifferences: number;} FieldMap + */ + +/** + * 通过`fieldsEN`获取字段和index的map + * @param {keyof typeof map[]} fieldsEN + * @returns FieldMap + */ +export const getFieldMap = (fieldsEN) => { + return Object.fromEntries(fieldsEN.map((field, index) => { + if (field !== '') return [field, index] + }).filter(Boolean)) +} + +/** + * 生成泛型字符串 + * @param {string} genericType + * @param {string} paramsType + * @returns + */ +export const genericType = (genericType, paramsType) => `${genericType}<${paramsType}>` \ No newline at end of file diff --git a/docs/component/audio.md b/docs/component/audio.md index f52d56522..cf0093761 100644 --- a/docs/component/audio.md +++ b/docs/component/audio.md @@ -26,7 +26,7 @@ app-nvue也不支持此组件。 |poster|String||默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效| |name|String|未知音频|默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效| |author|String|未知作者|默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效| -|@error|EventHandle||当发生错误时触发 error 事件，detail = {errMsg: MediaError.code}| +|@error|EventHandle||当发生错误时触发 error 事件，detail = {errMsg: string, errCode: number}| |@play|EventHandle||当开始/继续播放时触发play事件| |@pause|EventHandle||当暂停播放时触发 pause 事件| |@timeupdate|EventHandle||当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration}| diff --git a/docs/component/camera.md b/docs/component/camera.md index 04546e0b1..6a9cbac78 100644 --- a/docs/component/camera.md +++ b/docs/component/camera.md @@ -25,7 +25,7 @@ |@stop |EventHandle | |摄像头在非正常终止时触发，如退出后台等情况| | |@error |EventHandle | |用户不允许使用摄像头时触发| | |@initdone|eventhandle||相机初始化完成时触发，e.detail = {maxZoom}|微信小程序2.7.0、抖音小程序1.78.0、飞书小程序、快手小程序| -|@ready |EventHandle | |相机初始化成功时触发。event.detail = {maxZoom}|支付宝小程序1.24.3 | +|@ready |EventHandle | |相机初始化成功时触发。event.detail = {maxZoom:number}|支付宝小程序1.24.3 | |@scancode |EventHandle | |在扫码识别成功时触发，仅在 mode="scanCode" 时生效|微信小程序、支付宝小程序、抖音小程序、飞书小程序、快手小程序| diff --git a/docs/component/cover-view.md b/docs/component/cover-view.md index e2f8362f8..16a0b0eda 100644 --- a/docs/component/cover-view.md +++ b/docs/component/cover-view.md @@ -15,9 +15,12 @@ app-vue和小程序框架，渲染引擎是webview的。但为了优化体验， 支持的事件：`click` +**属性说明** + |属性名|类型|默认值|说明|平台差异说明| |:-|:-|:-|:-|:-| |scroll-top|number/string||设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效|支付宝小程序不支持| +|@click|EventHandler|||| diff --git a/docs/component/editor.md b/docs/component/editor.md index 8acf4ffdf..729c48221 100644 --- a/docs/component/editor.md +++ b/docs/component/editor.md @@ -29,7 +29,7 @@ ::: -## 属性说明 +**属性说明** | 属性 | 类型 | 默认值 | 必填 | 说明 | | --- | --- | --- | --- | --- | @@ -39,9 +39,9 @@ | show-img-toolbar | boolean | false | 否 | 点击图片时显示工具栏控件 | | show-img-resize | boolean | false | 否 | 点击图片时显示修改尺寸控件 | | @ready | eventhandle | | 否 | 编辑器初始化完成时触发 | -| @focus | eventhandle | | 否 | 编辑器聚焦时触发，event.detail = {html, text, delta} | -| @blur | eventhandle | | 否 | 编辑器失去焦点时触发，detail = {html, text, delta} | -| @input | eventhandle | | 否 | 编辑器内容改变时触发，detail = {html, text, delta} | +| @focus | eventhandle | | 否 | 编辑器聚焦时触发，event.detail = {html:string, text:string, delta: any[]} | +| @blur | eventhandle | | 否 | 编辑器失去焦点时触发，detail = {html:string, text:string, delta: any[]} | +| @input | eventhandle | | 否 | 编辑器内容改变时触发，detail = {html:string, text:string, delta: any[]} | | @statuschange | eventhandle | | 否 | 通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式 | ## HTML 标签和 style 内联样式支持情况 diff --git a/docs/component/form.md b/docs/component/form.md index 09db8f117..13eacb5d6 100644 --- a/docs/component/form.md +++ b/docs/component/form.md @@ -11,7 +11,7 @@ |:-|:-|:-|:-| |report-submit|Boolean|是否返回 formId 用于发送[模板消息](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/template-message.html)|微信小程序、支付宝小程序| |report-submit-timeout|number|等待一段时间（毫秒数）以确认 formId 是否生效。如果未指定这个参数，formId 有很小的概率是无效的（如遇到网络失败的情况）。指定这个参数将可以检测 formId 是否有效，以这个参数的时间作为这项检测的超时时间。如果失败，将返回 requestFormId:fail 开头的 formId|微信小程序2.6.2| -|@submit|EventHandle|携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}，report-submit 为 true 时才会返回 formId|| +|@submit|EventHandle|携带 form 中的数据触发 submit 事件，event.detail = {value : {name: string} , formId: string}，report-submit 为 true 时才会返回 formId|| |@reset|EventHandle|表单重置时会触发 reset 事件| | diff --git a/docs/component/image.md b/docs/component/image.md index abb8d7097..25cfdf97f 100644 --- a/docs/component/image.md +++ b/docs/component/image.md @@ -6,6 +6,8 @@ 图片组件。 +**属性说明** + |属性名 |类型 |默认值 |说明 |平台差异说明 | |:- |:- |:- |:- |:- | |src |String | |图片资源地址 | | @@ -19,6 +21,11 @@ |@load |HandleEvent| |当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'} |  | +|draggable |boolean |false |是否能拖动图片 |H5 3.1.1+、App（iOS15+） | +|@error |HandleEvent| |当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: string} | | +|@load |HandleEvent| |当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:string, width:string} |  | + + ## 图片格式说明： diff --git a/docs/component/input.md b/docs/component/input.md index 6c32873a8..935e60074 100644 --- a/docs/component/input.md +++ b/docs/component/input.md @@ -6,7 +6,7 @@ html规范中input不仅是输入框，还有radio、checkbox、时间、日期、文件选择功能。在uni-app规范中，input仅仅是输入框。其他功能uni-app有单独的组件或API：[radio组件](https://uniapp.dcloud.io/component/radio)、[checkbox组件](https://uniapp.dcloud.io/component/checkbox)、[时间选择](https://uniapp.dcloud.io/component/picker?id=%e6%97%b6%e9%97%b4%e9%80%89%e6%8b%a9%e5%99%a8)、[日期选择](https://uniapp.dcloud.io/component/picker?id=%e6%97%a5%e6%9c%9f%e9%80%89%e6%8b%a9%e5%99%a8)、[图片选择](https://uniapp.dcloud.io/api/media/image?id=chooseimage)、[视频选择](https://uniapp.dcloud.io/api/media/video?id=choosevideo)、[多媒体文件选择(含图片视频)](https://uniapp.dcloud.io/api/media/video?id=choosemedia)、[通用文件选择](https://uniapp.dcloud.io/api/media/file?id=choosefile)。 -### 属性说明 +**属性说明** |属性名|类型|默认值|说明|平台差异说明| |:-|:-|:-|:-|:-| @@ -43,10 +43,10 @@ html规范中input不仅是输入框，还有radio、checkbox、时间、日期 |always-system|Boolean|false|是否强制使用系统键盘和 Web-view 创建的 input 元素。为 true 时，confirm-type、confirm-hold 可能失效|支付宝小程序 2.7.3+| |inputmode|String|"text"|是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。[有效值](#inputmode)|H5（3.6.16+）、App-vue（3.6.16+）| |@input|EventHandle||当键盘输入时，触发input事件，event.detail = {value}|差异见下方 Tips| -|@focus|EventHandle||输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度|仅微信小程序、京东小程序、App（2.2.3+） 、QQ小程序、快手小程序支持 height| -|@blur|EventHandle||输入框失去焦点时触发，event.detail = {value: value}|| -|@confirm|EventHandle||点击完成按钮时触发，event.detail = {value: value}|| -|@keyboardheightchange|eventhandle||键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration}|微信小程序基础库2.7.0+、App 3.1.0+| +|@focus|EventHandle||输入框聚焦时触发，event.detail = { value:string, height:string }，height 为键盘高度|仅微信小程序、京东小程序、App（2.2.3+） 、QQ小程序、快手小程序支持 height| +|@blur|EventHandle||输入框失去焦点时触发，event.detail = {value: string}|| +|@confirm|EventHandle||点击完成按钮时触发，event.detail = {value: string}|| +|@keyboardheightchange|eventhandle||键盘高度发生变化的时候触发此事件，event.detail = {height: string, duration: string}|微信小程序基础库2.7.0+、App 3.1.0+| diff --git a/docs/component/live-player.md b/docs/component/live-player.md index 3812ff6c7..839ff5999 100644 --- a/docs/component/live-player.md +++ b/docs/component/live-player.md @@ -31,7 +31,7 @@ |sound-mode|string|speaker|声音输出方式;可选值speaker、ear|微信小程序、QQ小程序1.5.0（仅支持speaker）| |min-cache|Number|1|最小缓冲区，单位s|| |max-cache|Number|3|最大缓冲区，单位s|| -|picture-in-picture-mode|string/Array|3|设置小窗模式： push, pop，空字符串或通过数组形式设置多种模式（如： ["push", "pop"]）|微信小程序（2.10.3）| +|picture-in-picture-mode|string/Array<string>|3|设置小窗模式： push, pop，空字符串或通过数组形式设置多种模式（如： ["push", "pop"]）|微信小程序（2.10.3）| |@statechange|EventHandle||播放状态变化事件，detail = {code}|| |@netstatus|EventHandle||网络状态通知，detail = {info}|| |@fullscreenchange|EventHandle||全屏变化事件，detail = {direction, fullScreen}。| | diff --git a/docs/component/live-pusher.md b/docs/component/live-pusher.md index bdfa2c7aa..b88ed4736 100644 --- a/docs/component/live-pusher.md +++ b/docs/component/live-pusher.md @@ -20,42 +20,41 @@ app开发，推荐使用nvue做直播，比使用vue的优势有： 当然nvue相比vue的坏处是css写法受限，如果只开发微信小程序，不考虑App，那么使用vue页面也是一样的。 -**参数说明** - -设置live-pusher组件的推流地址，推流视频模式等。 - -属性|类型 |默认值|必填|说明|平台差异说明| -:--|:--|:--|:--|:--|:--| -url|string| |是|推流地址，支持RTMP协议。| -mode |string|SD|否|推流视频模式，可取值：SD（标清）, HD（高清）, FHD（超清）。| -aspect |string|3:2|否|视频宽高比例| -muted|Boolean|false|否|是否静音。| -enable-camera|Boolean|true|否|开启摄像头。| -auto-focus|Boolean|true|否|自动聚集。| -beauty|Number|0|否|美颜，取值范围 0-9（iOS取值范围为1） ，0 表示关闭。| -whiteness|Number|0|否|美白，取值范围 0-9（iOS取值范围为1） ，0 表示关闭。| -orientation|String|"vertical"|否|画面方向| -min-bitrate|Number|200|否|最小码率。| -max-bitrate|Number|1000|否|最大码率。| -audio-quality|string|high|否|高音质(48KHz)或低音质(16KHz)，值为high, low|微信小程序1.7.0 -waiting-image|string||否|进入后台时推流的等待画面|微信小程序1.7.0 -waiting-image-hash|string||否|等待画面资源的MD5值|微信小程序1.7.0 -zoom|boolean|false|否|调整焦距|微信小程序2.1.0 -device-position|string|front|否|前置或后置，值为front, back|微信小程序2.3.0 -background-mute|boolean|false|否|进入后台时是否静音|微信小程序1.7.0 -remote-mirror|boolean|false|否|设置推流画面是否镜像，产生的效果在 live-player 反应到|微信小程序2.10.0 -local-mirror|string|auto|否|控制本地预览画面是否镜像|微信小程序2.10.0 -audio-reverb-type|number|0|否|音频混响类型|微信小程序2.10.0 -enable-mic|boolean|true|否|开启或关闭麦克风|微信小程序2.10.0 -enable-agc|boolean|false|否|是否开启音频自动增益|微信小程序2.10.0 -enable-ans|boolean|false|否|是否开启音频噪声抑制|微信小程序2.10.0 -audio-volume-type|string|voicecall|否|音量类型|微信小程序2.10.0 -@statechange|EventHandle|||状态变化事件，detail = {code}| -@netstatus|EventHandle|||网络状态通知，detail = {info}| -@error|EventHandle|||渲染错误事件，detail = {errMsg, errCode}| -@bgmstart|EventHandle|||背景音开始播放时触发|微信小程序2.4.0 -@bgmprogress|EventHandle|||背景音进度变化时触发，detail = {progress, duration}|微信小程序2.4.0 -@bgmcomplete|EventHandle|||背景音播放完成时触发|微信小程序2.4.0 +**属性说明** + +|属性|类型 |默认值|必填|说明|平台差异说明| +|:--|:--|:--|:--|:--|:--| +|url|string| |是|推流地址，支持RTMP协议。| +|mode |string|SD|否|推流视频模式，可取值：SD（标清）, HD（高清）, FHD（超清）。| +|aspect |string|3:2|否|视频宽高比例| +|muted|Boolean|false|否|是否静音。| +|enable-camera|Boolean|true|否|开启摄像头。| +|auto-focus|Boolean|true|否|自动聚集。| +|beauty|Number|0|否|美颜，取值范围 0-9（iOS取值范围为1） ，0 表示关闭。| +|whiteness|Number|0|否|美白，取值范围 0-9（iOS取值范围为1） ，0 表示关闭。| +|orientation|String|"vertical"|否|画面方向| +|min-bitrate|Number|200|否|最小码率。| +|max-bitrate|Number|1000|否|最大码率。| +|audio-quality|string|high|否|高音质(48KHz)或低音质(16KHz)，值为high, low|微信小程序1.7.0| +|waiting-image|string||否|进入后台时推流的等待画面|微信小程序1.7.0| +|waiting-image-hash|string||否|等待画面资源的MD5值|微信小程序1.7.0| +|zoom|boolean|false|否|调整焦距|微信小程序2.1.0| +|device-position|string|front|否|前置或后置，值为front, back|微信小程序2.3.0| +|background-mute|boolean|false|否|进入后台时是否静音|微信小程序1.7.0| +|remote-mirror|boolean|false|否|设置推流画面是否镜像，产生的效果在 live-player 反应到|微信小程序2.10.0| +|local-mirror|string|auto|否|控制本地预览画面是否镜像|微信小程序2.10.0| +|audio-reverb-type|number|0|否|音频混响类型|微信小程序2.10.0| +|enable-mic|boolean|true|否|开启或关闭麦克风|微信小程序2.10.0| +|enable-agc|boolean|false|否|是否开启音频自动增益|微信小程序2.10.0| +|enable-ans|boolean|false|否|是否开启音频噪声抑制|微信小程序2.10.0| +|audio-volume-type|string|voicecall|否|音量类型|微信小程序2.10.0| +|@statechange|EventHandle|||状态变化事件，detail = {code:number}| +|@netstatus|EventHandle|||网络状态通知，detail = {info:any}| +|@error|EventHandle|||渲染错误事件，detail = {errMsg:number, errCode:number}| +|@bgmstart|EventHandle|||背景音开始播放时触发|微信小程序2.4.0| +|@bgmprogress|EventHandle|||背景音进度变化时触发，detail = {progress:number, duration:number}|微信小程序2.4.0| +|@bgmcomplete|EventHandle|||背景音播放完成时触发|微信小程序2.4.0| + #### orientation 的合法值 diff --git a/docs/component/map.md b/docs/component/map.md index 5362b3e5c..ed5dec4f4 100644 --- a/docs/component/map.md +++ b/docs/component/map.md @@ -28,15 +28,15 @@ |longitude|Number||中心经度|| |latitude|Number||中心纬度|| |scale|Number|16|缩放级别，取值范围为3-20|高德地图缩放比例与微信小程序不同| -|theme|String|normal|主题（satellite 或 normal）只在初始化时有效，不能动态变更（仅Android支持）|京东小程序| +|theme|'satellite'|'normal'|normal|主题（satellite 或 normal）只在初始化时有效，不能动态变更（仅Android支持）|京东小程序| |min-scale|Number|3|最小缩放级别|App-nvue 3.1.0+、微信小程序2.13+| |max-scale|Number|20|最大缩放级别|App-nvue 3.1.0+、微信小程序2.13+| |layer-style|Number/String|1|个性化地图|App-nvue 3.1.0+、微信小程序2.13+| -|markers|Array||标记点|| -|polyline|Array||路线|飞书小程序不支持| -|circles|Array||圆|| -|controls|Array||控件|| -|include-points|Array||缩放视野以包含所有给定的坐标点|App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序、京东小程序| +|markers|MapMarker[]||标记点|| +|polyline|MapPolyLine[]||路线|飞书小程序不支持| +|circles|MapCircle[]||圆|| +|controls|MapControl[]||控件|| +|include-points|MapPoint[]||缩放视野以包含所有给定的坐标点|App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序、京东小程序| |zIndex|number|false|显示层级|微信小程序2.3.0| |enable-3D|Boolean|false|是否显示3D楼块|App-nvue 2.1.5+、微信小程序2.3.0| |show-compass|Boolean|false|是否显示指南针|App-nvue 2.1.5+、微信小程序2.3.0| @@ -51,17 +51,18 @@ |enable-poi|Boolean|false|是否展示 POI 点|App-nvue 3.1.0+| |enable-building|Boolean|false|是否展示建筑物|App-nvue 3.1.0+ 支持 (**废除原enable-3D属性 高德地图默认开启建筑物就是3D无法设置**)| |show-location|Boolean||显示带有方向的当前定位点|微信小程序、H5、百度小程序、支付宝小程序、京东小程序| -|polygons（支付宝为: polygon）|Array.``||多边形|App-nvue 2.1.5+、App-vue 3.4.3+、H5 3.4.3+、微信小程序、百度小程序、支付宝小程序| +|polygons|MapPolygon[]||多边形|App-nvue 2.1.5+、App-vue 3.4.3+、H5 3.4.3+、微信小程序、百度小程序程序| +|polygon|MapPolygon[]||多边形|支付宝小程序| |enable-indoorMap|Boolean|false|是否展示室内地图|App-nvue 3.1.0+| -|@markertap|EventHandle||点击标记点时触发，e.detail = {markerId}|App-nvue 2.3.3+、H5、微信小程序、支付宝小程序 （App和H5平台需要指定 marker 对象属性 id）| -|@labeltap|EventHandle||点击label时触发，e.detail = {markerId} |微信小程序2.9.0| -|@callouttap|EventHandle||点击标记点对应的气泡时触发，e.detail = {markerId}|| -|@controltap|EventHandle||点击控件时触发，e.detail = {controlId}|| +|@markertap|EventHandle||点击标记点时触发，e.detail = {markerId: number}|App-nvue 2.3.3+、H5、微信小程序、支付宝小程序 （App和H5平台需要指定 marker 对象属性 id）| +|@labeltap|EventHandle||点击label时触发，e.detail = {markerId: number} |微信小程序2.9.0| +|@callouttap|EventHandle||点击标记点对应的气泡时触发，e.detail = {markerId: number}|| +|@controltap|EventHandle||点击控件时触发，e.detail = {controlId: number}|| |@regionchange|EventHandle||视野发生变化时触发|微信小程序、H5、百度小程序、支付宝小程序、京东小程序| |@tap|EventHandle||点击地图时触发; App-nvue、微信小程序2.9支持返回经纬度|| |@updated|EventHandle||在地图渲染更新完成时触发|微信小程序、H5、百度小程序| -|@anchorpointtap|EventHandle||点击定位标时触发，e.detail = {longitude, latitude}|App-nvue 3.1.0+、微信小程序2.13+| -|@poitap|EventHandle||点击地图poi点时触发，e.detail = {name, longitude, latitude}|微信小程序2.3.0+| +|@anchorpointtap|EventHandle||点击定位标时触发，e.detail = {longitude: number, latitude: number}|App-nvue 3.1.0+、微信小程序2.13+| +|@poitap|EventHandle||点击地图poi点时触发，e.detail = {name: string, longitude: number, latitude: number}|微信小程序2.3.0+| **注意** @@ -98,7 +99,7 @@ App平台（包含iOS、安卓、鸿蒙）腾讯地图使用web方案，在申 3. 覆盖物支持调整与其它地图元素的压盖关系。 4. 支持marker（小车）平移动画，适用于轨迹回放场景。 -**markers** +**MapMarker** 标记点用于在地图上显示标记的位置 @@ -117,11 +118,11 @@ App平台（包含iOS、安卓、鸿蒙）腾讯地图使用web方案，在申 |label|为标记点旁边增加标签|Object|否|支持的属性见下表，可识别换行符。|App-nvue 2.1.5+、微信小程序、H5、App、百度小程序、支付宝小程序| |anchor|经纬度在标注图标的锚点，默认底边中点|Object|否|{x, y}，x表示横向(0-1)，y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点|App-nvue 2.1.5+、微信小程序、H5、百度小程序、京东小程序| |clusterId|自定义点聚合簇效果时使用|Number|否||App-nvue 3.1.0+、微信小程序| -|customCallout|自定义气泡窗口|Object|否||App-nvue 2.1.5+、微信小程序、支付宝小程序| +|customCallout|自定义气泡窗口|MapMarkerCallOut|否||App-nvue 2.1.5+、微信小程序、支付宝小程序| |aria-label|无障碍访问，（属性）元素的额外描述|String|否||App-nvue 3.1.0+、微信小程序| |joinCluster|是否参与点聚合|Boolean|否|如果指定点聚合 此选项值必须设置为true,才会生效|App-nvue 3.1.0+、微信小程序| -**marker 上的气泡 callout** +**MapMarkerCallOut** |属性|说明|类型|平台差异说明| |:-|:-|:-|:-| @@ -138,7 +139,7 @@ App平台（包含iOS、安卓、鸿蒙）腾讯地图使用web方案，在申 |anchorX |横向偏移量，向右为正数|Number|微信小程序2.11.0| |anchorY |纵向偏移量，向下为正数|Number|微信小程序2.11.0| -**marker 上的标签 label** +**MapMarkerLabel** |属性|说明|类型|平台差异说明| |:-|:-|:-|:-| @@ -169,13 +170,13 @@ MapContext.on('markerClusterCreate', callback) 触发时，通过 [MapContext.ad [MapContext.removeMarkers](/api/location/map?id=createmapcontext) 移除参与聚合的 marker； -**polyline** +**MapPolyLine** 指定一系列坐标点，从数组第一项连线至最后一项 |属性|说明|类型|必填|备注|平台差异说明| |:-|:-|:-|:-|:-|:-| -|points|经纬度数组|Array|是|[{latitude: 0, longitude: 0}]|| +|points|经纬度数组|MapPoint[]|是|[{latitude: 0, longitude: 0}]|| |color|线的颜色|String|否|8位十六进制表示，后两位表示alpha值，如：#0000AA|| |width|线的宽度|Number|否||| |dottedLine|是否虚线|Boolean|否|默认false|App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序、京东小程序| @@ -183,26 +184,27 @@ MapContext.on('markerClusterCreate', callback) 触发时，通过 [MapContext.ad |arrowIconPath|更换箭头图标|String|否|在arrowLine为true时生效|App-nvue 2.1.5+、微信小程序、百度小程序、京东小程序| |borderColor|线的边框颜色|String|否||微信小程序、H5、百度小程序、京东小程序| |borderWidth|线的厚度|Number|否||微信小程序、H5、百度小程序、京东小程序| -|colorList|彩虹线|Array|否|存在时忽略 color 值|App-nvue 3.1.0+、微信小程序| +|colorList|彩虹线|string[]|否|存在时忽略 color 值|App-nvue 3.1.0+、微信小程序| |level|压盖关系
abovelabels 显示在所有 POI 之上（默认）
abovebuildings 显示在楼块之上 POI 之下
aboveroads 显示在所有 POI 之上|String|否||微信小程序| **注意事项** - App-nvue 当 arrowLine 为 true 时，显示的是带箭头的图片拼接的线 color 值会被忽略，替换箭头图片的方法[参考文档](https://ask.dcloud.net.cn/article/37901) -**polygon**
+**MapPolygon** + 指定一系列坐标点，根据 points 坐标数据生成闭合多边形 |属性|说明|类型|必填|备注 |:--|:--|:--|:--|:--| -|points|经纬度数组|array|是|[{latitude: 0, longitude: 0}] +|points|经纬度数组|MapPoint[]|是|[{latitude: 0, longitude: 0}] |strokeWidth|描边的宽度|Number|否|| |strokeColor|描边的颜色|String|否|十六进制| |fillColor|填充颜色|String|否|十六进制| |zIndex|设置多边形 Z 轴数值|Number|否|| |level|压盖关系
abovelabels 显示在所有 POI 之上（默认）
abovebuildings 显示在楼块之上 POI 之下
aboveroads 显示在所有 POI 之上|String|false|微信小程序| -**circles** +**MapCircle** 在地图上显示圆 @@ -216,18 +218,18 @@ MapContext.on('markerClusterCreate', callback) 触发时，通过 [MapContext.ad |strokeWidth|描边的宽度|Number|否| | |level|压盖关系
abovelabels 显示在所有 POI 之上（默认）
abovebuildings 显示在楼块之上 POI 之下
aboveroads 显示在所有 POI 之上|String|false|微信小程序| -**controls** +**MapControl** 在地图上显示控件，控件不随着地图移动 |属性|说明|类型|必填|备注| |:-|:-|:-|:-|:-| |id|控件id|Number|否|在控件点击事件回调会返回此id| -|position|控件在地图的位置|Object|是|控件相对地图位置| +|position|控件在地图的位置|MapPosition|是|控件相对地图位置| |iconPath|显示的图标|String|是|项目目录下的图片路径，支持相对路径写法，以'/'开头则表示相对项目根目录；也支持临时路径| |clickable|是否可点击|Boolean|否|默认不可点击| -**position** +**MapPosition** |属性|说明|类型|必填|备注| |:-|:-|:-|:-|:-| @@ -236,6 +238,13 @@ MapContext.on('markerClusterCreate', callback) 触发时，通过 [MapContext.ad |width|控件宽度|Number|否|默认为图片宽度| |height|控件高度|Number|否|默认为图片高度| +**MapPoint** + +|属性|说明|类型|必填| +|:-|:-|:-|:-| +|latitude|纬度，浮点数，范围 -90 ~ 90|Number|否| +|longitude|经度，浮点数，范围 -180 ~ 180|Number|否| + 地图组件的经纬度必填，如果不填经纬度则默认值是北京的经纬度。 **示例** [查看示例](https://hellouniapp.dcloud.net.cn/pages/component/map/map) @@ -287,40 +296,40 @@ export default { #### Map 地图组件 -|属性 |说明 |高德是否支持 |google地图是否支持 | -|:---- |:---- |:---- |:---- | -|subkey |个性化地图使用的key |不支持 |不支持 | -|show-scale |显示比例尺 |已支持 |不支持 | -|enable-poi |是否展示 POI 点 |已支持 |不支持 | -|labeltap |点击label时触发 |已支持 |Android支持iOS不支持 | -|poitap |点击地图poi点时触发 |已支持 |Android不支持 iOS支持 | +|属性|说明|高德是否支持|google地图是否支持| +|:----|:----|:----|:----| +|subkey|个性化地图使用的key|不支持|不支持| +|show-scale|显示比例尺|已支持|不支持| +|enable-poi|是否展示 POI 点|已支持|不支持| +|labeltap|点击label时触发|已支持|Android支持iOS不支持| +|poitap|点击地图poi点时触发|已支持|Android不支持 iOS支持| #### marker -|属性 |说明 |高德是否支持 |google地图是否支持 | -|:---- |:---- |:---- |:---- | -|label |为标记点旁边增加标签 |已支持 |Android支持 iOS不支持 | +|属性|说明|高德是否支持|google地图是否支持| +|:----|:----|:----|:----| +|label|为标记点旁边增加标签|已支持|Android支持 iOS不支持| #### marker 上的气泡 callout -|属性 |说明 |高德是否支持 |google地图是否支持 | -|:---- |:---- |:---- |:---- | -|display |'BYCLICK':点击显示; 'ALWAYS':常显 |已支持 |Android支持iOS只支持 'BYCLICK' | +|属性|说明|高德是否支持|google地图是否支持| +|:----|:----|:----|:----| +|display|'BYCLICK':点击显示; 'ALWAYS':常显|已支持|Android支持iOS只支持 'BYCLICK'| #### marker 上的自定义气泡 customCallout -|属性 |说明 |高德是否支持 |google地图是否支持 | -|:---- |:---- |:---- |:---- | -|display|'BYCLICK':点击显示; 'ALWAYS':常显 |已支持 |Android支持iOS只支持 'BYCLICK' | +|属性|说明|高德是否支持|google地图是否支持| +|:----|:----|:----|:----| +|display|'BYCLICK':点击显示; 'ALWAYS':常显|已支持|Android支持iOS只支持 'BYCLICK'| #### polyline -|属性 |说明 |高德是否支持 |google地图是否支持 | -|:---- |:---- |:---- |:---- | -|colorList |彩虹线 |已支持 |Android不支持 iOS支持 | -|dottedLine |是否虚线 |已支持 |Android已支持 iOS不支持 | -|arrowLine |带箭头的线 |已支持 |Android不支持 iOS支持 | -|arrowIconPath|更换箭头图标 |已支持 |Android不支持 iOS支持 | +|属性|说明|高德是否支持|google地图是否支持| +|:----|:----|:----|:----| +|colorList|彩虹线|已支持|Android不支持 iOS支持| +|dottedLine|是否虚线|已支持|Android已支持 iOS不支持| +|arrowLine|带箭头的线|已支持|Android不支持 iOS支持| +|arrowIconPath|更换箭头图标|已支持|Android不支持 iOS支持| **map 组件相关操作的 JS API**：[uni.createMapContext](../api/location/map.md#createmapcontext) diff --git a/docs/component/movable-view.md b/docs/component/movable-view.md index 4783a860e..3f925d1f9 100644 --- a/docs/component/movable-view.md +++ b/docs/component/movable-view.md @@ -29,8 +29,10 @@ |scale-max|Number|10|定义缩放倍数最大值|| |scale-value|Number|1|定义缩放倍数，取值范围为 0.1/0.5 - 10|0.1 倍需要 App(4.51+)、H5(4.51+)、微信小程序(4.51+)| |animation|Boolean|true|是否使用动画|| -|@change|EventHandle||拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData）|| -|@scale|EventHandle||缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}，|| +|@change|EventHandle||拖动过程中触发的事件，event.detail = {x: number, y: number, source: any}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData）|| +|@scale|EventHandle||缩放过程中触发的事件，event.detail = {x: number, y: number, scale: number}，|| + + diff --git a/docs/component/page-meta.md b/docs/component/page-meta.md index fbbd7c537..8e69e0c96 100644 --- a/docs/component/page-meta.md +++ b/docs/component/page-meta.md @@ -31,8 +31,8 @@ |page-style|string|""|否|页面根节点样式，页面根节点是所有页面节点的祖先节点，相当于 HTML 中的 body 节点|微信基础库 2.9.0| |root-font-size|string|""|否|页面的根字体大小，页面中的所有 rem 单位，将使用这个字体大小作为参考值，即 1rem 等于这个字体大小|微信基础库 2.9.0| |enable-pull-down-refresh|Boolean|""|否|是否开启下拉刷新|App 2.6.7| -|@resize|eventhandle||否|页面尺寸变化时会触发 resize 事件， event.detail = { size: { windowWidth, windowHeight } }|微信基础库 2.9.0| -|@scroll|eventhandle||否|页面滚动时会触发 scroll 事件， event.detail = { scrollTop }|微信基础库 2.9.0| +|@resize|eventhandle||否|页面尺寸变化时会触发 resize 事件， event.detail = { size: { windowWidth: number, windowHeight: number } }|微信基础库 2.9.0| +|@scroll|eventhandle||否|页面滚动时会触发 scroll 事件， event.detail = { scrollTop: number }|微信基础库 2.9.0| |@scrolldone|eventhandle||否|如果通过改变 scroll-top 属性来使页面滚动，页面滚动结束后会触发 scrolldone 事件|微信基础库 2.9.0| diff --git a/docs/component/picker-view.md b/docs/component/picker-view.md index 81f7cfa25..2ce3928c6 100644 --- a/docs/component/picker-view.md +++ b/docs/component/picker-view.md @@ -18,7 +18,7 @@ |mask-bottom-style|String|设置蒙层下半部分的样式（使用 background-image 覆盖）|仅 app-nvue（3.6.7+） 支持| |mask-class|String|设置蒙层的类名|app-nvue与抖音小程序与飞书小程序不支持| |immediate-change|Boolean|是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件。|微信小程序 2.21.1| -|@change|EventHandle|当滚动选择，value 改变时触发 change 事件，event.detail = {value: value}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）| | +|@change|EventHandle|当滚动选择，value 改变时触发 change 事件，event.detail = {value: [number]}；value为数组，表示 picker-view 内的 picker-view-column 当前选择的是第几项（下标从 0 开始）| | |@pickstart|eventhandle|当滚动选择开始时候触发事件|微信小程序2.3.1、快手小程序| |@pickend|eventhandle|当滚动选择结束时候触发事件|微信小程序2.3.1、快手小程序| diff --git a/docs/component/picker.md b/docs/component/picker.md index aa69700cd..0e9efe656 100644 --- a/docs/component/picker.md +++ b/docs/component/picker.md @@ -12,12 +12,12 @@ |属性名|类型|默认值|说明|平台差异说明| |:-|:-|:-|:-|:-| -|range|Array / Array<Object>|[]|mode为 selector 或 multiSelector 时，range 有效|| +|range|(string/number)[][]/(string/number)[]|[]|mode为 selector 或 multiSelector 时，range 有效|| |range-key|String||当 range 是一个 `Array＜Object＞` 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容|| |value|Number|0|value 的值表示选择了 range 中的第几个（下标从 0 开始）|| |selector-type|String|auto|UI类型,仅大屏时该属性生效，支持 picker、select、auto，默认在 iPad 以 picker 样式展示而在 PC 以 select 样式展示|H5 2.9.9+| |disabled|Boolean|false|是否禁用|快手小程序不支持| -|@change|EventHandle||value 改变时触发 change 事件，event.detail = {value: value}|| +|@change|EventHandle||value 改变时触发 change 事件，event.detail = {value: any}|| |@cancel|EventHandle||取消选择或点遮罩层收起 picker 时触发|快手小程序不支持| - picker在各平台的实现是有UI差异的，有的平台如百度、支付宝小程序的Android端是从中间弹出的；有的平台支持循环滚动如百度小程序；有的平台没有取消按钮如App-iOS端。但均不影响功能使用。 @@ -38,11 +38,11 @@ |属性名|类型|默认值|说明| |:-|:-|:-|:-| -|range|二维 Array / 二维 Array＜Object＞|[]|mode为 selector 或 multiSelector 时，range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[["a","b"], ["c","d"]]| +|range|(string/number)[][]/(string/number)[]|[]|mode为 selector 或 multiSelector 时，range 有效。二维数组，长度表示多少列，数组的每项表示每列的数据，如[["a","b"], ["c","d"]]| |range-key|String||当 range 是一个二维 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容| |value|Array|[]|value 每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始）| -|@change|EventHandle||value 改变时触发 change 事件，event.detail = {value: value}| -|@columnchange|EventHandle||某一列的值改变时触发 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标| +|@change|EventHandle||value 改变时触发 change 事件，event.detail = {value: any}| +|@columnchange|EventHandle||某一列的值改变时触发 columnchange 事件，event.detail = {column: any, value: any}，column 的值表示改变了第几列（下标从0开始），value 的值表示变更值的下标| |@cancel|EventHandle||取消选择时触发（快手小程序不支持）| |disabled|Boolean|false|是否禁用（快手小程序不支持）| @@ -69,7 +69,7 @@ |value|String||表示选中的时间，格式为"hh:mm"|| |start|String||表示有效时间范围的开始，字符串格式为"hh:mm"|App 不支持| |end|String||表示有效时间范围的结束，字符串格式为"hh:mm"|App 不支持| -|@change|EventHandle||value 改变时触发 change 事件，event.detail = {value: value}|| +|@change|EventHandle||value 改变时触发 change 事件，event.detail = {value: any}|| |@cancel|EventHandle||取消选择时触发|| |disabled|Boolean|false|是否禁用| | @@ -92,8 +92,8 @@ |value|String|0|表示选中的日期，格式为"YYYY-MM-DD"|| |start|String||表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"|| |end|String||表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"|| -|fields|String|day|有效值 year、month、day，表示选择器的粒度，默认为 day，App 端未配置此项时使用系统 UI|H5、App 2.6.3+、微信小程序、支付宝小程序、百度小程序、抖音小程序、飞书小程序| -|@change|EventHandle||value 改变时触发 change 事件，event.detail = {value: value}|| +|fields|String|day|有效值 year、month、day，表示选择器的粒度，默认为 day，App 端未配置此项时使用系统 UI|H5、App 2.6.3+、微信小程序、百度小程序、抖音小程序、飞书小程序| +|@change|EventHandle||value 改变时触发 change 事件，event.detail = {value: any}|| |@cancel|EventHandle||取消选择时触发|| |disabled|Boolean|false|是否禁用| | @@ -121,7 +121,7 @@ |:-|:-|:-|:-| |value|Array|[]|表示选中的省市区，默认选中每一列的第一个值| |custom-item|String||可为每一列的顶部添加一个自定义的项| -|@change|EventHandle||value 改变时触发 change 事件，event.detail = {value: value}| +|@change|EventHandle||value 改变时触发 change 事件，event.detail = {value: any}| |@cancel|EventHandle||取消选择时触发（快手小程序不支持）| |disabled|Boolean|false|是否禁用（快手小程序不支持）| diff --git a/docs/component/radio.md b/docs/component/radio.md index 72d34dfe2..c579fee9b 100644 --- a/docs/component/radio.md +++ b/docs/component/radio.md @@ -8,8 +8,7 @@ |属性名|类型|默认值|说明| |:-|:-|:-|:-| -|@change|EventHandle||```` 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value}| - +|@change|EventHandle||```` 中的选中项发生变化时触发 change 事件，event.detail = {value: string}| diff --git a/docs/component/rich-text.md b/docs/component/rich-text.md index df38c581d..3bda59433 100644 --- a/docs/component/rich-text.md +++ b/docs/component/rich-text.md @@ -10,7 +10,7 @@ |属性名|类型|默认值|说明|平台兼容| |:-|:-|:-|:-|:-| -|nodes|Array / String|[]|节点列表 / HTML String|| +|nodes|string[] / string|[]|节点列表 / HTML String|| |space|string||显示连续空格|App、H5、微信基础库2.4.1+[详见](https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html)、QQ小程序、抖音小程序、快手小程序[详见](https://mp.kuaishou.com/docs/develop/components/basicComponents/richText.html)| |selectable|Boolean|true|富文本是否可以长按选中，可用于复制，粘贴等场景|百度小程序（仅真机支持，基础库 3.150.1 以下版本默认为 false）| |image-menu-prevent|Boolean|false|阻止长按图片时弹起默认菜单（将该属性设置为image-menu-prevent或image-menu-prevent="true"），只在初始化时有效，不能动态变更；若不想阻止弹起默认菜单，则不需要设置此属性|百度小程序| diff --git a/docs/component/scroll-view.md b/docs/component/scroll-view.md index df8f9717a..6d4a7b00f 100644 --- a/docs/component/scroll-view.md +++ b/docs/component/scroll-view.md @@ -6,7 +6,7 @@ -## 属性说明 +**属性说明** |属性名 |类型 |默认值 |说明 |平台差异说明 | |:- |:- |:- |:- |:- | @@ -29,7 +29,7 @@ |scroll-anchoring|Boolean|false|开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor 属性。|微信小程序 2.8.2| |@scrolltoupper |EventHandle| |滚动到顶部/左边，会触发 scrolltoupper 事件 | | |@scrolltolower |EventHandle| |滚动到底部/右边，会触发 scrolltolower 事件 | | -|@scroll |EventHandle| |滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} | | +|@scroll |EventHandle| |滚动时触发，event.detail = {scrollLeft: number, scrollTop: number, scrollHeight: number, scrollWidth: number, deltaX: number, deltaY: number} | | |@refresherpulling |EventHandle| |自定义下拉刷新控件被下拉|H5、app-vue 2.5.12+,微信小程序基础库2.10.1+| |@refresherrefresh |EventHandle| |自定义下拉刷新被触发|H5、app-vue 2.5.12+,微信小程序基础库2.10.1+| |@refresherrestore |EventHandle| |自定义下拉刷新被复位|H5、app-vue 2.5.12+,微信小程序基础库2.10.1+| diff --git a/docs/component/slider.md b/docs/component/slider.md index ad8b91a6b..80c52f4ae 100644 --- a/docs/component/slider.md +++ b/docs/component/slider.md @@ -18,8 +18,11 @@ |block-size|Number|28|滑块的大小，取值范围为 12 - 28 |block-color|Color|#ffffff|滑块的颜色| |show-value|Boolean|false|是否显示当前 value| -|@change|EventHandle||完成一次拖动后触发的事件，event.detail = {value: value}| -|@changing|EventHandle||拖动过程中触发的事件，event.detail = {value: value}| +|@change|EventHandle||完成一次拖动后触发的事件，event.detail = {value: number}| +|@changing|EventHandle||拖动过程中触发的事件，event.detail = {value: number}| + + + diff --git a/docs/component/swiper.md b/docs/component/swiper.md index 9b29d8d39..1a0667d7b 100644 --- a/docs/component/swiper.md +++ b/docs/component/swiper.md @@ -33,9 +33,11 @@ |disable-touch|Boolean|false|是否禁止用户 touch 操作|App 2.5.5+、H5 2.5.5+、支付宝小程序、抖音小程序与飞书小程序（只在初始化时有效，不能动态变更）| |touchable|Boolean|true|是否监听用户的触摸事件，只在初始化时有效，不能动态变更|抖音小程序与飞书小程序（uni-app 2.5.5+ 推荐统一使用 disable-touch）| |easing-function|String|default|指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic|微信小程序、快手小程序、京东小程序| -|@change|EventHandle||current 改变时会触发 change 事件，event.detail = {current: current, source: source}|| -|@transition|EventHandle||swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}，支付宝小程序暂不支持dx, dy|App、H5、微信小程序、支付宝小程序、抖音小程序、飞书小程序、QQ小程序、快手小程序| -|@animationfinish|EventHandle||动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source}|抖音小程序与飞书小程序不支持| +|@change|EventHandle||current 改变时会触发 change 事件，event.detail = {current: number, source: any}|| +|@transition|EventHandle||swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: number, dy: number}，支付宝小程序暂不支持dx, dy|App、H5、微信小程序、支付宝小程序、抖音小程序、飞书小程序、QQ小程序、快手小程序| +|@animationfinish|EventHandle||动画结束时会触发 animationfinish 事件，event.detail = {current: number, source: any}|抖音小程序与飞书小程序不支持| + + diff --git a/docs/component/switch.md b/docs/component/switch.md index 5839cc81a..ce0947d90 100644 --- a/docs/component/switch.md +++ b/docs/component/switch.md @@ -12,9 +12,7 @@ |disabled|Boolean|false|是否禁用|抖音小程序与飞书小程序不支持| |type|String|switch|样式，有效值：switch, checkbox|| |color|Color|-|switch 的颜色，同 css 的 color|| -|@change|EventHandle|-|checked 改变时触发 change 事件，event.detail={ value:checked}|| - - +|@change|EventHandle|-|checked 改变时触发 change 事件，event.detail={ value:boolean}|| **示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/switch/switch) diff --git a/docs/component/text.md b/docs/component/text.md index b16ac5867..e88e3b562 100644 --- a/docs/component/text.md +++ b/docs/component/text.md @@ -9,13 +9,13 @@ 虽然app-uvue中写在view的text区域的文字，也会被编译器自动包裹一层text组件，看起来也可以使用。但这样会造成无法修改该text文字的样式，详见uvue的[样式不继承](https://doc.dcloud.net.cn/uni-app-x/css/#stylenoextends)章节 -## 属性说明 +**属性说明** |属性名 |类型 |默认值 |说明 |平台差异说明 | |:-|:- |:- |:- |:- | |selectable |Boolean|false |文本是否可选 | | |user-select |Boolean|false |文本是否可选 | 微信小程序 | -|space |String | |显示连续空格 |钉钉小程序不支持 | +|space |'ensp'/'emsp'/'nbsp' | |显示连续空格 |钉钉小程序不支持 | |decode |Boolean|false |是否解码 |百度、钉钉小程序不支持 | diff --git a/docs/component/textarea.md b/docs/component/textarea.md index 0883a7180..7b645df7f 100644 --- a/docs/component/textarea.md +++ b/docs/component/textarea.md @@ -32,12 +32,13 @@ |auto-blur|boolean|false|键盘收起时，是否自动失去焦点|App-vue 3.0.0+ ，App-nvue不支持| |ignoreCompositionEvent|boolean|true|是否忽略组件内对文本合成系统事件的处理。为 `false` 时将触发 `compositionstart、compositionend、compositionupdate` 事件，且在文本合成期间会触发 `input` 事件|App-vue (3.4.4+)、H5 (3.4.4+)、App-nvue不支持| |inputmode|String|"text"|是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。[有效值](#inputmode)|H5（3.7.0+）、App-vue（3.7.0+）| -|@focus|EventHandle||输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度|仅微信小程序、京东小程序、App（HBuilderX 2.0+ [nvue uni-app模式](http://ask.dcloud.net.cn/article/36074)） 、QQ小程序支持 height| -|@blur|EventHandle||输入框失去焦点时触发，event.detail = {value, cursor}|快手小程序不支持 cursor| -|@linechange|EventHandle||输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}|抖音小程序、飞书小程序、快手小程序不支持| -|@input|EventHandle||当键盘输入时，触发 input 事件，event.detail = {value, cursor}， @input 处理函数的返回值并不会反映到 textarea 上|快手小程序不支持| -|@confirm|EventHandle||点击完成时， 触发 confirm 事件，event.detail = {value: value}|微信小程序、百度小程序、QQ小程序、京东小程序| -|@keyboardheightchange|Eventhandle||键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration}|微信小程序基础库2.7.0+、App 3.1.0+| +|@focus|EventHandle||输入框聚焦时触发，event.detail = { value: string, height: number }，height 为键盘高度|仅微信小程序、京东小程序、App（HBuilderX 2.0+ [nvue uni-app模式](http://ask.dcloud.net.cn/article/36074)） 、QQ小程序支持 height| +|@blur|EventHandle||输入框失去焦点时触发，event.detail = {value: string, cursor: number}|快手小程序不支持 cursor cursor| +|@linechange|EventHandle||输入框行数变化时调用，event.detail = {height: number, heightRpx: number, lineCount: number}|抖音小程序、飞书小程序、快手小程序不支持| +|@input|EventHandle||当键盘输入时，触发 input 事件，event.detail = {value: string, cursor: number}， @input 处理函数的返回值并不会反映到 textarea 上|快手小程序不支持| +|@confirm|EventHandle||点击完成时， 触发 confirm 事件，event.detail = {value: string}|微信小程序、百度小程序、QQ小程序、京东小程序| +|@keyboardheightchange|Eventhandle||键盘高度发生变化的时候触发此事件，event.detail = {height: number, duration: number}|微信小程序基础库2.7.0+、App 3.1.0+| + diff --git a/docs/component/video.md b/docs/component/video.md index fa7569ce1..335f73ad3 100644 --- a/docs/component/video.md +++ b/docs/component/video.md @@ -16,7 +16,7 @@ |initial-time|Number||指定视频初始播放位置，单位为秒（s）。|飞书小程序不支持| |duration|Number||指定视频时长，单位为秒（s）。|抖音小程序、飞书小程序、快手小程序、京东小程序不支持| |controls|Boolean|true|是否显示默认播放控件（播放/暂停按钮、播放进度、时间）|快手小程序不支持| -|danmu-list|Object Array||弹幕列表|抖音小程序、飞书小程序、快手小程序、京东小程序不支持| +|danmu-list|{text: string;color: string;time: number;}[]||弹幕列表|抖音小程序、飞书小程序、快手小程序、京东小程序不支持| |danmu-btn|Boolean|false|是否显示弹幕按钮，只在初始化时有效，不能动态变更|抖音小程序、飞书小程序、快手小程序、京东小程序不支持| |enable-danmu|Boolean|false|是否展示弹幕，只在初始化时有效，不能动态变更|抖音小程序、飞书小程序、快手小程序、京东小程序不支持| |page-gesture|Boolean|false|在非全屏模式下，是否开启亮度与音量调节手势|微信小程序、H5| @@ -48,18 +48,18 @@ |@play|EventHandle||当开始/继续播放时触发play事件|飞书小程序不支持| |@pause|EventHandle||当暂停播放时触发 pause 事件|飞书小程序不支持| |@ended|EventHandle||当播放到末尾时触发 ended 事件|飞书小程序不支持| -|@timeupdate|EventHandle||播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次|飞书小程序不支持| -|@fullscreenchange|EventHandle||当视频进入和退出全屏时触发，event.detail = {fullScreen, direction}，direction取为 vertical 或 horizontal|飞书小程序不支持| +|@timeupdate|EventHandle||播放进度变化时触发，event.detail = {currentTime: number, duration: number} 。触发频率 250ms 一次|飞书小程序不支持| +|@fullscreenchange|EventHandle||当视频进入和退出全屏时触发，event.detail = {fullScreen: boolean, direction: 'vertical'|'horizontal'}，direction取为 vertical 或 horizontal|飞书小程序不支持| |@waiting|EventHandle||视频出现缓冲时触发|飞书小程序、快手小程序不支持| |@error|EventHandle||视频播放出错时触发|飞书小程序不支持| -|@progress|EventHandle||加载进度变化时触发，只支持一段加载。event.detail = {buffered}，百分比|微信小程序、抖音小程序、H5| +|@progress|EventHandle||加载进度变化时触发，只支持一段加载。event.detail = {buffered:Blob}，百分比|微信小程序、抖音小程序、H5| |@loadeddata|EventHandle||视频资源开始加载时触发|京东小程序| |@loadstart|EventHandle||开始加载数据|京东小程序| |@seeked|EventHandle||拖动进度条结束|京东小程序| |@seeking|EventHandle||正在拖动进度条|京东小程序| -|@loadedmetadata|EventHandle||视频元数据加载完成时触发。event.detail = {width, height, duration}|微信小程序、H5、抖音小程序、京东小程序| -|@fullscreenclick|EventHandle||视频播放全屏播放时点击事件。event.detail = { screenX:"Number类型，点击点相对于屏幕左侧边缘的 X 轴坐标", screenY:"Number类型，点击点相对于屏幕顶部边缘的 Y 轴坐标", screenWidth:"Number类型，屏幕总宽度", screenHeight:"Number类型，屏幕总高度"}|App 2.6.3+| -|@controlstoggle|EventHandle||切换 controls 显示隐藏时触发。event.detail = {show}|微信小程序2.9.5| +|@loadedmetadata|EventHandle||视频元数据加载完成时触发。event.detail = {width: number, height: number, duration}|微信小程序、H5、抖音小程序、京东小程序| +|@fullscreenclick|EventHandle||视频播放全屏播放时点击事件。event.detail = { screenX: number, screenY: number, screenWidth:"Number类型，屏幕总宽度", screenHeight:"Number类型，屏幕总高度"}|App 2.6.3+| +|@controlstoggle|EventHandle||切换 controls 显示隐藏时触发。event.detail = {show: boolean}|微信小程序2.9.5| `