Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat/better tag tags #10

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Feat/better tag tags #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ef03375
feat: tag-tags more style and logic
adoin Jul 11, 2024
a472e88
Merge branch 'main' of https://github.com/adoin/vxe-pc-ui into feat/b…
adoin Jul 11, 2024
90515bd
feat: update global statement
adoin Jul 11, 2024
031a3a7
Merge branch 'main' into feat/better-tag-tags
adoin Jul 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 116 additions & 18 deletions examples/views/tag/TagTest.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,119 @@
<template>
<div>
<p>
<vxe-tag content="默认颜色"></vxe-tag>
<vxe-tag status="primary" content="主要颜色"></vxe-tag>
<vxe-tag status="success" content="信息颜色"></vxe-tag>
<vxe-tag status="info" content="信息颜色"></vxe-tag>
<vxe-tag status="warning" content="警告颜色"></vxe-tag>
<vxe-tag status="error" content="危险颜色"></vxe-tag>
</p>

<p>
<vxe-tag content="默认图标颜色" icon="vxe-icon-info-circle"></vxe-tag>
<vxe-tag status="primary" content="主要图标颜色" icon="vxe-icon-info-circle"></vxe-tag>
<vxe-tag status="success" content="成功图标颜色" icon="vxe-icon-info-circle"></vxe-tag>
<vxe-tag status="info" content="信息图标颜色" icon="vxe-icon-info-circle"></vxe-tag>
<vxe-tag status="warning" content="警告图标颜色" icon="vxe-icon-info-circle"></vxe-tag>
<vxe-tag status="error" content="危险图标颜色" icon="vxe-icon-info-circle"></vxe-tag>
</p>
<div style="display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;">
<div style="width: 100%;">默认风格：
<vxe-tag>常用写法</vxe-tag>
<vxe-tag content="自定义颜色" color="#45adbe"/>
<vxe-tag content="主色" color="primary" size="mini"/>
<vxe-tag content="警告色" color="warning" size="small" icon="vxe-icon-warning-circle"/>
<vxe-tag content="错误色" color="error" size="large"/>
<vxe-tag round>round</vxe-tag>
<vxe-tag closable>closable</vxe-tag>
</div>
<div style="width: 100%;">框线风格：
<vxe-tag tag-style="outline">常用写法</vxe-tag>
<vxe-tag tag-style="outline" content="自定义颜色" color="#45adbe"/>
<vxe-tag tag-style="outline" content="主色" color="primary" size="mini"/>
<vxe-tag tag-style="outline" content="警告色" color="warning" size="small" icon="vxe-icon-warning-circle"/>
<vxe-tag tag-style="outline" content="错误色" color="error" size="large"/>
<vxe-tag tag-style="outline" round>round</vxe-tag>
<vxe-tag tag-style="outline" closable>closable</vxe-tag>
</div>
<div style="width: 100%;">虚线风格：
<vxe-tag tag-style="dashed" content="自定义颜色" color="#45adbe"/>
<vxe-tag tag-style="dashed" content="主色" color="primary" size="mini"/>
<vxe-tag tag-style="dashed" content="警告色" color="warning" size="small" icon="vxe-icon-warning-circle"/>
<vxe-tag tag-style="dashed" content="错误色" color="error" size="large"/>
<vxe-tag tag-style="dashed" round>round</vxe-tag>
<vxe-tag tag-style="dashed" closable>closable</vxe-tag>
</div>
<div style="width: 100%;">标记风格：
<vxe-tag tag-style="mark">常用写法</vxe-tag>
<vxe-tag tag-style="mark" content="自定义颜色" color="#45adbe"/>
<vxe-tag tag-style="mark" content="主色" color="primary" size="mini"/>
<vxe-tag tag-style="mark" content="警告色" color="warning" size="small" icon="vxe-icon-warning-circle"/>
<vxe-tag tag-style="mark" content="错误色" color="error" size="large"/>
<vxe-tag tag-style="mark" round>round</vxe-tag>
<vxe-tag tag-style="mark" closable>closable</vxe-tag>
</div>
<div style="width: 100%;">箭头风格：
<vxe-tag tag-style="arrow">常用写法</vxe-tag>
<vxe-tag tag-style="arrow" content="自定义颜色" color="#45adbe"/>
<vxe-tag tag-style="arrow" content="主色" color="primary" size="mini"/>
<vxe-tag tag-style="arrow" content="警告色" color="warning" size="small" icon="vxe-icon-warning-circle"/>
<vxe-tag tag-style="arrow" content="错误色" color="error" size="large"/>
<vxe-tag tag-style="arrow" round>round</vxe-tag>
<vxe-tag tag-style="arrow" closable>closable</vxe-tag>
</div>
<div style="width: 100%;">旗帜风格：
<vxe-tag tag-style="flag">常用写法</vxe-tag>
<vxe-tag tag-style="flag" v-model:content="str" editable color="#45adbe"/>
<vxe-tag tag-style="flag" content="主色" color="primary" size="mini"/>
<vxe-tag tag-style="flag" content="警告色" color="warning" size="small" icon="vxe-icon-warning-circle"/>
<vxe-tag tag-style="flag" content="错误色" color="error" size="large"/>
<vxe-tag tag-style="flag" round>round</vxe-tag>
<vxe-tag tag-style="flag" closable>closable</vxe-tag>
</div>
<div style="width: 100%;">
<span> 简单标签组：</span>
<vxe-tags tag-style="mark" v-model="tagStrList"/>
</div>
<div style="width: 100%;">
<span> 可编辑添加标签组：</span>
<vxe-tags tag-style="mark" v-model="tagPropList" creator/>
<span> 自定义创建方法标签组：</span>
<vxe-tags tag-style="mark" v-model="tagPropList1" :creator="()=>({
tagStyle: 'flag',
content: '?'
})"/>
<span> 自定义分隔符插槽标签组：</span>
<vxe-tags tag-style="mark" v-model="tagStrList" :creator="(tags:any[])=>clone(tags[tags?.length-1])">
<template #separator>
<span> | </span>
</template>
</vxe-tags>
</div>
</div>
</template>
<script setup lang="ts" name="TagTest">
import { ref } from 'vue'
import { VxeTagProps } from '../../../types'
import { clone } from 'xe-utils'
const str = ref('')
const tagStrList = ref(['x', 'y', 'z'])
const tagPropList = ref<VxeTagProps[]>([
{
tagStyle: 'mark',
content: 'A'
},
{
tagStyle: 'flag',
content: 'B',
color: 'primary'
},
{
tagStyle: 'arrow',
content: 'C',
color: '#b074d2'
}
])
const tagPropList1 = ref<VxeTagProps[]>([
{
tagStyle: 'mark',
content: 'A',
closable: true
},
{
tagStyle: 'flag',
content: 'B',
color: 'primary'
},
{
tagStyle: 'arrow',
content: 'C',
color: '#b074d2'
}
])
</script>
6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,11 @@
"@vue/cli-plugin-typescript": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/eslint-config-standard": "^6.1.0",
"@vue/eslint-config-typescript": "^9.1.0",
"@vue/eslint-config-standard": "^7.0.0",
"@vue/eslint-config-typescript": "^10.0.0",
"core-js": "^3.8.3",
"del": "^6.1.1",
"eslint": "^7.32.0",
"eslint": "^8.57.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^6.1.1",
Expand Down
2 changes: 2 additions & 0 deletions packages/components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ import VxeSwitch from './switch'
import VxeTabPane from './tab-pane'
import VxeTabs from './tabs'
import VxeTag from './tag'
import VxeTags from './tags'
import VxeText from './text'
import VxeTextarea from './textarea'
import VxeTip from './tip'
Expand Down Expand Up @@ -125,6 +126,7 @@ const components = [
VxeTabPane,
VxeTabs,
VxeTag,
VxeTags,
VxeText,
VxeTextarea,
VxeTip,
Expand Down
1 change: 1 addition & 0 deletions packages/form-design/src/widget-info.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ export class FormDesignWidgetInfo {
name = ''
required = false
options: VxeFormPropTypes.Data = {}
// eslint-disable-next-line no-use-before-define
children: FormDesignWidgetInfo[] = []
model = {
update: false,
Expand Down
1 change: 0 additions & 1 deletion packages/tag/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ export const VxeTag = Object.assign({}, VxeTagComponent, {
app.component(VxeTagComponent.name as string, VxeTagComponent)
}
})

dynamicApp.component(VxeTagComponent.name as string, VxeTagComponent)
VxeUI.component(VxeTagComponent)

Expand Down
Loading