add tag
tangjinzhou
parent
5d8c1575cb
commit
ac1da5d0da
|
|
@ -17,3 +17,5 @@ export { default as Pagination } from './pagination'
|
||||||
export { default as Row } from './grid/Row'
|
export { default as Row } from './grid/Row'
|
||||||
|
|
||||||
export { default as Col } from './grid/Col'
|
export { default as Col } from './grid/Col'
|
||||||
|
|
||||||
|
export { default as Tag } from './tag'
|
||||||
|
|
|
||||||
|
|
@ -3,3 +3,4 @@ import './icon/style'
|
||||||
import './radio/style'
|
import './radio/style'
|
||||||
import './checkbox/style'
|
import './checkbox/style'
|
||||||
import './grid/style'
|
import './grid/style'
|
||||||
|
import './tag/style'
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
<template>
|
||||||
|
<div :class="classes" @click="handleClick">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'CheckableTag',
|
||||||
|
model: {
|
||||||
|
prop: 'checked',
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
prefixCls: {
|
||||||
|
default: 'ant-tag',
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
checked: Boolean,
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
classes () {
|
||||||
|
const { prefixCls, checked } = this
|
||||||
|
return {
|
||||||
|
[`${prefixCls}`]: true,
|
||||||
|
[`${prefixCls}-checkable`]: true,
|
||||||
|
[`${prefixCls}-checkable-checked`]: checked,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleClick () {
|
||||||
|
const { checked } = this
|
||||||
|
this.$emit('input', !checked)
|
||||||
|
this.$emit('change', !checked)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
<template>
|
||||||
|
<transition
|
||||||
|
:name="`${prefixCls}-zoom`"
|
||||||
|
appear
|
||||||
|
@after-leave="animationEnd"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-if="!closed"
|
||||||
|
:class="classes"
|
||||||
|
:style="tagStyle"
|
||||||
|
>
|
||||||
|
<span :class="`${prefixCls}-text`">
|
||||||
|
<slot></slot>
|
||||||
|
</span>
|
||||||
|
<Icon v-if="closable" type="cross" @click="close" />
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import Icon from '../icon'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Tag',
|
||||||
|
components: { Icon },
|
||||||
|
props: {
|
||||||
|
prefixCls: {
|
||||||
|
default: 'ant-tag',
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
color: String,
|
||||||
|
closable: Boolean,
|
||||||
|
styles: {
|
||||||
|
default: () => ({}),
|
||||||
|
type: Object,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
const isPresetColor = (color) => {
|
||||||
|
if (!color) { return false }
|
||||||
|
return /^(pink|red|yellow|orange|cyan|green|blue|purple)(-inverse)?$/.test(color)
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
closed: false,
|
||||||
|
isPresetColor: isPresetColor(this.color),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
classes () {
|
||||||
|
const { prefixCls, color, isPresetColor } = this
|
||||||
|
return {
|
||||||
|
[`${prefixCls}`]: true,
|
||||||
|
[`${prefixCls}-${color}`]: isPresetColor,
|
||||||
|
[`${prefixCls}-has-color`]: (color && !isPresetColor),
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tagStyle () {
|
||||||
|
const { color, styles, isPresetColor } = this
|
||||||
|
return {
|
||||||
|
backgroundColor: (color && !isPresetColor) ? color : null,
|
||||||
|
...styles,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
animationEnd () {
|
||||||
|
this.$emit('after-close')
|
||||||
|
},
|
||||||
|
close (e) {
|
||||||
|
this.$emit('close', e)
|
||||||
|
if (e.defaultPrevented) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.closed = true
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<Tag>Tag 1</Tag>
|
||||||
|
<Tag><a href="https://github.com/vueComponent/ant-design">Link</a></Tag>
|
||||||
|
<Tag closable @close="log">Tag 2</Tag>
|
||||||
|
<Tag closable @close="preventDefault">Prevent Default</Tag>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { Tag } from 'antd'
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
log (e) {
|
||||||
|
console.log(e)
|
||||||
|
},
|
||||||
|
preventDefault (e) {
|
||||||
|
e.preventDefault()
|
||||||
|
console.log('Clicked! But prevent default.')
|
||||||
|
},
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
Tag,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<CheckableTag v-model="checked1" @change="handleChange">Tag1</CheckableTag>
|
||||||
|
<CheckableTag v-model="checked2" @change="handleChange">Tag2</CheckableTag>
|
||||||
|
<CheckableTag v-model="checked3" @change="handleChange">Tag3</CheckableTag>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { Tag } from 'antd'
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
checked1: false,
|
||||||
|
checked2: false,
|
||||||
|
checked3: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleChange (checked) {
|
||||||
|
console.log(checked)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
Tag,
|
||||||
|
CheckableTag: Tag.CheckableTag,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h4 style="margin-bottom: 16px">Presets:</h4>
|
||||||
|
<div>
|
||||||
|
<Tag color="pink">pink</Tag>
|
||||||
|
<Tag color="red">red</Tag>
|
||||||
|
<Tag color="orange">orange</Tag>
|
||||||
|
<Tag color="green">green</Tag>
|
||||||
|
<Tag color="cyan">cyan</Tag>
|
||||||
|
<Tag color="blue">blue</Tag>
|
||||||
|
<Tag color="purple">purple</Tag>
|
||||||
|
</div>
|
||||||
|
<h4 style="margin: '16px 0'">Custom:</h4>
|
||||||
|
<div>
|
||||||
|
<Tag color="#f50">#f50</Tag>
|
||||||
|
<Tag color="#2db7f5">#2db7f5</Tag>
|
||||||
|
<Tag color="#87d068">#87d068</Tag>
|
||||||
|
<Tag color="#108ee9">#108ee9</Tag>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { Tag } from 'antd'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Tag,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<template v-for="(tag, index) in tags">
|
||||||
|
<ToolTip v-if="tag.length > 20" :key="tag" :title="tag">
|
||||||
|
<Tag :key="tag" :closable="index !== 0" @after-close="() => handleClose(tag)">
|
||||||
|
{{`${tag.slice(0, 20)}...`}}
|
||||||
|
</Tag>
|
||||||
|
</ToolTip>
|
||||||
|
<Tag v-else :key="tag" :closable="index !== 0" @after-close="() => handleClose(tag)">
|
||||||
|
{{tag}}
|
||||||
|
</Tag>
|
||||||
|
</template>
|
||||||
|
<Input
|
||||||
|
v-if="inputVisible"
|
||||||
|
ref="input"
|
||||||
|
type="text"
|
||||||
|
size="small"
|
||||||
|
:style="{ width: 78 }"
|
||||||
|
:value="inputValue"
|
||||||
|
@change="handleInputChange"
|
||||||
|
@blur="handleInputConfirm"
|
||||||
|
@keyup.enter="handleInputConfirm"
|
||||||
|
/>
|
||||||
|
<AntButton v-else size="small" type="dashed" @click="showInput">+ New Tag</AntButton>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { Tag, Button, ToolTip } from 'antd'
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
tags: ['Unremovable', 'Tag 2', 'Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3'],
|
||||||
|
inputVisible: false,
|
||||||
|
inputValue: '',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleClose (removedTag) {
|
||||||
|
const tags = this.tags.filter(tag => tag !== removedTag)
|
||||||
|
console.log(tags)
|
||||||
|
this.tags = tags
|
||||||
|
},
|
||||||
|
|
||||||
|
showInput () {
|
||||||
|
this.inputVisible = true
|
||||||
|
this.$nextTick(function () {
|
||||||
|
this.$refs.input.focus()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
handleInputChange (e) {
|
||||||
|
this.inputValue = e.target.value
|
||||||
|
},
|
||||||
|
|
||||||
|
handleInputConfirm () {
|
||||||
|
const inputValue = this.inputValue
|
||||||
|
let tags = this.tags
|
||||||
|
if (inputValue && tags.indexOf(inputValue) === -1) {
|
||||||
|
tags = [...tags, inputValue]
|
||||||
|
}
|
||||||
|
console.log(tags)
|
||||||
|
Object.assign(this, {
|
||||||
|
tags,
|
||||||
|
inputVisible: false,
|
||||||
|
inputValue: '',
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
Tag,
|
||||||
|
AntButton: Button,
|
||||||
|
ToolTip,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<strong :style="{ marginRight: 8 }">Categories:</strong>
|
||||||
|
<template v-for=" tag in tags">
|
||||||
|
<CheckableTag
|
||||||
|
:key="tag"
|
||||||
|
:checked="selectedTags.indexOf(tag) > -1"
|
||||||
|
@change="(checked) => handleChange(tag, checked)"
|
||||||
|
>
|
||||||
|
{{tag}}
|
||||||
|
</CheckableTag>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { Tag } from 'antd'
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
checked1: false,
|
||||||
|
checked2: false,
|
||||||
|
checked3: false,
|
||||||
|
tags: ['Movies', 'Books', 'Music', 'Sports'],
|
||||||
|
selectedTags: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleChange (tag, checked) {
|
||||||
|
const { selectedTags } = this
|
||||||
|
const nextSelectedTags = checked
|
||||||
|
? [...selectedTags, tag]
|
||||||
|
: selectedTags.filter(t => t !== tag)
|
||||||
|
console.log('You are interested in: ', nextSelectedTags)
|
||||||
|
this.selectedTags = nextSelectedTags
|
||||||
|
},
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
Tag,
|
||||||
|
CheckableTag: Tag.CheckableTag,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>Basic</h1>
|
||||||
|
<Basic />
|
||||||
|
<h1>Checkable</h1>
|
||||||
|
<Checkable />
|
||||||
|
<h1>Colorful</h1>
|
||||||
|
<Colorful />
|
||||||
|
<h1>Control</h1>
|
||||||
|
<Control />
|
||||||
|
<h1>HotTags</h1>
|
||||||
|
<HotTags />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import Basic from './basic'
|
||||||
|
import Checkable from './checkable'
|
||||||
|
import Colorful from './colorful'
|
||||||
|
import Control from './control'
|
||||||
|
import HotTags from './hot-tags'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Basic,
|
||||||
|
Checkable,
|
||||||
|
Colorful,
|
||||||
|
Control,
|
||||||
|
HotTags,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
import Tag from './Tag.vue'
|
||||||
|
import CheckableTag from './CheckableTag.vue'
|
||||||
|
|
||||||
|
Tag.CheckableTag = CheckableTag
|
||||||
|
export default Tag
|
||||||
|
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
import '../../style/index.less'
|
||||||
|
import './index.less'
|
||||||
|
|
@ -0,0 +1,122 @@
|
||||||
|
@import "../../style/themes/default";
|
||||||
|
@import "../../style/mixins/index";
|
||||||
|
|
||||||
|
@tag-prefix-cls: ~"@{ant-prefix}-tag";
|
||||||
|
|
||||||
|
.@{tag-prefix-cls} {
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 20px;
|
||||||
|
height: 22px;
|
||||||
|
padding: 0 8px;
|
||||||
|
border-radius: @border-radius-base;
|
||||||
|
border: @border-width-base @border-style-base @border-color-split;
|
||||||
|
background: @tag-default-bg;
|
||||||
|
font-size: @tag-font-size;
|
||||||
|
transition: all 0.3s @ease-out;
|
||||||
|
opacity: 1;
|
||||||
|
margin-right: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
&,
|
||||||
|
a,
|
||||||
|
a:hover {
|
||||||
|
color: @tag-default-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-text {
|
||||||
|
a:first-child:last-child {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 -8px;
|
||||||
|
padding: 0 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{iconfont-css-prefix}-cross {
|
||||||
|
.iconfont-size-under-12px(10px);
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-left: 3px;
|
||||||
|
transition: all 0.3s @ease-out;
|
||||||
|
opacity: 0.66;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-has-color {
|
||||||
|
border-color: transparent;
|
||||||
|
&,
|
||||||
|
a,
|
||||||
|
a:hover,
|
||||||
|
.@{iconfont-css-prefix}-cross,
|
||||||
|
.@{iconfont-css-prefix}-cross:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-checkable {
|
||||||
|
background-color: transparent;
|
||||||
|
border-color: transparent;
|
||||||
|
&:not(&-checked):hover {
|
||||||
|
color: @primary-color;
|
||||||
|
}
|
||||||
|
&:active,
|
||||||
|
&-checked {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
&-checked {
|
||||||
|
background-color: @primary-6;
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
background-color: @primary-7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-close {
|
||||||
|
width: 0 !important;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-zoom-enter,
|
||||||
|
&-zoom-enter-active {
|
||||||
|
animation: antFadeIn 0.2s @ease-in-out-circ;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-zoom-leave-active {
|
||||||
|
animation: antZoomOut 0.3s @ease-in-out-circ;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
width: 0 !important;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@colors: pink, red, orange, yellow, cyan, green, blue, purple;
|
||||||
|
|
||||||
|
// mixin to iterate over colors and create CSS class for each one
|
||||||
|
.make-color-classes(@i: length(@colors)) when (@i > 0) {
|
||||||
|
.make-color-classes(@i - 1);
|
||||||
|
@color: extract(@colors, @i);
|
||||||
|
@lightColor: "@{color}-2";
|
||||||
|
@darkColor: "@{color}-6";
|
||||||
|
&-@{color} {
|
||||||
|
color: @@darkColor;
|
||||||
|
background: @@lightColor;
|
||||||
|
border-color: @@lightColor;
|
||||||
|
}
|
||||||
|
&-@{color}-inverse {
|
||||||
|
background: @@darkColor;
|
||||||
|
border-color: @@darkColor;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.make-color-classes();
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue