forked from opentiny/tiny-vue
feat(tag): add tag-mobile (#976)
* feat(tag): add tag-mobile Signed-off-by: jacknan <zhumaonan@aliyun.com> * feat(tag): remove tsx Signed-off-by: jacknan <zhumaonan@aliyun.com> --------- Signed-off-by: jacknan <zhumaonan@aliyun.com>
This commit is contained in:
parent
a1e84ad9c2
commit
74e976e2a5
|
@ -0,0 +1,27 @@
|
|||
<template>
|
||||
<div class="tiny-tag-demo">
|
||||
<tiny-tag color="default" text="默认" />
|
||||
<tiny-tag color="default"> 默认默认默认默认默认默认默认默认</tiny-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Tag } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTag: Tag
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tiny-tag-demo {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.tiny-mobile-tag {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,30 @@
|
|||
<template>
|
||||
<div class="tiny-tag-demo">
|
||||
<tiny-tag color="default" text=""> 默认 </tiny-tag>
|
||||
<tiny-tag color="red" text="红色" />
|
||||
<tiny-tag color="blue" text="蓝色"> </tiny-tag>
|
||||
<tiny-tag color="yellow" text="黄色"> </tiny-tag>
|
||||
<tiny-tag color="green" text="绿色"> </tiny-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Tag } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTag: Tag
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tiny-tag-demo {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.tiny-mobile-tag {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<div class="tiny-tag-demo">
|
||||
<tiny-tag color="default" max-width="100"> 默认默认默认默认默认默认默认默认 </tiny-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Tag } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTag: Tag
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tiny-tag-demo {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.tiny-mobile-tag {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,27 @@
|
|||
<template>
|
||||
<div class="tiny-tag-demo">
|
||||
<tiny-tag color="default"> 默认 </tiny-tag>
|
||||
<tiny-tag color="default" mini> 小尺寸 </tiny-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Tag } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTag: Tag
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tiny-tag-demo {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.tiny-mobile-tag {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Tag 标签
|
||||
---
|
||||
|
||||
# Tag 标签
|
||||
|
||||
<div>用于标记事物的属性和维度</div>
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Tag
|
||||
---
|
||||
|
||||
# Tag
|
||||
|
||||
<div>Used to mark transaction attributes and dimensions</div>
|
|
@ -0,0 +1,96 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
'demoId': 'basic-usage',
|
||||
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
|
||||
'desc': {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'Basic Usage'
|
||||
},
|
||||
'codeFiles': ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'different-color',
|
||||
'name': { 'zh-CN': '不同颜色', 'en-US': 'Different Color' },
|
||||
'desc': {
|
||||
'zh-CN': '不同颜色',
|
||||
'en-US': 'Different Color'
|
||||
},
|
||||
'codeFiles': ['different-color.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'max-width',
|
||||
'name': { 'zh-CN': '最大宽度', 'en-US': 'Max Width' },
|
||||
'desc': {
|
||||
'zh-CN': '最大宽度',
|
||||
'en-US': 'Max Width'
|
||||
},
|
||||
'codeFiles': ['max-width.vue']
|
||||
},
|
||||
{
|
||||
'demoId': 'mini',
|
||||
'name': { 'zh-CN': '小尺寸', 'en-US': 'Mini' },
|
||||
'desc': {
|
||||
'zh-CN': '小尺寸',
|
||||
'en-US': 'Mini'
|
||||
},
|
||||
'codeFiles': ['mini.vue']
|
||||
}
|
||||
],
|
||||
apis: [
|
||||
{
|
||||
'name': 'tag',
|
||||
'type': 'component',
|
||||
'props': [
|
||||
{
|
||||
'name': 'color',
|
||||
'type': 'string',
|
||||
'defaultValue': 'default',
|
||||
'desc': {
|
||||
'zh-CN': '文字颜色:default、red、blue、yellow、green',
|
||||
'en-US': 'text color: default、red、blue、yellow、green'
|
||||
},
|
||||
'demoId': 'different-color'
|
||||
},
|
||||
{
|
||||
'name': 'max-width',
|
||||
'type': 'string | number',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '最大宽度', 'en-US': 'max width' },
|
||||
'demoId': 'max-width'
|
||||
},
|
||||
{
|
||||
'name': 'mini',
|
||||
'type': 'boolean',
|
||||
'defaultValue': 'false',
|
||||
'desc': {
|
||||
'zh-CN': '小尺寸',
|
||||
'en-US': 'mini'
|
||||
},
|
||||
'demoId': 'mini'
|
||||
},
|
||||
{
|
||||
'name': 'text',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '文字',
|
||||
'en-US': 'Text'
|
||||
},
|
||||
'demoId': 'basic-usage'
|
||||
}
|
||||
],
|
||||
'slots': [
|
||||
{
|
||||
'name': 'default',
|
||||
'type': '',
|
||||
'defaultValue': '',
|
||||
'desc': { 'zh-CN': '标签内容', 'en-US': 'Label Content' },
|
||||
'demoId': 'slot-default'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
|
@ -113,7 +113,8 @@ export const cmpMenus = [
|
|||
{ name: 'Icon', nameCn: '图标', key: 'icon' },
|
||||
{ name: 'ActionSheet', nameCn: '上滑列表组件', key: 'actionsheet' },
|
||||
{ name: 'MiniPicker', nameCn: 'mini选择器', key: 'minipicker' },
|
||||
{ name: 'UserHead', nameCn: '用户头像', key: 'user-head' }
|
||||
{ name: 'UserHead', nameCn: '用户头像', key: 'user-head' },
|
||||
{ name: 'Tag', nameCn: '标签', key: 'tag' }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
|
@ -2434,6 +2434,7 @@
|
|||
"exclude": false,
|
||||
"mode": [
|
||||
"mobile-first",
|
||||
"mobile",
|
||||
"pc"
|
||||
]
|
||||
},
|
||||
|
@ -2456,6 +2457,11 @@
|
|||
"type": "template",
|
||||
"exclude": false
|
||||
},
|
||||
"TagMobile": {
|
||||
"path": "vue/src/tag/src/mobile.vue",
|
||||
"type": "template",
|
||||
"exclude": false
|
||||
},
|
||||
"TagMobileFirst": {
|
||||
"path": "vue/src/tag/src/mobile-first.vue",
|
||||
"type": "template",
|
||||
|
|
|
@ -22,7 +22,11 @@ export const renderless = (
|
|||
const state: ITagState = reactive({
|
||||
type: computed(() => props.theme || props.type),
|
||||
show: true,
|
||||
selected: false
|
||||
selected: false,
|
||||
mini: props.mini,
|
||||
color: props.color,
|
||||
text: props.text,
|
||||
maxWidth: props.maxWidth
|
||||
})
|
||||
|
||||
const api: ITagApi = {
|
||||
|
|
|
@ -6,6 +6,10 @@ export interface ITagState {
|
|||
type: string | undefined
|
||||
show: boolean
|
||||
selected: boolean
|
||||
text: string
|
||||
color: string
|
||||
mini: boolean
|
||||
maxWidth: string | number
|
||||
}
|
||||
|
||||
export interface ITagApi {
|
||||
|
|
|
@ -0,0 +1,59 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
|
||||
@import '../custom.less';
|
||||
@import './vars.less';
|
||||
|
||||
@tag-prefix-cls: ~'@{css-prefix}mobile-tag';
|
||||
|
||||
.@{tag-prefix-cls} {
|
||||
.component-css-vars-tag();
|
||||
|
||||
line-height: var(--ti-mobile-tag-height-default);
|
||||
padding: 0 var(--ti-mobile-tag-padding-default);
|
||||
text-align: center;
|
||||
font-size: var(--ti-mobile-tag-font-size-default);
|
||||
color: var(--ti-mobile-tag-color-default);
|
||||
background-color: var(--ti-mobile-tag-bg-color-default);
|
||||
display: inline-block;
|
||||
border-radius: var(--ti-mobile-tag-border-radius-default);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&-mini {
|
||||
line-height: var(--ti-mobile-tag-height-mini);
|
||||
padding: 0 var(--ti-mobile-tag-padding-mini);
|
||||
font-size: var(--ti-mobile-tag-font-size-mini);
|
||||
border-radius: var(--ti-mobile-tag-border-radius-mini);
|
||||
}
|
||||
|
||||
&-red {
|
||||
color: var(--ti-mobile-tag-color-red);
|
||||
background-color: var(--ti-mobile-tag-bg-color-red);
|
||||
}
|
||||
|
||||
&-blue {
|
||||
color: var(--ti-mobile-tag-color-blue);
|
||||
background-color: var(--ti-mobile-tag-bg-color-blue);
|
||||
}
|
||||
|
||||
&-yellow {
|
||||
color: var(--ti-mobile-tag-color-yellow);
|
||||
background-color: var(--ti-mobile-tag-bg-color-yellow);
|
||||
}
|
||||
|
||||
&-green {
|
||||
color: var(--ti-mobile-tag-color-green);
|
||||
background-color: var(--ti-mobile-tag-bg-color-green);
|
||||
}
|
||||
}
|
|
@ -0,0 +1,50 @@
|
|||
/**
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
*/
|
||||
|
||||
.component-css-vars-tag() {
|
||||
// 默认文字色值
|
||||
--ti-mobile-tag-color-default: var(--ti-mobile-color-text-primary, #191919);
|
||||
// 红色文字色值
|
||||
--ti-mobile-tag-color-red: var(--ti-mobile-color-eror, #f23030);
|
||||
// 蓝色文字色值
|
||||
--ti-mobile-tag-color-blue: var(--ti-mobile-color-info, #1476ff);
|
||||
// 黄色文字色值
|
||||
--ti-mobile-tag-color-yellow: var(--ti-mobile-color-warning, #d96900);
|
||||
// 绿色文字色值
|
||||
--ti-mobile-tag-color-green: var(--ti-mobile-color-success, #029931);
|
||||
// 默认背景色
|
||||
--ti-mobile-tag-bg-color-default: var(--ti-mobile-color-bg-disabled, #f0f0f0);
|
||||
// 红色背景色
|
||||
--ti-mobile-tag-bg-color-red: var(--ti-mobile-color-error-subtler, #fce3e1);
|
||||
// 蓝色背景色
|
||||
--ti-mobile-tag-bg-color-blue: var(--ti-mobile-color-info-subtle, #deecff);
|
||||
// 黄色背景色
|
||||
--ti-mobile-tag-bg-color-yellow: var(--ti-mobile-color-warning-subtle, #ffebd1);
|
||||
// 绿色背景色
|
||||
--ti-mobile-tag-bg-color-green: var(--ti-mobile-color-success-subtle, #e6f2d5);
|
||||
// 默认高度
|
||||
--ti-mobile-tag-height-default: var(--ti-mobile-space-6x, 24px);
|
||||
// 小尺寸高度
|
||||
--ti-mobile-tag-height-mini: calc(var(--ti-mobile-space-4x) + 2px);
|
||||
// 默认字体尺寸
|
||||
--ti-mobile-tag-font-size-default: var(--ti-mobile-font-size-m, 14px);
|
||||
// 小尺寸字体尺寸
|
||||
--ti-mobile-tag-font-size-mini: var(--ti-mobile-font-size-s, 12px);
|
||||
// 默认间距
|
||||
--ti-mobile-tag-padding-default: var(--ti-mobile-space-2x, 8px);
|
||||
// 小尺寸间距
|
||||
--ti-mobile-tag-padding-mini: var(--ti-mobile-space-1x, 4px);
|
||||
// 默认圆角尺寸
|
||||
--ti-mobile-tag-border-radius-default: var(--ti-mobile-border-radius-s, 4px);
|
||||
// 小尺寸圆角尺寸
|
||||
--ti-mobile-tag-border-radius-mini: var(--ti-mobile-border-radius-xs, 2px);
|
||||
}
|
|
@ -10,7 +10,7 @@
|
|||
*
|
||||
*/
|
||||
import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
|
||||
import template from 'virtual-template?pc|mobile-first'
|
||||
import template from 'virtual-template?pc|mobile|mobile-first'
|
||||
|
||||
export const tagProps = {
|
||||
...$props,
|
||||
|
@ -34,7 +34,17 @@ export const tagProps = {
|
|||
validator: (value: string) => Boolean(~['dark', 'light', 'plain'].indexOf(value))
|
||||
},
|
||||
beforeDelete: Function,
|
||||
value: [Number, String]
|
||||
value: [Number, String],
|
||||
|
||||
// mobile
|
||||
mini: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
maxWidth: {
|
||||
type: [String, Number],
|
||||
default: null
|
||||
}
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
|
|
|
@ -0,0 +1,35 @@
|
|||
<!--
|
||||
* Copyright (c) 2022 - present TinyVue Authors.
|
||||
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license.
|
||||
*
|
||||
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
|
||||
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
|
||||
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
*
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="['tiny-mobile-tag', 'tiny-mobile-tag-' + state.color, state.mini ? 'tiny-mobile-tag-mini' : null]"
|
||||
:style="{ maxWidth: state.maxWidth ? `${state.maxWidth}px` : null }"
|
||||
>
|
||||
<slot>{{ state.text }}</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { renderless, api } from '@opentiny/vue-renderless/tag/vue'
|
||||
import { props, setup, h, defineComponent } from '@opentiny/vue-common'
|
||||
import type { ITagApi } from '@opentiny/vue-renderless/types/tag.type'
|
||||
import '@opentiny/vue-theme-mobile/tag/index.less'
|
||||
|
||||
export default defineComponent({
|
||||
emits: ['click', 'close'],
|
||||
props: [...props, 'text', 'color', 'width', 'mini', 'maxWidth'],
|
||||
setup(props, context) {
|
||||
return setup({ props, context, renderless, api, h }) as unknown as ITagApi
|
||||
}
|
||||
})
|
||||
</script>
|
Loading…
Reference in New Issue