blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-24 02:16:12 +08:00
Code Issues Projects Releases Wiki Activity

chore(Tag): use tsx (#8066)

Browse Source
This commit is contained in:
neverland 2021-02-03 10:34:43 +08:00 committed by GitHub
parent ec12d9978c
commit 3712dac079
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 31 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/tag/index.js → src/tag/index.tsx
View File

@ -1,9 +1,11 @@
import { Transition } from 'vue'; import { CSSProperties, PropType, Transition } from 'vue';
import { createNamespace } from '../utils'; import { createNamespace } from '../utils';
import Icon from '../icon'; import Icon from '../icon';
const [createComponent, bem] = createNamespace('tag'); const [createComponent, bem] = createNamespace('tag');
export type TagType = 'default' | 'primary' | 'success' | 'warning' | 'danger';
export default createComponent({ export default createComponent({
props: { props: {
size: String, size: String,
@ -14,7 +16,7 @@ export default createComponent({
textColor: String, textColor: String,
closeable: Boolean, closeable: Boolean,
type: { type: {
type: String, type: String as PropType<TagType>,
default: 'default', default: 'default',
}, },
show: { show: {
@ -26,12 +28,12 @@ export default createComponent({
emits: ['close'], emits: ['close'],
setup(props, { slots, emit }) { setup(props, { slots, emit }) {
const onClose = (event) => { const onClose = (event: MouseEvent) => {
event.stopPropagation(); event.stopPropagation();
emit('close'); emit('close');
}; };
const getStyle = () => { const getStyle = (): CSSProperties => {
if (props.plain) { if (props.plain) {
return { return {
color: props.textColor || props.color, color: props.textColor || props.color,
@ -43,12 +45,12 @@ export default createComponent({
}; };
}; };
return () => { const renderTag = () => {
const { show, type, mark, plain, round, size, closeable } = props; const { type, mark, plain, round, size, closeable } = props;
const classes = { mark, plain, round }; const classes: Record<string, boolean> = { mark, plain, round };
if (size) { if (size) {
classes[size] = size; classes[size] = !!size;
} }
const CloseIcon = closeable && ( const CloseIcon = closeable && (
@ -56,15 +58,17 @@ export default createComponent({
); );
return ( return (
<Transition name={closeable ? 'van-fade' : undefined}> <span style={getStyle()} class={bem([classes, type])}>
{show ? ( {slots.default?.()}
<span style={getStyle()} class={bem([classes, type])}> {CloseIcon}
{slots.default?.()} </span>
{CloseIcon}
</span>
) : null}
</Transition>
); );
}; };
return () => (
<Transition name={props.closeable ? 'van-fade' : undefined}>
{props.show ? renderTag() : null}
</Transition>
);
}, },
}); });

11
src/vue-shim.d.ts vendored Normal file
View File

@ -0,0 +1,11 @@
import 'vue';
// TODO
// should be removed after Vue supported component events typing
// see: https://github.com/vuejs/vue-next/issues/1553
// https://github.com/vuejs/vue-next/issues/3029
declare module 'vue' {
interface ComponentCustomProps {
onClick?: (event: MouseEvent) => void;
}
}