🤖 增加 include 和 exclude 属性 #25

buuing · 2021-10-19T12:44:35Z

buuing
Oct 19, 2021
Maintainer

需求说明:

增加include和exclude属性, 主要是用于包含或排除掉某些指定的元素标签

以下是排除/包含的定义:

包含: 可以右键点击出现菜单栏

排除: 该元素点击不会出现右键菜单, 但会出现系统的右键菜单

但是需要写一个解析器来区分如下场景的优先级:

..总之就是尽可能的兼容所有的css选择器, 先兼容下面的, 然后后期再继续支持更多的选择器
- .box p
- div.box
- div>h1
后续要兼容的
- .box.block 注意: 两个类样式直接没有空格
- .a+.b 这+号我忘了是干嘛的了

至于到底是排除还是包含, 取决于选择器的优先级

代码示例:

interface ConfigType {
  include?: string[] | RegExp // 包含的元素
  exclude?: string[] | RegExp // 排除的元素
}

<body>
    <div id="app">
        <h1>包含h1</h1>
        <div class="box">
            <h1>排除h1</h1>
            <p><span>包含span</span></p>
        </div>
        <div class="box">
            <h1>排除h1</h1>
            <p><span>包含span</span></p>
        </div>
        <ul>
            <li><span>排除span</span></li>
            <li><span>排除span</span></li>
            <li><span>排除span</span></li>
            <li><span>排除span</span></li>
        </ul>
    </div>
    <script>
        new RightMenu({
            el: '#app', // 右键菜单是直接绑定在 div#app 上面的
            include: [
                '.box span', // 但是.box下的span标签包含
                'div>h1' // 包含div下的h1
            ],
            exclude: [
                'span', // 排除掉所有的span标签
                'div.box>h1' // 但是排除掉.box下的h1
            ]
        }, [
            { type: 'li', text: '哈哈哈' }
        ])
    </script>
</body>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🤖 增加 include 和 exclude 属性 #25

{{title}}

Replies: 0 comments

Select a reply

🤖 增加 include 和 exclude 属性 #25

buuing Oct 19, 2021 Maintainer

需求说明:

代码示例:

Replies: 0 comments

buuing
Oct 19, 2021
Maintainer