提交 ded14393 编写于 作者: D DCloud_LXH

feat: 支持表格行展开

上级 f1eed65a
......@@ -117,6 +117,26 @@ uni-app x 是一个庞大的工程,它包括uts语言、uvue渲染引擎、uni
|流量(GB)|0.18 |
|售价(元/月)#{colspan=2} |5 |
```
14. 表格支持行展开
md 书写格式
```md
| |原生语言插件 |uts插件|
|:------ |:------- |:--------|
|开发语言 |java/oc |uts|
|开发环境 |Android Studio/XCode |[HBuilderX](https://www.baidu.com)|
->|第一列|第二列 |第三列 |
->|:------ |:-------: |-------: |
->|左对齐 |[居中](https://www.baidu.com)|右对齐|
|打包方式 |外挂aar 等产出物 |编译时生成原生代码|
|js层调用方式 |uni.requireNativePlugin() |普通的js函数/对象,可以直接 import,支持摇树优化|
->|第一列|第二列 |
->|:------ |:------- |
->|第一列内容 |[HBuilderX](https://www.baidu.com)|
|支持项目类型 |uni-app |uni-app和uni-app x|
```
表现为:
![](https://qiniudcdn.qnqcdn.net/web-ext-storage.dcloud.net.cn/doc/subtable.png)
## 文档 Algolia 使用限额
Included Quota:
- Records: 1,000,000
......
......@@ -114,6 +114,9 @@ const config = {
.end()
.plugin('add-base-to-md')
.use(require('./markdown/add-base-to-md'), [{ base }])
.end()
.plugin('subtable')
.use(require('./markdown/markdown-it-subtable').markdownIt, [{ flags: ['->'] }])
}
},
chainWebpack (config, isServer) {
......
function normalizeMD (md) {
if (typeof md === 'string') {
return md
.replace(/(?<!\\)</g, '\\<')
.replace(/]([^(])|(?<!\\)]$/g, '\\]$1')
.replace(/(?<!\\)\|/g, '\\|')
}
return md
}
function resolveSubtable(md, tokens = [], tokenIndexes = [], flags) {
if (tokens.length && tokenIndexes.length) {
tokenIndexes.forEach(tokenIndex => {
if (Array.isArray(tokenIndex) && tokenIndex.length > 2) {
const tableOpenIndex = tokenIndex.shift();
const tableCloseIndex = tokenIndex.pop();
let deleteOffset = 0;
tokenIndex.forEach(subtableIndexes => {
const subtableOpenIndex = subtableIndexes.shift() + deleteOffset;
const subtableColumnCount = (subtableIndexes[0] + deleteOffset - subtableOpenIndex - 2) / 3 - 1;
const subtableCloseIndex = subtableIndexes.pop() + deleteOffset + subtableColumnCount * 3;
const subtableTokens = tokens.slice(subtableOpenIndex - 1, subtableCloseIndex + 1);
// 2 table token 新行开始时固定的 tr_open td_open 数量
// 3 每个 inline 都会伴随一个 td_close、td_open(行最后一列 inline 会伴随 td_close tr_close)
// 1 为 flag ->(标识符) 的列,需要去掉
let tableColumnCount = 0;
for (let i = 0; i < tableCloseIndex; i++) {
const token = tokens[i];
if (i < subtableOpenIndex) {
if (token.type === 'th_open') {
tableColumnCount++;
} else if (token.type === 'thead_close') {
break;
}
}
}
let subtableMD = subtableTokens
.map(token => {
if (token.type === 'inline' && !flags.includes(token.content)) {
return normalizeMD(token.content);
} else if (token.type === 'tr_close') {
return '\n';
}
})
.filter(Boolean);
const subtableLevel = subtableTokens[0].level;
const newTokens = md.parse(`|${subtableMD.join('|')}|`);
newTokens.forEach(token => {
token.content = ''; // 和 children 内容重复
token.level = token.level + subtableLevel;
});
newTokens[0].attrJoin('style', 'overflow-x: visible;margin: auto;');
const childrenTableTokenIndex = subtableOpenIndex - 2;
const subtablePrevTrOpenIndex = childrenTableTokenIndex - tableColumnCount * 3 - 2;
tokens[tableOpenIndex].attrJoin('class', 'have-children-table'); // table
tokens[subtablePrevTrOpenIndex].attrJoin('class', 'have-children-tr'); // table tr_open
// table td_open
const haveChildrenTrTdToken = tokens[subtablePrevTrOpenIndex + 1];
haveChildrenTrTdToken.attrJoin('class', 'have-children-tr-td');
haveChildrenTrTdToken.attrJoin('style', ';text-wrap: nowrap');
tokens[childrenTableTokenIndex].attrJoin('class', 'children-table'); // subtable tr_open
tokens[childrenTableTokenIndex].attrJoin('hidden', ''); // subtable tr_open
tokens[subtableOpenIndex - 1].attrJoin('colspan', tableColumnCount); // subtable td_open
const deleteCount = subtableCloseIndex - subtableOpenIndex + 1;
tokens.splice(subtableOpenIndex, deleteCount, ...newTokens);
deleteOffset = deleteOffset + newTokens.length - deleteCount;
});
}
});
}
}
function process(md, tokens, flags = ['->']) {
const subtableMinTokenCount = 3;
if (
Array.isArray(tokens) &&
tokens.length &&
tokens.some(token => token.content.includes('->') && token.type === 'inline')
) {
const tableOpenTokenIndex = tokens.findIndex(token => token.type === 'table_open');
if (tableOpenTokenIndex > -1) {
/**
* [
* table_open index,
* [] // subtable indexes,
* table_close index
* ]
*/
let tableTokensIndexes = [[]];
let tableIndex = 0;
let subtableIndex = 1;
tokens.forEach((token, index) => {
if (token.type === 'table_open' && tableTokensIndexes[tableIndex].length === 0) {
tableTokensIndexes[tableIndex].push(index);
}
if (tableTokensIndexes[tableIndex] && typeof tableTokensIndexes[tableIndex][0] !== 'undefined') {
if (token.type === 'inline') {
if (flags.find(flag => new RegExp(`^\\s*${flag}\\s*$`).test(token.content))) {
(
tableTokensIndexes[tableIndex][subtableIndex] || (tableTokensIndexes[tableIndex][subtableIndex] = [])
).push(index);
} else if (tokens[index - 2].type === 'tr_open') {
tableTokensIndexes[tableIndex][++subtableIndex] = [];
}
}
}
if (token.type === 'table_close') {
subtableIndex = 1;
tableTokensIndexes[tableIndex].push(index);
tableTokensIndexes[++tableIndex] = [];
}
});
tableTokensIndexes.forEach((subtableTokensIndex, index) => {
tableTokensIndexes[index] = subtableTokensIndex.filter(
i => typeof i === 'number' || (Array.isArray(i) && i.length >= subtableMinTokenCount)
);
});
tableTokensIndexes = tableTokensIndexes.filter(i => i.length);
if (tableTokensIndexes.length) {
resolveSubtable(md, tokens, tableTokensIndexes, flags);
}
}
}
}
module.exports = {
process,
markdownIt: function subTablePlugin(md, { flags = ['->'] } = {}) {
md.core.ruler.after(
'inline',
'subtable',
(state, startLine, endLine, silent) => {
process(md, state.tokens, flags);
},
{
alt: ['paragraph', 'reference'],
}
);
},
};
| |原生语言插件 |uts插件|
|:------ |:------- |:--------|
|开发语言 |java/oc |uts|
|开发环境 |Android Studio/XCode |[HBuilderX](https://www.baidu.com)|
->|第一列|第二列 |第三列 |
->|:------ |:-------: |-------: |
->|左对齐 |[居中](https://www.baidu.com)|右对齐|
|打包方式 |外挂aar 等产出物 |编译时生成原生代码|
|js层调用方式 |uni.requireNativePlugin() |普通的js函数/对象,可以直接 import,支持摇树优化|
->|第一列|第二列 |
->|:------ |:------- |
->|第一列内容 |[HBuilderX](https://www.baidu.com)|
|支持项目类型 |uni-app |uni-app和uni-app x|
# uni-app x 是什么?
> HBuilderX3.9+
......
......@@ -9288,10 +9288,10 @@ vuepress-plugin-zooming@^1.1.8:
dependencies:
zooming "^2.1.1"
vuepress-theme-uni-app-test@^1.4.6:
version "1.4.6"
resolved "https://registry.npmmirror.com/vuepress-theme-uni-app-test/-/vuepress-theme-uni-app-test-1.4.6.tgz#26b73126019c0203e9cd820e2c127e0b9420662e"
integrity sha512-xArLlLQrPvywHHEz7ozBUb7ZT5GZ/quxA0/h2nJ2QZ8wWbDrnhwxDVv+1SUxq0vpVPI20M+r81U2Zz4+1JAV9w==
vuepress-theme-uni-app-test@^1.4.7:
version "1.4.7"
resolved "https://registry.npmmirror.com/vuepress-theme-uni-app-test/-/vuepress-theme-uni-app-test-1.4.7.tgz#566be747f080f551a0f65ac306ccc09dab2ab623"
integrity sha512-O+4FGNetUqEHBpz/EE7KJlwNP3LrU2iz7W1WEq2vHnowPyOxwB2DiSA1aHaHhX1zDAG4n/HILQXhjH48r4uGhw==
dependencies:
"@vuepress/plugin-back-to-top" "^1.9.5"
"@vuepress/theme-default" "^1.8.2"
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册