✨ feat(自定义组件): 添加 Tag 自定义组件

src/components/normalButton/index.module.scss

@@ -0,0 +1,37 @@
+.button {
+  display: flex;
+  padding: 0 40px;
+  height: 36PX;
+  border: 1px solid $color_main;
+  background-color: #fff;
+  text-align: center;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  &--normal {
+    height: 36PX;
+    font-size: $font_size_medium;
+  }
+  &--small {
+    height: 30PX;
+    font-size: $font_size_min;
+  }
+  &--disabled {
+    opacity: $opacity-disabled;
+  }
+  &--primary {
+    border: 1px solid $color_main;
+    color: $color_main;
+  }
+  &--danger {
+    border: 1px solid $color_danger;
+    color: $color_danger;
+  }
+  &--warning {
+    border: 1px solid $color_warning;
+    color: $color_warning;
+  }
+  &--circle {
+    border-radius: 50px;
+  }
+}

src/components/normalButton/index.tsx

@@ -0,0 +1,43 @@
+import { View } from '@tarojs/components'
+import { FC, ReactNode } from 'react'
+import classnames from 'classnames'
+import styles from './index.module.scss'
+
+type ButtonType = 'primary' | 'danger' | 'warning'
+type ButtonSize = 'normal' | 'small'
+
+interface PropsType {
+  size?: ButtonSize
+  type?: ButtonType
+  circle?: boolean
+  disabled?: boolean
+  children?: ReactNode
+  onClick?: Function
+}
+
+const NormalButton: FC<PropsType> = ({ type = 'primary', size = 'normal', circle = false, disabled = false, children, onClick }) => {
+  const getClassName = () => {
+    const classObject = {
+      [styles[`button--disabled`]]: disabled,
+      [styles[`button--${size}`]]: size,
+      [styles[`button--${type}`]]: type,
+      [styles['button--circle']]: circle,
+    }
+    console.log('classObj==>button', classObject)
+    return classObject
+  }
+
+  const handleClick = (event) => {
+    if (disabled) {
+      return
+    }
+    onClick && onClick(event)
+  }
+
+  return (
+    <View className={classnames(styles['button'], getClassName())} onClick={handleClick}>
+      {children}
+    </View>
+  )
+}
+export default NormalButton

src/components/tag/index.module.scss

@@ -0,0 +1,33 @@
+.tag {
+  display: inline-flex;
+  flex-flow: row nowrap;
+  padding: 0 20px;
+  height: 60px;
+  color: #fff;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  &--normal {
+    font-size: $font_size_medium;
+    height: 40px;
+  }
+  &--small{
+    font-size: $font_size_min;
+    height: 30px;
+  }
+  &--circle{
+    border-radius: 8PX;
+  }
+  &--danger {
+    background-color: $color_danger;
+  }
+  &--primary{
+    background-color: $color_main;
+  }
+  &--warning{
+    background-color: $color_warning;
+  }
+  &--disabled {
+    opacity: $opacity-disabled;
+  }
+}

src/components/tag/index.tsx

@@ -0,0 +1,43 @@
+import { View } from '@tarojs/components'
+import { FC, ReactNode } from 'react'
+import classnames from 'classnames'
+import styles from './index.module.scss'
+
+type TagSize = 'small' | 'normal'
+type TagType = 'primary' | 'danger' | 'warning'
+
+interface PropsType {
+  type?: TagType
+  disabled?: boolean
+  size?: TagSize
+  children?: ReactNode
+  onClick?: Function
+  circle?: boolean
+  customStyle?: React.CSSProperties
+}
+
+const Tag: FC<PropsType> = ({ type = 'primary', size = 'normal', disabled = false, children, onClick, circle = false, customStyle = {} }) => {
+  const handleClick = (event) => {
+    if (disabled) {
+      return
+    }
+    onClick && onClick(event)
+  }
+
+  const getClassName = () => {
+    const classObject = {
+      [styles['tag--disabled']]: disabled,
+      [styles[`tag--${size}`]]: size,
+      [styles[`tag--${type}`]]: type,
+      [styles['tag--circle']]: circle,
+    }
+    console.log('classObj==>', classObject)
+    return classObject
+  }
+  return (
+    <View className={classnames(styles.tag, getClassName())} style={customStyle} onClick={handleClick}>
+      {children}
+    </View>
+  )
+}
+export default Tag