mirror of
https://github.com/element-plus/element-plus.git
synced 2025-01-30 11:16:12 +08:00
feat(tag): add new feature check-tag (#1696)
* feat(tag): add new feature check-tag - Add new component `check-tag` * feat(tag): - add check tag vetur support
This commit is contained in:
jeremywu
GitHub
parent
3ac7c2c75f
commit
8f256b18f7
50
packages/check-tag/__tests__/check-tag.spec.ts
Normal file
50
packages/check-tag/__tests__/check-tag.spec.ts
Normal file
@ -0,0 +1,50 @@
|
||||
import { mount } from '@vue/test-utils'
|
||||
import CheckTag from '../src/index.vue'
|
||||
|
||||
const AXIOM = 'Rem is the best girl'
|
||||
|
||||
describe('CheckTag.vue', () => {
|
||||
test('render test', async () => {
|
||||
const wrapper = mount(CheckTag, {
|
||||
slots: {
|
||||
default: AXIOM,
|
||||
},
|
||||
})
|
||||
expect(wrapper.text()).toEqual(AXIOM)
|
||||
|
||||
expect(wrapper.classes()).toContain('el-check-tag')
|
||||
})
|
||||
|
||||
|
||||
test('functionality', async () => {
|
||||
const wrapper = mount({
|
||||
template: `<el-check-tag @change="checked = !checked" :checked="checked">
|
||||
${AXIOM}
|
||||
</el-check-tag>`,
|
||||
components: {
|
||||
'el-check-tag': CheckTag,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checked: false,
|
||||
}
|
||||
},
|
||||
}, {
|
||||
slots: {
|
||||
default: AXIOM,
|
||||
},
|
||||
})
|
||||
expect(wrapper.text()).toEqual(AXIOM)
|
||||
|
||||
await wrapper.find('.el-check-tag').trigger('click')
|
||||
|
||||
expect(wrapper.vm.checked).toBe(true)
|
||||
|
||||
await wrapper.find('.el-check-tag').trigger('click')
|
||||
|
||||
expect(wrapper.vm.checked).toBe(false)
|
||||
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
11
packages/check-tag/index.ts
Normal file
11
packages/check-tag/index.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import { App } from 'vue'
|
||||
import CheckTag from './src/index.vue'
|
||||
import type { SFCWithInstall } from '@element-plus/utils/types'
|
||||
|
||||
CheckTag.install = (app: App): void => {
|
||||
app.component(CheckTag.name, CheckTag)
|
||||
}
|
||||
|
||||
const _CheckTag: SFCWithInstall<typeof CheckTag> = CheckTag
|
||||
|
||||
export default _CheckTag
|
||||
12
packages/check-tag/package.json
Normal file
12
packages/check-tag/package.json
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"name": "@element-plus/check-tag",
|
||||
"version": "0.0.0",
|
||||
"main": "dist/index.js",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"vue": "^3.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/test-utils": "^2.0.0-beta.3"
|
||||
}
|
||||
}
|
||||
33
packages/check-tag/src/index.vue
Normal file
33
packages/check-tag/src/index.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<span
|
||||
:class="{
|
||||
'el-check-tag': true,
|
||||
'is-checked': checked,
|
||||
}"
|
||||
@click="onChange"
|
||||
>
|
||||
<slot></slot>
|
||||
</span>
|
||||
</template>
|
||||
<script lang='ts'>
|
||||
import { defineComponent } from 'vue'
|
||||
export default defineComponent({
|
||||
name: 'ElCheckTag',
|
||||
props: {
|
||||
checked: Boolean,
|
||||
},
|
||||
emits: ['change'],
|
||||
setup(props, { emit }) {
|
||||
|
||||
const onChange = () => {
|
||||
emit('change', !props.checked)
|
||||
}
|
||||
|
||||
return {
|
||||
onChange,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
</style>
|
||||
@ -89,6 +89,8 @@ import ElVirtualList from '@element-plus/virtual-list'
|
||||
import ElSpace from '@element-plus/space'
|
||||
import ElSkeleton from '@element-plus/skeleton'
|
||||
import ElSkeletonItem from '@element-plus/skeleton-item'
|
||||
import ElCheckTag from '@element-plus/check-tag'
|
||||
|
||||
import { use, i18n } from '@element-plus/locale'
|
||||
// if you encountered problems alike "Can't resolve './version'"
|
||||
// please run `yarn bootstrap` first
|
||||
@ -141,6 +143,7 @@ const components = [
|
||||
ElCheckbox,
|
||||
ElCheckboxButton,
|
||||
ElCheckboxGroup,
|
||||
ElCheckTag,
|
||||
ElCol,
|
||||
ElCollapse,
|
||||
ElCollapseItem,
|
||||
@ -255,6 +258,7 @@ export {
|
||||
ElCheckbox,
|
||||
ElCheckboxButton,
|
||||
ElCheckboxGroup,
|
||||
ElCheckTag,
|
||||
ElCol,
|
||||
ElCollapse,
|
||||
ElCollapseItem,
|
||||
|
||||
26
packages/theme-chalk/src/check-tag.scss
Normal file
26
packages/theme-chalk/src/check-tag.scss
Normal file
@ -0,0 +1,26 @@
|
||||
@import "mixins/mixins";
|
||||
@import "common/var";
|
||||
|
||||
@include b(check-tag) {
|
||||
background-color: $--background-color-base;
|
||||
border-radius: $--border-radius-base;
|
||||
color: $--color-info;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: $--font-size-base;
|
||||
line-height: $--font-size-base;
|
||||
padding: 7px 15px;
|
||||
transition: $--all-transition;
|
||||
font-weight: bold;
|
||||
&:hover {
|
||||
background-color: rgb(220, 223, 230);
|
||||
}
|
||||
|
||||
@include when(checked) {
|
||||
background-color: #DEEDFC;
|
||||
color: $--color-primary-light-1;
|
||||
&:hover {
|
||||
background-color: $--color-primary-light-7;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -86,3 +86,4 @@
|
||||
@import "./skeleton-item.scss";
|
||||
@import "./empty.scss";
|
||||
@import "./affix.scss";
|
||||
@import "./check-tag.scss";
|
||||
|
||||
@ -185,6 +185,10 @@
|
||||
"defaults": ["type"],
|
||||
"description": "Used for marking and selection."
|
||||
},
|
||||
"el-check-tag": {
|
||||
"attributes": ["checked"],
|
||||
"description": "Light weighted checkbox with tag appearance"
|
||||
},
|
||||
"el-progress": {
|
||||
"attributes": ["percentage", "type", "stroke-width", "text-inside", "status", "color", "width", "show-text", "stroke-linecap", "format"],
|
||||
"defaults": ["percentage"],
|
||||
|
||||
@ -4334,6 +4334,28 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "el-check-tag",
|
||||
"description": "Light weighted checkbox with tag appearance",
|
||||
"doc-url": "https://element-plus.org/#/en-US/component/tag",
|
||||
"attributes": [
|
||||
{
|
||||
"name": "checked",
|
||||
"default": "-",
|
||||
"description": "whether the tag is selected",
|
||||
"value": {
|
||||
"type": "boolean",
|
||||
"kind": "expression"
|
||||
}
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
{
|
||||
"name": "change",
|
||||
"description": "triggers when check tag checked state change"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "el-progress",
|
||||
"description": "Progress is used to show the progress of current operation, and inform the user the current status.",
|
||||
|
||||
@ -185,6 +185,36 @@ Tag provide three different themes: `dark`、`light` and `plain`
|
||||
```
|
||||
:::
|
||||
|
||||
### Checkable tag
|
||||
|
||||
Sometimes because of the business needs, we might need checkbox like tag, but **button like checkbox** cannot meet our needs, here comes `check-tag`
|
||||
|
||||
:::demo basic check-tag usage, the API is rather simple.
|
||||
```html
|
||||
|
||||
<div>
|
||||
<el-check-tag checked style="margin-right: 8px;">Checked</el-check-tag>
|
||||
<el-check-tag @change="onChange" :checked="checked">Toggle me</el-check-tag>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(checked) {
|
||||
this.checked = checked;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
@ -202,3 +232,13 @@ Tag provide three different themes: `dark`、`light` and `plain`
|
||||
|---------- |-------- |---------- |
|
||||
| click | triggers when Tag is clicked | — |
|
||||
| close | triggers when Tag is removed | — |
|
||||
|
||||
### CheckTag Attributes
|
||||
| Attribute | Description | Type | Accepted | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| checked | is checked | boolean | true/false | — |
|
||||
|
||||
### CheckTag Events
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| change | triggers when Check Tag is clicked | checked |
|
||||
|
||||
@ -17,7 +17,7 @@ Se utiliza para marcar y seleccionar.
|
||||
|
||||
### Etiqueta removible
|
||||
|
||||
:::demo el atributo `closable` puede usarse para definir una etiqueta removible. Acepta un `Boolean`. De forma predeterminada, la eliminación de la etiqueta tiene una animación que se desvanece. Si no quiere usarlo, puede configurar el atributo `disable-transitions` , que acepta `Boolean`, como `true`. Se dispara el evento `close` cuando la etiqueta es removida.
|
||||
:::demo el atributo `closable` puede usarse para definir una etiqueta removible. Acepta un `Boolean`. De forma predeterminada, la eliminación de la etiqueta tiene una animación que se desvanece. Si no quiere usarlo, puede configurar el atributo `disable-transitions` , que acepta `Boolean`, como `true`. Se dispara el evento `close` cuando la etiqueta es removida.
|
||||
|
||||
```html
|
||||
<el-tag
|
||||
@ -184,6 +184,36 @@ Tag provide three different themes: `dark`、`light` and `plain`
|
||||
```
|
||||
:::
|
||||
|
||||
### Checkable tag
|
||||
|
||||
Sometimes because of the business needs, we might need checkbox like tag, but **button like checkbox** cannot meet our needs, here comes `check-tag`
|
||||
|
||||
:::demo basic check-tag usage, the API is rather simple.
|
||||
```html
|
||||
|
||||
<div>
|
||||
<el-check-tag checked style="margin-right: 8px;">Checked</el-check-tag>
|
||||
<el-check-tag @change="onChange" :checked="checked">Toggle me</el-check-tag>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(checked) {
|
||||
this.checked = checked;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
```
|
||||
:::
|
||||
|
||||
### Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ------------------- | ----------------------------------- | ------- | --------------------------- | ----------- |
|
||||
@ -201,3 +231,13 @@ Tag provide three different themes: `dark`、`light` and `plain`
|
||||
| ------ | ------------------------------------ | ---------- |
|
||||
| click | se dispara cuando el Tag es clic | — |
|
||||
| close | se dispara cuando el Tag es removido | — |
|
||||
|
||||
### CheckTag Atributos
|
||||
| Attribute | Description | Type | Accepted | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| checked | is checked | boolean | true/false | — |
|
||||
|
||||
### CheckTag Eventos
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| change | triggers when Check Tag is clicked | checked |
|
||||
|
||||
@ -184,6 +184,37 @@ Les balises utilisent trois thèmes différents: `dark`, `light` et `plain`
|
||||
```
|
||||
:::
|
||||
|
||||
### Checkable tag
|
||||
|
||||
Sometimes because of the business needs, we might need checkbox like tag, but **button like checkbox** cannot meet our needs, here comes `check-tag`
|
||||
|
||||
:::demo basic check-tag usage, the API is rather simple.
|
||||
```html
|
||||
|
||||
<div>
|
||||
<el-check-tag checked style="margin-right: 8px;">Checked</el-check-tag>
|
||||
<el-check-tag @change="onChange" :checked="checked">Toggle me</el-check-tag>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(checked) {
|
||||
this.checked = checked;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
### Attributs
|
||||
|
||||
| Attribut | Description | Type | Valeurs acceptées | Défaut |
|
||||
@ -202,3 +233,13 @@ Les balises utilisent trois thèmes différents: `dark`, `light` et `plain`
|
||||
|---------- |-------- |---------- |
|
||||
| click | Se déclenche quand le tag est cliqué. | — |
|
||||
| close | Se déclenche quand le tag est supprimé. | — |
|
||||
|
||||
### CheckTag Attributs
|
||||
| Attribute | Description | Type | Accepted | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| checked | is checked | boolean | true/false | — |
|
||||
|
||||
### CheckTag Évènements
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| change | triggers when Check Tag is clicked | checked |
|
||||
|
||||
@ -185,6 +185,36 @@
|
||||
```
|
||||
:::
|
||||
|
||||
### Checkable tag
|
||||
|
||||
Sometimes because of the business needs, we might need checkbox like tag, but **button like checkbox** cannot meet our needs, here comes `check-tag`
|
||||
|
||||
:::demo basic check-tag usage, the API is rather simple.
|
||||
```html
|
||||
|
||||
<div>
|
||||
<el-check-tag checked style="margin-right: 8px;">Checked</el-check-tag>
|
||||
<el-check-tag @change="onChange" :checked="checked">Toggle me</el-check-tag>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(checked) {
|
||||
this.checked = checked;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
```
|
||||
:::
|
||||
|
||||
### 属性
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
@ -202,3 +232,14 @@
|
||||
|---------- |-------- |---------- |
|
||||
| click | タグがクリックされたときにトリガーされます。 | — |
|
||||
| close | タグが削除されたときにトリガーされます。 | — |
|
||||
|
||||
|
||||
### CheckTag 属性
|
||||
| Attribute | Description | Type | Accepted | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| checked | is checked | boolean | true/false | — |
|
||||
|
||||
### CheckTag イベント
|
||||
| Event Name | Description | Parameters |
|
||||
|---------- |-------- |---------- |
|
||||
| change | triggers when Check Tag is clicked | checked |
|
||||
|
||||
@ -184,6 +184,36 @@ Tag 组件提供了三个不同的主题：`dark`、`light` 和 `plain`
|
||||
```
|
||||
:::
|
||||
|
||||
### 类似复选框的标签
|
||||
|
||||
有时候因为业务需求，我们可能会需要用到类似复选框的标签，但是按钮式的复选框的样式又不满足需求，此时我们就可以用到 `check-tag`
|
||||
|
||||
:::demo check-tag 的基础使用方法，check-tag 提供的 API 非常简单
|
||||
```html
|
||||
|
||||
<div>
|
||||
<el-check-tag checked style="margin-right: 8px;">选中</el-check-tag>
|
||||
<el-check-tag @change="onChange" :checked="checked">点我切换</el-check-tag>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(checked) {
|
||||
this.checked = checked;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
@ -201,3 +231,13 @@ Tag 组件提供了三个不同的主题：`dark`、`light` 和 `plain`
|
||||
|---------- |-------- |---------- |
|
||||
| click | 点击 Tag 时触发的事件 | — |
|
||||
| close | 关闭 Tag 时触发的事件 | — |
|
||||
|
||||
### CheckTag Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| checked | 是否选中 | boolean | true/false | — |
|
||||
|
||||
### CheckTag Events
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
|---------- |-------- |---------- |
|
||||
| change | 点击 Check Tag 时触发的事件 | checked |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user