selector2
Version:
Virtual selector component for react.js
222 lines (165 loc) • 9.46 kB
HTML
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>virtual-selector by code-artisan</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
<section class="page-header">
<h1 class="project-name">selector2</h1>
<h2 class="project-tagline">一款基于React.JS编写的简单易用的虚拟选择器组件</h2>
<a href="https://github.com/code-artisan/selector2" class="btn btn-primary">View on GitHub</a>
<a href="https://github.com/code-artisan/selector2/zipball/master" class="btn btn-success">Download .zip</a>
<a href="https://github.com/code-artisan/selector2/tarball/master" class="btn btn-warning">Download .tar.gz</a>
</section>
<section class="main-content">
<article class="markdown-body entry-content" itemprop="mainContentOfPage"><h1><a id="user-content-virtual-selector" class="anchor" href="#selector2" aria-hidden="true"><span class="octicon octicon-link"></span></a>selector2</h1>
<p>virtual-selector的化身（取消了ES7的语法，改为纯ES6），一款简单易用的虚拟选择器组件</p>
<p><a href="https://travis-ci.org/code-artisan/virtual-selector"><img src="https://camo.githubusercontent.com/fc5a860275d346f84f9e225f14c097b4de987e89/68747470733a2f2f7472617669732d63692e6f72672f636f64652d6172746973616e2f7669727475616c2d73656c6563746f722e706e67" alt="Build Status" data-canonical-src="https://travis-ci.org/code-artisan/virtual-selector.png" style="max-width:100%;"></a></p>
<div id="virtual-selector" class="col-xs-12"></div>
<h2><a id="user-content-安装" class="anchor" href="#安装" aria-hidden="true"><span class="octicon octicon-link"></span></a>安装</h2>
<div class="highlight highlight-source-shell"><pre>$ npm install selector2 --save</pre></div>
<h2><a id="user-content-文档" class="anchor" href="#文档" aria-hidden="true"><span class="octicon octicon-link"></span></a>文档</h2>
<p><a href="https://github.com/code-artisan/virtual-selector/wiki">Wiki</a></p>
<h2><a id="user-content-编译" class="anchor" href="#编译" aria-hidden="true"><span class="octicon octicon-link"></span></a>编译</h2>
<p>如果你想修改其源码，你可以在此项目根目录下运行以下命令：</p>
<pre><code>$ npm start
</code></pre>
<p>或者</p>
<pre><code>$ gulp
</code></pre>
<h2><a id="user-content-例子" class="anchor" href="#例子" aria-hidden="true"><span class="octicon octicon-link"></span></a>例子</h2>
<div class="highlight highlight-source-js"><pre><span class="pl-k">import</span> <span class="pl-smi">Selector2</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>Selector2<span class="pl-pds">'</span></span>;
<span class="pl-c">// ...</span>
<span class="pl-smi">React</span>.<span class="pl-en">render</span>(<span class="pl-k"><</span>Selector2 options<span class="pl-k">=</span>{...} multiple<span class="pl-k">=</span>{<span class="pl-c1">true</span>} <span class="pl-k">/</span><span class="pl-k">></span>, <span class="pl-smi">document</span>.<span class="pl-c1">getElementById</span>(<span class="pl-s"><span class="pl-pds">'</span>selector2<span class="pl-pds">'</span></span>));</pre></div>
<h2><a id="user-content-文档-1" class="anchor" href="#文档-1" aria-hidden="true"><span class="octicon octicon-link"></span></a>文档</h2>
<p>请先看<a href="https://github.com/code-artisan/virtual-selector/wiki">Wiki</a>，然后再使用。</p>
<h2><a id="user-content-featrues" class="anchor" href="#featrues" aria-hidden="true"><span class="octicon octicon-link"></span></a>Featrues</h2>
<ul class="task-list">
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" checked="checked" disabled="disabled"> 组件细分</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" checked="checked" disabled="disabled"> 支持皮肤</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" checked="checked" disabled="disabled"> 远程数据获取</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" checked="checked" disabled="disabled"> 键盘操作优化</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" checked="checked" disabled="disabled"> 滚动事件优化</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" checked="checked" disabled="disabled"> 支持禁用指定选项</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" checked="checked" disabled="disabled"> 支持分组</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" checked="checked" disabled="disabled"> 自定义模板</li>
<li class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" checked="checked" disabled="disabled"> 键盘操作代码优化</li>
</ul>
<h2><a id="user-content-贡献" class="anchor" href="#贡献" aria-hidden="true"><span class="octicon octicon-link"></span></a>贡献</h2>
<p>非常欢迎大家贡献代码，共同完善此项目。</p>
<h2><a id="user-content-issues" class="anchor" href="#issues" aria-hidden="true"><span class="octicon octicon-link"></span></a>Issues</h2>
<p>如果在使用过程中遇到问题，请先查阅文档，如确认是该组件的问题，请提供线上案例以方便作者查找原因，然后再提<a href="https://github.com/code-artisan/virtual-selector/issues">issues</a>。</p>
<h2><a id="user-content-license" class="anchor" href="#license" aria-hidden="true"><span class="octicon octicon-link"></span></a>LICENSE</h2>
<p>MIT</p>
<h2><a id="user-content-更新日志" class="anchor" href="#更新日志" aria-hidden="true"><span class="octicon octicon-link"></span></a>更新日志</h2>
<ul class="release-notes">
<li><p>v1.1.7</p>
<ul>
<li>鼠标经过时，将当前选项置为备选状态</li>
<li>添加 <code>shortcuts</code> 选项来决定是否启用键盘操作</li>
</ul></li>
<li><p>v1.1.6</p>
<ul>
<li>添加是否默认展开的选项：<code>autoOpen</code></li>
</ul></li>
<li><p>v1.1.5</p>
<ul>
<li>样式重写（搭配<code>bootstrap</code>使用）</li>
</ul></li>
<li><p>v1.1.4</p>
<ul>
<li>样式调整</li>
<li>某些情况下<code>onChange</code>触发不了优化</li>
</ul></li>
<li><p>v1.1.3</p>
<ul>
<li><a href="https://github.com/code-artisan/virtual-selector/issues/6">#6 某些情况下`onChange`触发不了</a></li>
<li><code>onSelectClose</code> 默认参数改为 <code>true</code></li>
</ul></li>
<li><p>v1.1.2</p>
<ul>
<li>样式调优</li>
<li>解决单页应用下切换页面下拉框不关闭的问题</li>
</ul></li>
<li><p>v1.1.1</p>
<ul>
<li>默认值传入字符串无法默认选中问题修复</li>
<li>样式增加命名空间</li>
</ul></li>
<li><p>v1.1.0</p>
<ul>
<li>支持<code>React</code> 0.14.x</li>
</ul></li>
<li><p>v1.0.9</p>
<ul>
<li>键盘操作代码优化</li>
<li>添加关闭下拉框条件，在某些情况下阻止事件冒泡有问题</li>
</ul></li>
<li><p>v1.0.8</p>
<ul>
<li>滚动事件优化</li>
<li>删除冗余的代码</li>
</ul></li>
<li><p>v1.0.7</p>
<ul>
<li>远程数据获取</li>
<li>修复分组遗留的问题</li>
</ul></li>
<li><p>v1.0.6</p>
<ul>
<li>支持分组</li>
<li>样式纠正：normal --> nowrap</li>
<li>当前选择的元素和上次选择的元素一样时，不触发回掉函数。</li>
<li>Bug fix：<a href="https://github.com/code-artisan/virtual-selector/issues/4">#4 分组上下键切换遇到禁用项不自动跳过</a></li>
<li>依赖变更：loadash --> underscore</li>
</ul></li>
<li><p>v1.0.5</p>
<ul>
<li>Bug fix：<a href="https://github.com/code-artisan/virtual-selector/issues/3">#3 没有检测屏幕边缘情况</a></li>
<li>样式微调</li>
<li>组件细分</li>
</ul></li>
<li><p>v1.0.4</p>
<ul>
<li>添加位置检测</li>
<li>打开下拉列表时自动跳转到最后一个已选项的位置</li>
<li>修改默认边框宽度</li>
</ul></li>
<li><p>v1.0.3</p>
<ul>
<li>添加<code>nullable</code>选项（单选时有效，多选时需要手动控制，因为多选可清除）</li>
<li>Bug fix：clear元素显示逻辑写错</li>
</ul></li>
<li><p>v1.0.2</p>
<ul>
<li>皮肤重新配色</li>
<li>键盘事件优化</li>
<li>自定义模板</li>
<li>支持选项禁用</li>
</ul></li>
<li><p>v1.0.1</p>
<ul>
<li>支付皮肤</li>
<li>Bug fix：搜索不到结果时，删除输入的关键字，依旧没结果 <a href="https://github.com/code-artisan/virtual-selector/issues/2">#2</a></li>
</ul></li>
<li><p>v1.0.0</p>
<ul>
<li>单选</li>
<li>多选</li>
<li>清除所有</li>
<li>移除单个已选</li>
<li>关键字搜索</li>
</ul></li>
</ul>
</article>
<footer class="site-footer">
<span class="site-footer-owner"><a href="https://github.com/code-artisan/virtual-selector">virtual-selector</a> is maintained by <a href="https://github.com/code-artisan">code-artisan</a>.</span>
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span>
</footer>
</section>
<script src="statics/bundle.js"></script>
</body>
</html>