组件演示

[{"title":"添加新标签","id":"components-tag-demo-add","tags":[],"filepath":"site/components/tag/demo/add.md","directory":"components/tag/demo","filename":"add","meta":{"title":"添加新标签","description":"\n<p>基本使用。</p>\n","order":"1","filepath":"site/components/tag/demo/add.md","filename":"add","directory":"components/tag/demo","id":"components-tag-demo-add","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Item = _uxcore.Tag.Item;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n list: ['用户体验', '精品打造', '精益求精']\n };\n _this.onAdd = _this.onAdd.bind(_this);\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'onAdd',\n value: function onAdd(value) {\n this.setState({\n list: this.state.list.concat([value])\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var me = this;\n return React.createElement(\n _uxcore.Tag,\n { onAdd: this.onAdd },\n this.state.list.map(function (item, index) {\n return React.createElement(\n Item,\n { key: index },\n item\n );\n })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-tag-demo-add'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Tag } from 'uxcore';\nconst { Item } = Tag;\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n list: ['用户体验', '精品打造', '精益求精'],\n };\n this.onAdd = this.onAdd.bind(this);\n }\n\n onAdd(value) {\n this.setState({\n list: this.state.list.concat([value]),\n });\n }\n\n render() {\n const me = this;\n return (\n &lt;Tag onAdd={this.onAdd}&gt;\n {this.state.list.map((item, index) =&gt; (\n &lt;Item key={index}&gt;{item}&lt;/Item&gt;\n ))}\n &lt;/Tag&gt;\n );\n }\n}\n\nReactDOM.render(\n &lt;Demo /&gt;\n, document.getElementById('components-tag-demo-add'));</code></pre></div>"},"status":"public","toc":""},{"title":"点赞","id":"components-tag-demo-like","tags":[],"filepath":"site/components/tag/demo/like.md","directory":"components/tag/demo","filename":"like","meta":{"title":"点赞","description":"\n","order":"2","filepath":"site/components/tag/demo/like.md","filename":"like","directory":"components/tag/demo","id":"components-tag-demo-like","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Item = _uxcore.Tag.Item;\n\n\nvar tagData = [{\n tag: 'owner创建0',\n count: 0,\n canAddCount: true,\n createByOwner: true\n}, {\n tag: 'owner创建1',\n count: 1,\n canAddCount: true,\n createByOwner: true\n}];\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n data: tagData\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'onLike',\n value: function onLike(tag) {\n var me = this;\n var data = me.state.data;\n\n data = data.map(function (item) {\n if (item.tag === tag) {\n item.count += 1;\n }\n return item;\n });\n\n me.setState({\n data: data\n });\n\n console.log('赞标签: ', tag);\n }\n }, {\n key: 'render',\n value: function render() {\n var me = this;\n\n var props = {\n className: 'tag-classname',\n addTags: false,\n locale: 'zh-cn'\n };\n\n return React.createElement(\n 'div',\n { className: 'demo' },\n React.createElement(\n _uxcore.Tag,\n props,\n me.state.data.map(function (item, index) {\n return React.createElement(\n Item,\n {\n key: 'uxcore-tag-item-' + index,\n className: item.createByOwner ? 'create-by-owner' : '',\n tag: item.tag,\n count: item.count,\n canAddCount: item.canAddCount,\n maxDisplayCount: 99,\n onAddCount: me.onLike.bind(me),\n locale: 'zh-cn'\n },\n item.tag\n );\n })\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-tag-demo-like'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Tag } from 'uxcore';\nconst { Item } = Tag;\n\nconst tagData = [\n {\n tag: 'owner创建0',\n count: 0,\n canAddCount: true,\n createByOwner: true,\n },\n {\n tag: 'owner创建1',\n count: 1,\n canAddCount: true,\n createByOwner: true,\n },\n];\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: tagData,\n };\n }\n\n onLike(tag) {\n const me = this;\n let data = me.state.data;\n\n data = data.map((item) =&gt; {\n if (item.tag === tag) {\n item.count += 1;\n }\n return item;\n });\n\n me.setState({\n data,\n });\n\n console.log('赞标签: ', tag);\n }\n\n render() {\n const me = this;\n\n const props = {\n className: 'tag-classname',\n addTags: false,\n locale: 'zh-cn',\n };\n\n return (\n &lt;div className=\"demo\"&gt;\n\n &lt;Tag {...props}&gt;\n {me.state.data.map((item, index) =&gt; (\n &lt;Item\n key={`uxcore-tag-item-${index}`}\n className={item.createByOwner ? 'create-by-owner' : ''}\n tag={item.tag}\n count={item.count}\n canAddCount={item.canAddCount}\n maxDisplayCount={99}\n onAddCount={me.onLike.bind(me)}\n locale=\"zh-cn\"\n &gt;\n {item.tag}\n &lt;/Item&gt;\n ))}\n &lt;/Tag&gt;\n &lt;/div&gt;\n );\n }\n}\n\nReactDOM.render(\n &lt;Demo /&gt;\n, document.getElementById('components-tag-demo-like'));</code></pre></div>"},"status":"public","toc":""},{"title":"实际场景","id":"components-tag-demo-complex","tags":[],"filepath":"site/components/tag/demo/complex.md","directory":"components/tag/demo","filename":"complex","meta":{"title":"实际场景","description":"\n","order":"3","filepath":"site/components/tag/demo/complex.md","filename":"complex","directory":"components/tag/demo","id":"components-tag-demo-complex","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Item = _uxcore.Tag.Item;\n\n\nvar tagData = [{\n tag: 'owner创建0',\n count: 0,\n canAddCount: true,\n createByOwner: true\n}, {\n tag: 'owner创建1',\n count: 1,\n canAddCount: true,\n createByOwner: true\n}, {\n tag: 'owner创建100',\n count: 100,\n canAddCount: true,\n createByOwner: true\n}, {\n tag: '自己创建0',\n count: 0,\n canAddCount: true,\n createByOwner: false\n}, {\n tag: '自己创建1',\n count: 1,\n canAddCount: true,\n createByOwner: false\n}, {\n tag: '自己创建100',\n count: 100,\n canAddCount: true,\n createByOwner: false\n}, {\n tag: '他人创建0',\n count: 0,\n canAddCount: true,\n createByOwner: false\n}, {\n tag: '他人创建1',\n count: 1,\n canAddCount: true,\n createByOwner: false\n}, {\n tag: '他人创建100',\n count: 100,\n canAddCount: true,\n createByOwner: false\n}, {\n tag: '测试一下',\n count: 5,\n canAddCount: true,\n createByOwner: false\n}, {\n tag: '点过赞',\n count: 100,\n canAddCount: false,\n createByOwner: false\n}, {\n tag: '点过赞2',\n count: 2,\n canAddCount: false,\n createByOwner: false\n}];\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n data: tagData\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'onClickTag',\n value: function onClickTag(tag) {\n console.log('点击标签: ', tag);\n }\n }, {\n key: 'onAdd',\n value: function onAdd(tag) {\n var me = this;\n var data = me.state.data;\n\n var item = {\n tag: tag,\n count: 0,\n canAddCount: false,\n createByOwner: false\n };\n\n data.push(item);\n\n me.setState({\n data: data\n });\n\n console.log('\\u6DFB\\u52A0\\u6807\\u7B7E: ' + tag);\n }\n }, {\n key: 'onLike',\n value: function onLike(tag) {\n var me = this;\n var data = me.state.data;\n\n data = data.map(function (item) {\n if (item.tag === tag) {\n item.count += 1;\n item.canAddCount = false;\n }\n return item;\n });\n\n me.setState({\n data: data\n });\n\n console.log('赞标签: ', tag);\n }\n }, {\n key: 'onDelete',\n value: function onDelete(tag, cb) {\n var me = this;\n var data = me.state.data;\n\n data = data.filter(function (item) {\n return item.tag !== tag;\n });\n\n if (cb) {\n cb();\n }\n me.setState({\n data: data\n });\n\n console.log('\\u5220\\u9664\\u6807\\u7B7E: ' + tag);\n }\n }, {\n key: 'render',\n value: function render() {\n var me = this;\n\n var props = {\n className: 'tag-classname',\n addTags: true,\n onAdd: me.onAdd.bind(me),\n locale: 'zh-cn'\n // locale: 'en-us'\n };\n\n return React.createElement(\n 'div',\n { className: 'demo' },\n React.createElement(\n _uxcore.Tag,\n props,\n me.state.data.map(function (item, index) {\n return React.createElement(\n Item,\n {\n key: 'uxcore-tag-item-' + index,\n className: item.createByOwner ? 'create-by-owner' : '',\n tag: item.tag,\n count: item.count,\n canAddCount: item.canAddCount,\n canDelete: true,\n onClick: me.onClickTag.bind(me),\n maxDisplayCount: 99,\n onAddCount: me.onLike.bind(me),\n onDelete: me.onDelete.bind(me),\n confirmDeleteText: '\\u786E\\u5B9A\\u5220\\u9664\\u8BE5\\u6807\\u7B7E\\u5417?',\n locale: 'zh-cn'\n },\n item.tag\n );\n })\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-tag-demo-complex'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Tag } from 'uxcore';\nconst { Item } = Tag;\n\nconst tagData = [\n {\n tag: 'owner创建0',\n count: 0,\n canAddCount: true,\n createByOwner: true,\n },\n {\n tag: 'owner创建1',\n count: 1,\n canAddCount: true,\n createByOwner: true,\n },\n {\n tag: 'owner创建100',\n count: 100,\n canAddCount: true,\n createByOwner: true,\n },\n {\n tag: '自己创建0',\n count: 0,\n canAddCount: true,\n createByOwner: false,\n },\n {\n tag: '自己创建1',\n count: 1,\n canAddCount: true,\n createByOwner: false,\n },\n {\n tag: '自己创建100',\n count: 100,\n canAddCount: true,\n createByOwner: false,\n },\n {\n tag: '他人创建0',\n count: 0,\n canAddCount: true,\n createByOwner: false,\n },\n {\n tag: '他人创建1',\n count: 1,\n canAddCount: true,\n createByOwner: false,\n },\n {\n tag: '他人创建100',\n count: 100,\n canAddCount: true,\n createByOwner: false,\n },\n {\n tag: '测试一下',\n count: 5,\n canAddCount: true,\n createByOwner: false,\n },\n {\n tag: '点过赞',\n count: 100,\n canAddCount: false,\n createByOwner: false,\n },\n {\n tag: '点过赞2',\n count: 2,\n canAddCount: false,\n createByOwner: false,\n },\n];\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: tagData,\n };\n }\n\n onClickTag(tag) {\n console.log('点击标签: ', tag);\n }\n onAdd(tag) {\n const me = this;\n const data = me.state.data;\n\n\n const item = {\n tag,\n count: 0,\n canAddCount: false,\n createByOwner: false,\n };\n\n data.push(item);\n\n me.setState({\n data,\n });\n\n console.log(`添加标签: ${tag}`);\n }\n onLike(tag) {\n const me = this;\n let data = me.state.data;\n\n data = data.map((item) =&gt; {\n if (item.tag === tag) {\n item.count += 1;\n item.canAddCount = false;\n }\n return item;\n });\n\n me.setState({\n data,\n });\n\n console.log('赞标签: ', tag);\n }\n onDelete(tag, cb) {\n const me = this;\n let data = me.state.data;\n\n data = data.filter(item =&gt; item.tag !== tag);\n\n if (cb) {\n cb();\n }\n me.setState({\n data,\n });\n\n console.log(`删除标签: ${tag}`);\n }\n\n render() {\n const me = this;\n\n const props = {\n className: 'tag-classname',\n addTags: true,\n onAdd: me.onAdd.bind(me),\n locale: 'zh-cn',\n // locale: 'en-us'\n };\n\n return (\n &lt;div className=\"demo\"&gt;\n\n &lt;Tag {...props}&gt;\n {me.state.data.map((item, index) =&gt; (\n &lt;Item\n key={`uxcore-tag-item-${index}`}\n className={item.createByOwner ? 'create-by-owner' : ''}\n tag={item.tag}\n count={item.count}\n canAddCount={item.canAddCount}\n canDelete\n onClick={me.onClickTag.bind(me)}\n maxDisplayCount={99}\n onAddCount={me.onLike.bind(me)}\n onDelete={me.onDelete.bind(me)}\n confirmDeleteText=\"确定删除该标签吗?\"\n locale=\"zh-cn\"\n &gt;\n {item.tag}\n &lt;/Item&gt;\n ))}\n &lt;/Tag&gt;\n &lt;/div&gt;\n );\n }\n}\n\nReactDOM.render(\n &lt;Demo /&gt;\n, document.getElementById('components-tag-demo-complex'));</code></pre></div>"},"status":"public","toc":""},{"title":"展示型","id":"components-tag-demo-show","tags":[],"filepath":"site/components/tag/demo/show.md","directory":"components/tag/demo","filename":"show","meta":{"title":"展示型","description":"\n<p>用于展示的 tag。</p>\n","order":"4","filepath":"site/components/tag/demo/show.md","filename":"show","directory":"components/tag/demo","id":"components-tag-demo-show","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar Item = _uxcore.Tag.Item;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n showData: ['关键词：阿里', '关键词：百度']\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'onDelete2',\n value: function onDelete2(tag, cb) {\n var showData = this.state.showData.filter(function (item) {\n return item !== tag;\n });\n this.setState({\n showData: showData\n }, function () {\n if (cb) {\n cb();\n }\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var me = this;\n return React.createElement(\n 'div',\n null,\n React.createElement(\n 'h2',\n { style: { margin: '8px 0' } },\n '\\u5C55\\u793A\\u578B TAG \\uFF08\\u53EA\\u8BFB\\uFF09'\n ),\n React.createElement(\n _uxcore.Tag,\n { addTags: false },\n React.createElement(\n Item,\n { type: 'show' },\n 'Top50 \\u5165\\u804C\\u5B66\\u6821'\n ),\n React.createElement(\n Item,\n { type: 'success' },\n '\\u79EF\\u6781\\u63D0\\u9192'\n ),\n React.createElement(\n Item,\n { type: 'danger' },\n '\\u8B66\\u793A\\u63D0\\u9192'\n ),\n React.createElement(\n Item,\n { type: 'info' },\n '\\u5E38\\u89C4\\u63D0\\u9192'\n ),\n React.createElement(\n Item,\n { type: 'warning' },\n '\\u6CE8\\u610F'\n )\n ),\n React.createElement(\n 'h2',\n { style: { margin: '8px 0' } },\n '\\u5C55\\u793A\\u578B TAG \\uFF08\\u53EF\\u5220\\u9664\\uFF09'\n ),\n React.createElement(\n _uxcore.Tag,\n { addTags: false },\n me.state.showData.map(function (item) {\n return React.createElement(\n Item,\n { type: 'show', canDelete: true, key: item, tag: item, onDelete: me.onDelete2.bind(me) },\n item\n );\n })\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-tag-demo-show'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Tag } from 'uxcore';\nconst { Item } = Tag;\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n showData: ['关键词：阿里', '关键词：百度'],\n };\n }\n\n onDelete2(tag, cb) {\n const showData = this.state.showData.filter(item =&gt; item !== tag);\n this.setState({\n showData,\n }, () =&gt; {\n if (cb) {\n cb();\n }\n });\n }\n\n render() {\n const me = this;\n return (\n &lt;div&gt;\n &lt;h2 style={{ margin: '8px 0' }}&gt;展示型 TAG （只读）&lt;/h2&gt;\n &lt;Tag addTags={false}&gt;\n &lt;Item type=\"show\"&gt;Top50 入职学校&lt;/Item&gt;\n &lt;Item type=\"success\"&gt;积极提醒&lt;/Item&gt;\n &lt;Item type=\"danger\"&gt;警示提醒&lt;/Item&gt;\n &lt;Item type=\"info\"&gt;常规提醒&lt;/Item&gt;\n &lt;Item type=\"warning\"&gt;注意&lt;/Item&gt;\n &lt;/Tag&gt;\n &lt;h2 style={{ margin: '8px 0' }}&gt;展示型 TAG （可删除）&lt;/h2&gt;\n &lt;Tag addTags={false}&gt;\n {me.state.showData.map(item =&gt; (\n &lt;Item type=\"show\" canDelete key={item} tag={item} onDelete={me.onDelete2.bind(me)}&gt;{item}&lt;/Item&gt;\n ))}\n &lt;/Tag&gt;\n &lt;/div&gt;\n );\n }\n}\n\nReactDOM.render(\n &lt;Demo /&gt;\n, document.getElementById('components-tag-demo-show'));</code></pre></div>"},"status":"public","toc":""}]
添加新标签

基本使用。

import { Tag } from 'uxcore';
const { Item } = Tag;

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      list: ['用户体验', '精品打造', '精益求精'],
    };
    this.onAdd = this.onAdd.bind(this);
  }

  onAdd(value) {
    this.setState({
      list: this.state.list.concat([value]),
    });
  }

  render() {
    const me = this;
    return (
      <Tag onAdd={this.onAdd}>
        {this.state.list.map((item, index) => (
          <Item key={index}>{item}</Item>
                ))}
      </Tag>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-tag-demo-add'));
点赞
import { Tag } from 'uxcore';
const { Item } = Tag;

const tagData = [
  {
    tag: 'owner创建0',
    count: 0,
    canAddCount: true,
    createByOwner: true,
  },
  {
    tag: 'owner创建1',
    count: 1,
    canAddCount: true,
    createByOwner: true,
  },
];

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      data: tagData,
    };
  }

  onLike(tag) {
    const me = this;
    let data = me.state.data;

    data = data.map((item) => {
      if (item.tag === tag) {
        item.count += 1;
      }
      return item;
    });

    me.setState({
      data,
    });

    console.log('赞标签: ', tag);
  }

  render() {
    const me = this;

    const props = {
      className: 'tag-classname',
      addTags: false,
      locale: 'zh-cn',
    };

    return (
      <div className="demo">

        <Tag {...props}>
          {me.state.data.map((item, index) => (
            <Item
              key={`uxcore-tag-item-${index}`}
              className={item.createByOwner ? 'create-by-owner' : ''}
              tag={item.tag}
              count={item.count}
              canAddCount={item.canAddCount}
              maxDisplayCount={99}
              onAddCount={me.onLike.bind(me)}
              locale="zh-cn"
            >
              {item.tag}
            </Item>
          ))}
        </Tag>
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-tag-demo-like'));
实际场景
import { Tag } from 'uxcore';
const { Item } = Tag;

const tagData = [
  {
    tag: 'owner创建0',
    count: 0,
    canAddCount: true,
    createByOwner: true,
  },
  {
    tag: 'owner创建1',
    count: 1,
    canAddCount: true,
    createByOwner: true,
  },
  {
    tag: 'owner创建100',
    count: 100,
    canAddCount: true,
    createByOwner: true,
  },
  {
    tag: '自己创建0',
    count: 0,
    canAddCount: true,
    createByOwner: false,
  },
  {
    tag: '自己创建1',
    count: 1,
    canAddCount: true,
    createByOwner: false,
  },
  {
    tag: '自己创建100',
    count: 100,
    canAddCount: true,
    createByOwner: false,
  },
  {
    tag: '他人创建0',
    count: 0,
    canAddCount: true,
    createByOwner: false,
  },
  {
    tag: '他人创建1',
    count: 1,
    canAddCount: true,
    createByOwner: false,
  },
  {
    tag: '他人创建100',
    count: 100,
    canAddCount: true,
    createByOwner: false,
  },
  {
    tag: '测试一下',
    count: 5,
    canAddCount: true,
    createByOwner: false,
  },
  {
    tag: '点过赞',
    count: 100,
    canAddCount: false,
    createByOwner: false,
  },
  {
    tag: '点过赞2',
    count: 2,
    canAddCount: false,
    createByOwner: false,
  },
];

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      data: tagData,
    };
  }

  onClickTag(tag) {
    console.log('点击标签: ', tag);
  }
  onAdd(tag) {
    const me = this;
    const data = me.state.data;


    const item = {
      tag,
      count: 0,
      canAddCount: false,
      createByOwner: false,
    };

    data.push(item);

    me.setState({
      data,
    });

    console.log(`添加标签: ${tag}`);
  }
  onLike(tag) {
    const me = this;
    let data = me.state.data;

    data = data.map((item) => {
      if (item.tag === tag) {
        item.count += 1;
        item.canAddCount = false;
      }
      return item;
    });

    me.setState({
      data,
    });

    console.log('赞标签: ', tag);
  }
  onDelete(tag, cb) {
    const me = this;
    let data = me.state.data;

    data = data.filter(item => item.tag !== tag);

    if (cb) {
      cb();
    }
    me.setState({
      data,
    });

    console.log(`删除标签: ${tag}`);
  }

  render() {
    const me = this;

    const props = {
      className: 'tag-classname',
      addTags: true,
      onAdd: me.onAdd.bind(me),
      locale: 'zh-cn',
      // locale: 'en-us'
    };

    return (
      <div className="demo">

        <Tag {...props}>
          {me.state.data.map((item, index) => (
            <Item
              key={`uxcore-tag-item-${index}`}
              className={item.createByOwner ? 'create-by-owner' : ''}
              tag={item.tag}
              count={item.count}
              canAddCount={item.canAddCount}
              canDelete
              onClick={me.onClickTag.bind(me)}
              maxDisplayCount={99}
              onAddCount={me.onLike.bind(me)}
              onDelete={me.onDelete.bind(me)}
              confirmDeleteText="确定删除该标签吗?"
              locale="zh-cn"
            >
              {item.tag}
            </Item>
          ))}
        </Tag>
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-tag-demo-complex'));
展示型

用于展示的 tag。

import { Tag } from 'uxcore';
const { Item } = Tag;

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      showData: ['关键词：阿里', '关键词：百度'],
    };
  }

  onDelete2(tag, cb) {
    const showData = this.state.showData.filter(item => item !== tag);
    this.setState({
      showData,
    }, () => {
      if (cb) {
        cb();
      }
    });
  }

  render() {
    const me = this;
    return (
      <div>
        <h2 style={{ margin: '8px 0' }}>展示型 TAG （只读）</h2>
        <Tag addTags={false}>
          <Item type="show">Top50 入职学校</Item>
          <Item type="success">积极提醒</Item>
          <Item type="danger">警示提醒</Item>
          <Item type="info">常规提醒</Item>
          <Item type="warning">注意</Item>
        </Tag>
        <h2 style={{ margin: '8px 0' }}>展示型 TAG （可删除）</h2>
        <Tag addTags={false}>
          {me.state.showData.map(item => (
            <Item type="show" canDelete key={item} tag={item} onDelete={me.onDelete2.bind(me)}>{item}</Item>
                ))}
        </Tag>
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-tag-demo-show'));

Props

Tag

配置项 类型 必填 默认值 功能/备注
className string optional '' 额外的className
addTags boolean optional true 是否可以新增tag
onAdd(tagName) function optional noop 新增tag的回调,tagName为新增的标签名
locale string optional 'zh-cn' 语言，另可选'en-us', 'pl-pl'

TagItem

通过 Tag.Item 取得。

配置项 类型 必填 默认值 功能/备注
className string optional '' 额外的className
tag string require '' tag的值
type string optional 枚举值 show, success, warning, info, danger
count number optional 0 标签后面的数字
canAddCount boolean optional false 是否可以增加数字
canDelete boolean optional false 是否可以删除标签
onClick(tagName) function optional noop 点标签回调
maxDisplayCount number optional 99 最大显示数字
onAddCount(tagName) function optional noop 点击增加数字的加号回调
onDelete(tagName, cb) function optional noop 点击删除icon回调 注意手动调用cb，否则弹窗不会消失
confirmDeleteText string optional '' 确认删除文案，如果不填则直接触发onDelete回调