From 1a717ec280c8132958dd241b4d2abe1c62f4569f Mon Sep 17 00:00:00 2001 From: weiquanju Date: Tue, 30 Jan 2024 17:53:59 +0800 Subject: [PATCH 01/17] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=8C=85=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=EF=BC=8C=E6=94=AF=E6=8C=81es=20modules?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 4609ca24..43dbf210 100644 --- a/package.json +++ b/package.json @@ -6,10 +6,12 @@ "directories": { "doc": "docs" }, + "type": "module", "scripts": { "dev": "vuepress dev docs", "build": "node --max_old_space_size=4096 ./node_modules/vuepress/cli.js build docs --no-cache", - "build-lite": "cross-env DOCS_LITE=true node --max_old_space_size=4096 ./node_modules/vuepress/cli.js build docs-lite --no-cache" + "build-lite": "cross-env DOCS_LITE=true node --max_old_space_size=4096 ./node_modules/vuepress/cli.js build docs-lite --no-cache", + "generate-ts": "node docs/.vuepress/generate-ts/index.mjs" }, "repository": { "type": "git", From 1258b46883f7ebf2729aa86e208a2e56f43a0631 Mon Sep 17 00:00:00 2001 From: weiquanju Date: Tue, 30 Jan 2024 18:36:31 +0800 Subject: [PATCH 02/17] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E7=94=9F?= =?UTF-8?q?=E6=88=90=E5=86=85=E9=83=A8=E7=BB=84=E4=BB=B6d.ts=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.vuepress/generate-ts/README.md | 37 ++ docs/.vuepress/generate-ts/index.mjs | 42 +++ docs/.vuepress/generate-ts/interface.mjs | 330 ++++++++++++++++++ docs/.vuepress/generate-ts/relation.mjs | 167 +++++++++ .../.vuepress/generate-ts/type-relations.json | 75 ++++ docs/.vuepress/generate-ts/utils.mjs | 98 ++++++ 6 files changed, 749 insertions(+) create mode 100644 docs/.vuepress/generate-ts/README.md create mode 100644 docs/.vuepress/generate-ts/index.mjs create mode 100644 docs/.vuepress/generate-ts/interface.mjs create mode 100644 docs/.vuepress/generate-ts/relation.mjs create mode 100644 docs/.vuepress/generate-ts/type-relations.json create mode 100644 docs/.vuepress/generate-ts/utils.mjs diff --git a/docs/.vuepress/generate-ts/README.md b/docs/.vuepress/generate-ts/README.md new file mode 100644 index 00000000..c3e9fbd9 --- /dev/null +++ b/docs/.vuepress/generate-ts/README.md @@ -0,0 +1,37 @@ +# 生成 ts`d.ts`文件 + +## 为什么需要这个功能 + +1. 方便 Volar 展现内置组件类型，方便开发者查看组件内置组件属性和事件，提高工作效率 +2. 基于项目 markdown 文档生成，便于后续 markdown 修改时，通过脚本生成的方式，同步修改内置组件 types + +## 生产`d.ts` + +### node环境 + +node: `v20.10.0` + +### 构建命令 + +```shell +pnpm generate-ts +``` + +## 产物发布 + +建议放`@dcloud/types`项目`inner-components` + +### 使用 + +基于发布产物目标目录`@dcloud/types/inner-components` + +在[quickstart-cli][quickstart-cli]中的[uni-preset-vue typescript][uni-preset-vue:ts]项目`src/shime-uni.d.ts`中增加一行 + +```ts +/// +``` + +vscode中内置组件出现内置组件的属性和事件提示 + +[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 \ 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 00000000..7de88a09 --- /dev/null +++ b/docs/.vuepress/generate-ts/index.mjs @@ -0,0 +1,42 @@ +import { readFile, writeFile } from "fs/promises" +import { existsSync, mkdirSync } from 'node:fs' +import { resolve, dirname } from "path" +import generateInterface, { getIndexDoc } 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 }); + } + tsDoc && writeFile(savePath, tsDoc, { encoding: 'utf-8' }).catch((err) => console.error(err)) + + } + + const savePath = resolve(process.cwd(), `docs/.vuepress/types/inner-components/index.d.ts`) + const indexDoc = getIndexDoc() + indexDoc && writeFile(savePath, indexDoc, { 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 00000000..859373bf --- /dev/null +++ b/docs/.vuepress/generate-ts/interface.mjs @@ -0,0 +1,330 @@ +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(/(|)|\\/, '|').split('|').map(s => s.trim()) + relativeType = types.map(t => { + switch (t) { + case 'Array＜Number＞': + return 'number[]'; + case 'Array<Object>': + return 'Record[]'; + case 'Color': + case 'color': + return 'string'; + + default: + return t && ['String', 'Number', 'Boolean'].includes(t) ? t.toLowerCase() : t + } + }).join(' | ') + } + + const name = toCamel(baseName) + + //处理defaultVal为字符串的情况 + let defaultVal = (arr[defaultIndex] || '').trim() + if (/true|false|^\d+\.?\d*$/.test(defaultVal) === false) { + defaultVal = defaultVal ? `"${defaultVal}"` : '' + } + + const defaultLine = defaultVal ? ` * @default ${defaultVal}` : '' + 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].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).replace(/^\w/, (s) => s.toUpperCase()) +/** + * 转小驼峰命名风格 + * @param {string} s 字符串 + * @returns + */ +const toCamel = (s) => s.replace(/-(\w)/g, (m0, m1) => m1.toUpperCase()) + +/** + * 获取接口名称的注释说明 + * @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; exportComponent?: 'default'| 'named'}} GenerateInterfaceOptions + */ +/** + * 生成接口 + * @param {string} interfaceName 接口名称 + * @param {TableConfig} data 格式化的表格数据和字段 + * @param {GenerateInterfaceOptions} + * @returns + */ +export const generateInterface = (interfaceName, data, { str, property, exportComponent }) => { + + const { fieldMap, fieldEN, fieldCN, table: interfacePropertyTable, events } = data + + // 获取接口说明 + const interfaceComment = getInterfaceComment(interfaceName, str) + const interfaceCommentContent = interfaceComment ? `/** + * ${interfaceComment} + */` : '' + + + + const interfaceCamel = toUpperCamel(interfaceName) + + const interfaceProps = `${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 ? '' : `${interfaceCommentContent} +export interface ${interfaceProps}{ + ${propsLines.join('\n')} +}` + + + const interfaceOfEvent = getEventName(interfaceCamel) + + const joinProps = [interfaceProps, interfaceOfEvent].filter(Boolean).join(' & ') + + const exportType = exportComponent === 'named' ? `declare const ${interfaceCamel}:` : 'default' + + + let namedDefault = '' + if (exportComponent === 'default') { + /** + * 以组件名的命名方式导出，为default的备份 + */ + namedDefault = ` +export declare const ${interfaceCamel}: import("vue").DefineComponent<${joinProps}>; +` + } + + const exportDoc = !exportComponent ? '' : `${namedDefault} +export ${exportType} import("vue").DefineComponent<${joinProps}>; +` + + if (exportDoc) { + addIndex(` ${interfaceCamel}: typeof import('./${interfaceName}')['${interfaceCamel}']`) + } + + return [propsDoc, eventDoc, exportDoc].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') + const relationInterfaces = generateRelation(name, clearStr) + if (relationInterfaces) { + return relationInterfaces + } + const table = generateInterfaceTable(clearStr) + if (table) { + return generateInterface(name, table, { str: clearStr, exportComponent: 'default' }) + } +} + +const indexList = [] + +/** + * 为索引文件添加导出项 + * @param {string} str 导出项，例如: `export * from './view'` + */ +const addIndex = (str) => { + indexList.push(str) +} + +export const getIndexDoc = () => { + return `/* eslint-disable */ +/* prettier-ignore */ +// @ts-nocheck +// Generated by unplugin-vue-components +// Read more: https://github.com/vuejs/core/pull/3399 +export {} + +declare module 'vue' { + export interface GlobalComponents { +${indexList.join('\n')} + } +} +` +} + +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 00000000..dee9d3b3 --- /dev/null +++ b/docs/.vuepress/generate-ts/relation.mjs @@ -0,0 +1,167 @@ +import relationConfig from './type-relations.json' assert { type: "json" } +import { generateInterface, generateInterfaceTableFields } from "./interface.mjs"; + +/** + * json声明接口的属性 + * @typedef {{name: string;type: string;}} PropertyDefine + */ + +/** + * json声明接口 + * @typedef {{name: string; titleName: string; titleLevel: string; property?:PropertyDefine[]}; exportComponent?: 'default'| 'named'} InterfaceDefine + */ + +/** + * 接口 + * @typedef {{name: string; titleName: string; titleLevel: string; property?:Property; exportComponent?: 'default'| 'named'}} 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, exportComponent }) => ({ + name, + titleLevel, + titleName, + property: property && Array.isArray(property) ? new Property(property) : undefined, + exportComponent, + })) + 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, exportComponent }) => { + const table = getTableContent(str, titleName, titleLevel) + if (!table?.length) return + + const config = generateInterfaceTableFields(table) + if (config) { + return generateInterface(name, config, {str, property, exportComponent}) + } + }).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 00000000..de8f5e92 --- /dev/null +++ b/docs/.vuepress/generate-ts/type-relations.json @@ -0,0 +1,75 @@ +[ + { + "component": "map", + "interfaces": [ + { + "name": "Map", + "titleName": "属性说明", + "titleLevel": "bold", + "exportComponent": "default" + }, + { + "name": "MapMarker", + "titleName": "MapMarker", + "titleLevel": "bold" + }, + { + "name": "MapMarkerLabel", + "titleName": "MapMarkerLabel", + "titleLevel": "bold" + }, + { + "name": "MapMarkerCallOut", + "titleName": "MapMarkerCallOut", + "titleLevel": "bold" + }, + { + "name": "MapPolyLine", + "titleName": "MapPolyLine", + "titleLevel": "bold" + }, + { + "name": "MapPolygon", + "titleName": "MapPolygon", + "titleLevel": "bold" + }, + { + "name": "MapCircle", + "titleName": "MapCircle", + "titleLevel": "bold" + }, + { + "name": "MapControl", + "titleName": "MapControl", + "titleLevel": "bold" + }, + { + "name": "MapPosition", + "titleName": "MapPosition", + "titleLevel": "bold" + }, + { + "name": "MapPoint", + "titleName": "MapPoint", + "titleLevel": "bold" + } + ] + }, + { + "component": "radio", + "interfaces": [ + { + "name": "RadioGroup", + "titleName": "radio-group", + "titleLevel": "h3", + "exportComponent": "named" + }, + { + "name": "Radio", + "titleName": "radio\\n", + "titleLevel": "h3", + "exportComponent": "default" + } + ] + } +] diff --git a/docs/.vuepress/generate-ts/utils.mjs b/docs/.vuepress/generate-ts/utils.mjs new file mode 100644 index 00000000..44a7b5a8 --- /dev/null +++ b/docs/.vuepress/generate-ts/utils.mjs @@ -0,0 +1,98 @@ +/** + * 获取中文字段 + * @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)) +} \ No newline at end of file From 24c8cc43117a39f6bc957de3c804abcda72d0b3e Mon Sep 17 00:00:00 2001 From: weiquanju Date: Tue, 30 Jan 2024 18:37:46 +0800 Subject: [PATCH 03/17] =?UTF-8?q?docs:=20=E6=96=87=E6=A1=A3=E7=BB=B4?= =?UTF-8?q?=E6=8A=A4=EF=BC=8C=E4=B8=BB=E8=A6=81=E6=98=AF=E4=B8=BA=E4=BA=86?= =?UTF-8?q?ts=E7=B1=BB=E5=9E=8B=E5=85=BC=E5=AE=B9=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/component/audio.md | 2 +- docs/component/camera.md | 2 +- docs/component/editor.md | 6 +- docs/component/form.md | 2 +- docs/component/image.md | 4 +- docs/component/input.md | 10 +-- docs/component/map.md | 113 ++++++++++++++++++--------------- docs/component/movable-view.md | 4 +- docs/component/page-meta.md | 4 +- docs/component/picker-view.md | 2 +- docs/component/picker.md | 16 ++--- docs/component/radio.md | 2 +- docs/component/rich-text.md | 2 +- docs/component/scroll-view.md | 2 +- docs/component/slider.md | 4 +- docs/component/swiper.md | 6 +- docs/component/textarea.md | 10 +-- docs/component/video.md | 14 ++-- 18 files changed, 107 insertions(+), 98 deletions(-) diff --git a/docs/component/audio.md b/docs/component/audio.md index 1755b2af..aac1dafd 100644 --- a/docs/component/audio.md +++ b/docs/component/audio.md @@ -24,7 +24,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 6c6eb7d2..8141c930 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/editor.md b/docs/component/editor.md index 0b77ccc9..40c74a29 100644 --- a/docs/component/editor.md +++ b/docs/component/editor.md @@ -30,9 +30,9 @@ editor组件目前只有H5、App的vue页面、微信小程序、百度小程序 | 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 标签和内联样式，不支持**class**和**id** diff --git a/docs/component/form.md b/docs/component/form.md index e2cd53bf..54ed18fe 100644 --- a/docs/component/form.md +++ b/docs/component/form.md @@ -9,7 +9,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 事件| | **示例** [查看演示](https://hellouniapp.dcloud.net.cn/pages/component/form/form) diff --git a/docs/component/image.md b/docs/component/image.md index da4c801d..d79e8732 100644 --- a/docs/component/image.md +++ b/docs/component/image.md @@ -11,8 +11,8 @@ |webp |boolean |false |在系统不支持webp的情况下是否单独启用webp。默认false，只支持网络资源。webp支持详见下面说明 |微信小程序2.9.0 | |show-menu-by-longpress |boolean |false |开启长按图片显示识别小程序码菜单 |微信小程序2.7.0 | |draggable |boolean |true |是否能拖动图片 |H5 3.1.1+、App（iOS15+） | -|@error |HandleEvent| |当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'} | | -|@load |HandleEvent| |当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:'图片高度px', width:'图片宽度px'} |  | +|@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 4ddfac0b..9ad1b020 100644 --- a/docs/component/input.md +++ b/docs/component/input.md @@ -39,11 +39,11 @@ html规范中input不仅是输入框，还有radio、checkbox、时间、日期 |controlled|Boolean|false|是否为受控组件。为 true 时，value 内容会完全受 setData 控制|支付宝小程序 1.9.0+| |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+| +|@input|EventHandle||当键盘输入时，触发input事件，event.detail = {value:string}|差异见下方 Tips| +|@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+| **Tips** diff --git a/docs/component/map.md b/docs/component/map.md index e3b15d88..2197feaa 100644 --- a/docs/component/map.md +++ b/docs/component/map.md @@ -26,15 +26,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、百度小程序、支付宝小程序、京东小程序| +|layer-style|Number|String|1|个性化地图|App-nvue 3.1.0+、微信小程序2.13+| +|markers|MapMarker[]||标记点|| +|polyline|MapPolyLine[]||路线|飞书小程序不支持| +|circles|MapCircle[]||圆|| +|controls|MapControl[]||控件|| +|include-points|MapPoint[]||缩放视野以包含所有给定的坐标点|App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序、京东小程序| |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| |enable-zoom|Boolean|true|是否支持缩放|App-nvue 2.1.5+、微信小程序2.3.0| @@ -46,17 +46,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+| **注意** @@ -71,7 +72,7 @@ 3. 覆盖物支持调整与其它地图元素的压盖关系。 4. 支持marker（小车）平移动画，适用于轨迹回放场景。 -**markers** +**MapMarker** 标记点用于在地图上显示标记的位置 @@ -86,15 +87,15 @@ |alpha|标注的透明度|Number|否|默认1，无透明，范围 0 ~ 1|App-nvue 2.1.5+、微信小程序、支付宝小程序、百度小程序、京东小程序| |width|标注图标宽度|Number|否|默认为图片实际宽度|App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序、京东小程序| |height|标注图标高度|Number|否|默认为图片实际高度|App-nvue 2.1.5+、微信小程序、H5、支付宝小程序、百度小程序、京东小程序| -|callout|自定义标记点上方的气泡窗口|Object|否|支持的属性见下表，可识别换行符。|App-nvue 2.1.5+、微信小程序、支付宝小程序、百度小程序、京东小程序| -|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、百度小程序、京东小程序| +|callout|自定义标记点上方的气泡窗口|MapMarkerCallOut|否|支持的属性见下表，可识别换行符。|App-nvue 2.1.5+、微信小程序、支付宝小程序、百度小程序、京东小程序| +|label|为标记点旁边增加标签|MapMarkerLabel|否|支持的属性见下表，可识别换行符。|App-nvue 2.1.5+、微信小程序、H5、App、百度小程序、支付宝小程序| +|anchor|经纬度在标注图标的锚点，默认底边中点|{x:number,y:number}|否|{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** |属性|说明|类型|平台差异说明| |:-|:-|:-|:-| @@ -111,7 +112,7 @@ |anchorX |横向偏移量，向右为正数|Number|微信小程序2.11.0| |anchorY |纵向偏移量，向下为正数|Number|微信小程序2.11.0| -**marker 上的标签 label** +**MapMarkerLabel** |属性|说明|类型|平台差异说明| |:-|:-|:-|:-| @@ -142,13 +143,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、百度小程序、支付宝小程序、京东小程序| @@ -156,26 +157,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** 在地图上显示圆 @@ -189,18 +191,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** |属性|说明|类型|必填|备注| |:-|:-|:-|:-|:-| @@ -209,6 +211,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) @@ -260,40 +269,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?id=createmapcontext) diff --git a/docs/component/movable-view.md b/docs/component/movable-view.md index 7131f84f..ab917b2a 100644 --- a/docs/component/movable-view.md +++ b/docs/component/movable-view.md @@ -27,8 +27,8 @@ |scale-max|Number|10|定义缩放倍数最大值|| |scale-value|Number|1|定义缩放倍数，取值范围为 0.5 - 10|| |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}，|| 除了基本事件外，movable-view提供了两个特殊事件 diff --git a/docs/component/page-meta.md b/docs/component/page-meta.md index 340fb77c..dbcc95d8 100644 --- a/docs/component/page-meta.md +++ b/docs/component/page-meta.md @@ -29,8 +29,8 @@ |page-style|string|""|否|页面根节点样式，页面根节点是所有页面节点的祖先节点，相当于 HTML 中的 body 节点|微信基础库 2.9.0、H5 2.6.7、App-vue 2.6.7| |root-font-size|string|""|否|页面的根字体大小，页面中的所有 rem 单位，将使用这个字体大小作为参考值，即 1rem 等于这个字体大小|微信基础库 2.9.0、H5 2.6.7、App-vue 2.6.7| |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 79b8b2cc..df3b127d 100644 --- a/docs/component/picker-view.md +++ b/docs/component/picker-view.md @@ -16,7 +16,7 @@ |mask-bottom-style|String|设置蒙层下半部分的样式|仅 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: any}；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 290e948c..16c4c3b5 100644 --- a/docs/component/picker.md +++ b/docs/component/picker.md @@ -10,12 +10,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端。但均不影响功能使用。 @@ -36,11 +36,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|是否禁用（快手小程序不支持）| @@ -67,7 +67,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|是否禁用| | @@ -91,7 +91,7 @@ |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}|| +|@change|EventHandle||value 改变时触发 change 事件，event.detail = {value: any}|| |@cancel|EventHandle||取消选择时触发|| |disabled|Boolean|false|是否禁用| | @@ -119,7 +119,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 900b2e15..e9203ca7 100644 --- a/docs/component/radio.md +++ b/docs/component/radio.md @@ -6,7 +6,7 @@ |属性名|类型|默认值|说明| |:-|:-|:-|:-| -|@change|EventHandle||```` 中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value}| +|@change|EventHandle||```` 中的选中项发生变化时触发 change 事件，event.detail = {value: string}| #### radio diff --git a/docs/component/rich-text.md b/docs/component/rich-text.md index 53d7a706..1ead5432 100644 --- a/docs/component/rich-text.md +++ b/docs/component/rich-text.md @@ -8,7 +8,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 cfc436c6..a5032e40 100644 --- a/docs/component/scroll-view.md +++ b/docs/component/scroll-view.md @@ -27,7 +27,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 04faf501..cefb0418 100644 --- a/docs/component/slider.md +++ b/docs/component/slider.md @@ -16,8 +16,8 @@ |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 041d8696..2078e2ad 100644 --- a/docs/component/swiper.md +++ b/docs/component/swiper.md @@ -31,9 +31,9 @@ |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}|抖音小程序与飞书小程序不支持| change 事件返回 detail 中包含一个 source 字段，表示导致变更的原因，可能值如下： diff --git a/docs/component/textarea.md b/docs/component/textarea.md index 65add336..421ca8ba 100644 --- a/docs/component/textarea.md +++ b/docs/component/textarea.md @@ -29,12 +29,12 @@ |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| +|@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, 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+| +|@linechange|EventHandle||输入框行数变化时调用，event.detail = {height: number, heightRpx: number, lineCount: 0}|抖音小程序、飞书小程序、快手小程序不支持| +|@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+| **confirm-type 有效值** diff --git a/docs/component/video.md b/docs/component/video.md index 1f9de280..50fec271 100644 --- a/docs/component/video.md +++ b/docs/component/video.md @@ -12,7 +12,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| @@ -44,18 +44,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| `