void1005 / temp Goto Github PK

View Code? Open in Web Editor NEW

0.0 1.0 0.0 0 B

一些小需求

temp's Introduction

temp

一些小需求

temp's People

Contributors

Watchers

temp's Issues

增加一个search搜索框

增加 minWidth 和 maxWidth

需求: 增加 include 和 exclude 属性

需求说明:

增加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>

增加导航栏模式

反正菜单栏渲染的也是固定定位, 可以考虑增加一个mode: xxx, 就是加一个导航栏模式, 以btn的坐标处理一下去渲染

是一个比较简单的功能

能想象到的有两种激活菜单的方式:

鼠标点击btn显示菜单
鼠标悬浮上去显示菜单

需求: 增加 defaultProps 属性

需求背景:

因为考虑到某些用户的数据可能是后端传递的

比如咱们节点的text属性, 后端可能给他返回的不是text, 而是title
比如children是子节点, 但是后端可能返回的是items

此时用户要想使用的话, 还得遍历所有树节点, 把title改成text, 把items改成children, 咱们才能识别并渲染

考虑到大部分的初级前端, 并不会遍历树结构, 也是为了提升组件的属性自由度, 打算增加defaultProps属性

功能描述

defaultProps属性与theme同级, 为对象类型, 并且只支持下面5个key的替换

type
text
disabled
callback
children

代码示例

interface ConfigType {
  defaultProps?: {
      type?: string, // 可以不传, 不传的话使用默认key, 就是'type'
      text?: string, // 可以不传, 不传的话使用默认key, 就是'text'
      disabled?: string, // 可以不传, 不传的话使用默认key, 就是'disabled'
      children?: string, // 可以不传, 不传的话使用默认key, 就是'children'
      callback?: string // 可以不传, 不传的话使用默认key, 就是'callback'
  }
}

new RightMenu({
  theme: 'mac',
  defaultProps: {
    type: 'flag',
    text: 'title',
    disabled: 'isDisabled',
    children: 'items',
    callback: 'function'
  }
}, [
  {
    flag: 'li',
    title: '复制(C)',
    function: () => alert('点击了复制')
  },
  {
    flag: 'li',
    title: '粘贴(V)',
    isDisabled: true,
    function: () => alert('点击了复制')
  },
  {
    flag: 'ul',
    title: '发送到',
    items: [
      {
        flag: 'li',
        title: '发送到桌面',
      },
      {
        flag: 'li',
        title: '发送到邮件',
      },
    ]
  },
])

void1005 / temp Goto Github PK

temp's Introduction

temp

temp's People

Contributors

Watchers

temp's Issues

增加一个search搜索框

增加 minWidth 和 maxWidth

需求: 增加 include 和 exclude 属性

需求说明:

代码示例:

增加导航栏模式

需求: 增加 defaultProps 属性

需求背景:

功能描述

代码示例

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent