Initial commit
This commit is contained in:
46
wechat-mini-program/node_modules/mp-html/plugins/search/README.md
generated
vendored
Normal file
46
wechat-mini-program/node_modules/mp-html/plugins/search/README.md
generated
vendored
Normal file
@@ -0,0 +1,46 @@
|
||||
# search
|
||||
功能:关键词搜索
|
||||
大小:*≈1.5KB*
|
||||
支持平台:
|
||||
|
||||
| 微信小程序 | QQ 小程序 | 百度小程序 | 支付宝小程序 | 头条小程序 | uni-app |
|
||||
|:---:|:---:|:---:|:---:|:---:|:---:|
|
||||
| √ | √ | √ | √ | √ | √(nvue 不支持) |
|
||||
|
||||
说明:
|
||||
引入后会在组件实例上挂载一个 *search* 方法,用于关键词搜索
|
||||
|
||||
输入值
|
||||
|
||||
| 参数名 | 类型 | 默认值 | 说明 |
|
||||
|:---:|:---:|:---:|---|
|
||||
| key | String 或 RegExp | - | 要搜索的关键词,支持字符串和正则 |
|
||||
| anchor | Boolean | false | 是否将搜索结果设置为锚点 |
|
||||
| style | String | background-color:yellow | 标记搜索结果的样式 |
|
||||
|
||||
返回值:*Promise*
|
||||
|
||||
| 属性 | 类型 | 说明 |
|
||||
|:---:|:---:|---|
|
||||
| num | Number | 搜索结果数量 |
|
||||
| highlight | Function(i, style='background-color:#FF9632') | 高亮第 i(1 ~ num)个结果,将其样式设置为 style |
|
||||
| jump | Function(i, offset) | 跳转到第 i(1 ~ num)个结果,偏移量为 offset,anchor 为 true 才可用 |
|
||||
|
||||
示例:
|
||||
```javascript
|
||||
function search (key) {
|
||||
// ctx 为组件实例
|
||||
ctx.search(key, true).then(res => {
|
||||
res.highlight(1)
|
||||
res.jump(1, -50) // 高亮第 1 个结果并跳转到该位置,偏移量 -50
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
附加说明:
|
||||
1. 不传入 *key*(或为空)时即可取消搜索,取消所有的高亮,还原到原来的效果
|
||||
2. 进行新的搜索时旧的搜索结果将被还原,旧的结果中的 *highlight* 等方法不再可用
|
||||
3. 调用 *highlight* 方法高亮一个结果时,之前被高亮的结果会被还原,即始终只有一个结果被高亮
|
||||
4. *key* 传入字符串时大小写敏感,如果要忽略大小写可以用正则的 *i*(字符串搜索效率高于正则)
|
||||
5. 设置 *anchor* 为 *true* 会一定程度上降低效率,非必要不要开启
|
||||
6. 暂不支持跨标签搜索,即只有一个文本节点内包含整个关键词才能被搜索到
|
||||
137
wechat-mini-program/node_modules/mp-html/plugins/search/miniprogram/index.js
generated
vendored
Normal file
137
wechat-mini-program/node_modules/mp-html/plugins/search/miniprogram/index.js
generated
vendored
Normal file
@@ -0,0 +1,137 @@
|
||||
/**
|
||||
* @fileoverview search 插件
|
||||
*/
|
||||
|
||||
function Search (vm) {
|
||||
/**
|
||||
* @description 关键词搜索
|
||||
* @param {regexp|string} key 要搜索的关键词
|
||||
* @param {boolean} anchor 是否将搜索结果设置为锚点
|
||||
* @param {string} style 搜索结果的样式
|
||||
*/
|
||||
vm.search = function (key, anchor, style = 'background-color:yellow') {
|
||||
const obj = {}
|
||||
const stack = []
|
||||
const res = [];
|
||||
|
||||
// 遍历搜索
|
||||
(function traversal (nodes, path) {
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
const node = nodes[i]
|
||||
if (node.type === 'text' && key) {
|
||||
const arr = node.text.split(key)
|
||||
const children = []
|
||||
if (arr.length > 1) {
|
||||
// 找到关键词
|
||||
for (let j = 0; j < arr.length; j++) {
|
||||
if (arr[j]) {
|
||||
children.push({
|
||||
type: 'text',
|
||||
text: arr[j]
|
||||
})
|
||||
}
|
||||
if (j !== arr.length - 1) {
|
||||
// 关键词转为一个 span
|
||||
res.push(`${path}[${i}].children[${children.length}].attrs.style`)
|
||||
children.push({
|
||||
name: 'span',
|
||||
attrs: {
|
||||
id: anchor ? 'search' + res.length : undefined, // 用于锚点的 id
|
||||
style
|
||||
},
|
||||
children: [{
|
||||
type: 'text',
|
||||
text: key instanceof RegExp ? key.exec(node.text)[0] : key
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
if (key instanceof RegExp) {
|
||||
key.exec(node.text)
|
||||
}
|
||||
if (anchor) {
|
||||
for (let l = stack.length; l--;) {
|
||||
// 给父组件做标记,将该标签暴露出来
|
||||
if (stack[l].c) {
|
||||
break
|
||||
} else {
|
||||
obj[stack[l].path] = 1
|
||||
}
|
||||
}
|
||||
}
|
||||
obj[`${path}[${i}]`] = {
|
||||
name: 'span',
|
||||
c: anchor ? 1 : undefined,
|
||||
s: 1,
|
||||
children
|
||||
}
|
||||
}
|
||||
} else if (node.s) {
|
||||
let text = ''
|
||||
// 复原上一次的结果
|
||||
for (let k = 0; k < node.children.length; k++) {
|
||||
const child = node.children[k]
|
||||
if (child.text) {
|
||||
text += child.text
|
||||
} else {
|
||||
text += child.children[0].text
|
||||
}
|
||||
}
|
||||
nodes[i] = {
|
||||
type: 'text',
|
||||
text
|
||||
}
|
||||
if (key && (key instanceof RegExp ? key.test(text) : text.includes(key))) {
|
||||
i--
|
||||
} else {
|
||||
obj[`${path}[${i}]`] = nodes[i]
|
||||
}
|
||||
} else if (node.children) {
|
||||
stack.push({
|
||||
path: `${path}[${i}].c`,
|
||||
c: node.c || node.name === 'table'
|
||||
})
|
||||
traversal(node.children, `${path}[${i}].children`)
|
||||
stack.pop()
|
||||
}
|
||||
}
|
||||
})(vm.data.nodes, 'nodes')
|
||||
|
||||
return new Promise(function (resolve) {
|
||||
vm.setData(obj, () => {
|
||||
resolve({
|
||||
num: res.length, // 结果数量
|
||||
/**
|
||||
* @description 高亮某一个结果
|
||||
* @param {number} i 第几个
|
||||
* @param {string} hlstyle 高亮的样式
|
||||
*/
|
||||
highlight (i, hlstyle = 'background-color:#FF9632') {
|
||||
if (i < 1 || i > res.length) return
|
||||
const obj = {}
|
||||
if (this.last) {
|
||||
obj[res[this.last - 1]] = style
|
||||
}
|
||||
this.last = i
|
||||
obj[res[i - 1]] = hlstyle
|
||||
vm.setData(obj)
|
||||
},
|
||||
/**
|
||||
* @description 跳转到搜索结果
|
||||
* @param {number} i 第几个
|
||||
* @param {number} offset 偏移量
|
||||
*/
|
||||
jump: anchor
|
||||
? (i, offset) => {
|
||||
if (i > 0 && i <= res.length) {
|
||||
vm.navigateTo('search' + i, offset)
|
||||
}
|
||||
}
|
||||
: undefined
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Search
|
||||
132
wechat-mini-program/node_modules/mp-html/plugins/search/uni-app/index.js
generated
vendored
Normal file
132
wechat-mini-program/node_modules/mp-html/plugins/search/uni-app/index.js
generated
vendored
Normal file
@@ -0,0 +1,132 @@
|
||||
/**
|
||||
* @fileoverview search 插件
|
||||
*/
|
||||
function Search (vm) {
|
||||
/**
|
||||
* @description 关键词搜索
|
||||
* @param {regexp|string} key 要搜索的关键词
|
||||
* @param {boolean} anchor 是否将搜索结果设置为锚点
|
||||
* @param {string} style 搜索结果的样式
|
||||
*/
|
||||
vm.search = function (key, anchor, style = 'background-color:yellow') {
|
||||
const res = []
|
||||
const stack = [];
|
||||
|
||||
// 遍历搜索
|
||||
(function traversal (nodes) {
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
let node = nodes[i]
|
||||
if (node.type === 'text' && key) {
|
||||
const text = node.text
|
||||
const arr = text.split(key)
|
||||
if (arr.length > 1) {
|
||||
node = {
|
||||
name: 'span',
|
||||
attrs: {},
|
||||
type: 'node',
|
||||
c: 1,
|
||||
s: 1,
|
||||
children: []
|
||||
}
|
||||
vm.$set(nodes, i, node)
|
||||
for (let j = 0; j < arr.length; j++) {
|
||||
if (arr[j]) {
|
||||
node.children.push({
|
||||
type: 'text',
|
||||
text: arr[j]
|
||||
})
|
||||
}
|
||||
if (j !== arr.length - 1) {
|
||||
// 关键词转为一个 span
|
||||
node.children.push({
|
||||
name: 'span',
|
||||
attrs: {
|
||||
id: anchor ? 'search' + (res.length + 1) : undefined, // 用于锚点的 id
|
||||
style: style
|
||||
},
|
||||
// #ifdef VUE3
|
||||
c: 1,
|
||||
// #endif
|
||||
children: [{
|
||||
type: 'text',
|
||||
text: key instanceof RegExp ? key.exec(text)[0] : key
|
||||
}]
|
||||
})
|
||||
res.push(node.children[node.children.length - 1].attrs)
|
||||
}
|
||||
}
|
||||
if (key instanceof RegExp) {
|
||||
key.exec(text)
|
||||
}
|
||||
if (anchor) {
|
||||
for (let l = stack.length; l--;) {
|
||||
if (stack[l].c) {
|
||||
break
|
||||
} else {
|
||||
vm.$set(stack[l], 'c', 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (node.s) {
|
||||
let text = ''
|
||||
// 复原上一次的结果
|
||||
for (let k = 0; k < node.children.length; k++) {
|
||||
const child = node.children[k]
|
||||
if (child.text) {
|
||||
text += child.text
|
||||
} else {
|
||||
text += child.children[0].text
|
||||
}
|
||||
}
|
||||
vm.$set(nodes, i, {
|
||||
type: 'text',
|
||||
text
|
||||
})
|
||||
if (key && (key instanceof RegExp ? key.test(text) : text.includes(key))) {
|
||||
i--
|
||||
}
|
||||
} else if (node.children) {
|
||||
stack.push(node)
|
||||
traversal(node.children)
|
||||
stack.pop()
|
||||
}
|
||||
}
|
||||
})(vm.nodes)
|
||||
|
||||
return new Promise(function (resolve) {
|
||||
setTimeout(() => {
|
||||
resolve({
|
||||
num: res.length, // 结果数量
|
||||
/**
|
||||
* @description 高亮某一个结果
|
||||
* @param {number} i 第几个
|
||||
* @param {string} hlstyle 高亮的样式
|
||||
*/
|
||||
highlight (i, hlstyle = 'background-color:#FF9632') {
|
||||
if (i < 1 || i > res.length) return
|
||||
if (this.last) {
|
||||
res[this.last - 1].style = style
|
||||
}
|
||||
this.last = i
|
||||
res[i - 1].style = hlstyle
|
||||
},
|
||||
/**
|
||||
* @description 跳转到搜索结果
|
||||
* @param {number} i 第几个
|
||||
* @param {number} offset 偏移量
|
||||
*/
|
||||
jump: anchor
|
||||
? (i, offset) => {
|
||||
if (i > 0 && i <= res.length) {
|
||||
vm.navigateTo('search' + i, offset)
|
||||
}
|
||||
}
|
||||
: undefined
|
||||
})
|
||||
}, 200)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Search
|
||||
Reference in New Issue
Block a user