feat: 基础组件、视图组件

package.json

@@ -20,7 +20,8 @@
     "@tarojs/taro-h5": "latest",
     "@tarojs/taro-weapp": "latest",
     "lodash": "^4.17.10",
-    "nervjs": "^1.3.0"
+    "nervjs": "^1.3.0",
+    "prop-types": "^15.6.2"
   },
   "devDependencies": {
     "@tarojs/cli": "latest",

src/app.js

@@ -12,8 +12,13 @@ class App extends Component {
       'pages/action/progress/index',
       'pages/action/action-sheet/index',
       'pages/action/activity-indicator/index',
-      'pages/view/icon/index',
-      'pages/view/button/index',
+      'pages/basic/icon/index',
+      'pages/basic/button/index',
+      'pages/view/noticebar/index',
+      'pages/view/badge/index',
+      'pages/view/tag/index',
+      'pages/view/avatar/index',
+      'pages/view/article/index',
     ],
     window: {
       backgroundTextStyle: 'light',

src/components/article/index.js

@@ -0,0 +1,81 @@
+import Taro from "@tarojs/taro"
+import { View, Image, Text } from "@tarojs/components"
+import PropTypes from 'prop-types';
+
+import './index.scss'
+
+const SIZE_CLASS = {
+  large: 'large',
+  normal: 'normal',
+  small: 'small',
+}
+
+// const TYPE_CLASS = {
+//   primary: 'primary',
+// }
+
+
+export default class Atarticle extends Taro.Component {
+  constructor() {
+    super(...arguments)
+    this.state = {
+
+    }
+  }
+
+  onClick() {
+  }
+
+  render(){
+    let {
+    } = this.props
+    let rootClassName = ['at-article']
+    let sizeClass = SIZE_CLASS[size] || ''
+    let circleClass = circle? 'at-article--circle': ''
+
+    rootClassName.push(`at-article--${sizeClass}`, circleClass)
+    rootClassName = rootClassName.filter(str => str != '')
+console.log('=====', this.props.children)
+
+    let {children} = this.props
+    let letter;
+    if (typeof children == 'string') {
+      letter = children[0]
+    }
+    return (
+      <View className={rootClassName}>
+        <View className="at-article__h1"></View>
+        <View className="at-article__info">
+          <Text className="at-article__info-date"></Text><Text className="at-article__info-author"></Text>
+        </View>
+        <View className="at-article__content">
+          <View className="at-article__section">
+            <View className="at-article__h2"></View>
+
+            <View className="at-article__h3"></View>
+            <View className="at-article__paragraph"></View>
+            <Image className="at-article__image" src="" />
+
+            <View className="at-article__h3"></View>
+            <View className="at-article__paragraph"></View>
+            <Image className="at-article__image" src="" />
+          </View>
+        </View>
+
+
+      </View>
+    )
+  }
+}
+
+Atarticle.defaultProps = {
+  size: 'normal',
+  circle: false,
+  image: '',
+}
+
+Atarticle.propTypes = {
+  size: PropTypes.oneOf(['large', 'normal', 'small']),
+  circle: PropTypes.bool,
+  image: PropTypes.string,
+};

src/components/article/index.scss

@@ -0,0 +1,33 @@
+
+.at-avatar {
+    height: 100px;
+    width: 100px;
+    overflow: hidden;
+    box-shadow: 0 0 50px 0 rgba(0,0,0,0.05);
+    border-radius: 8px;
+    font-size: 40px;
+    line-height: 100px;
+    color: #fff;
+    background: #D8D8D8;
+    &__img {
+        width: 100%;
+        height: 100%;
+    }
+    &--large {
+        width: 120px;
+        height: 120px;
+        font-size: 48px;
+        line-height: 120px;
+    }
+    &--small {
+        height: 80px;
+        width: 80px;
+        font-size: 32px;
+        line-height: 80px;
+    }
+    &--circle {
+        border-radius: 100px;
+        overflow: hidden;
+        background-clip: border-box;
+    }
+}

src/components/avatar/index.js

@@ -0,0 +1,67 @@
+import Taro from "@tarojs/taro"
+import { View, Image, Text } from "@tarojs/components"
+import PropTypes from 'prop-types';
+
+import './index.scss'
+
+const SIZE_CLASS = {
+  large: 'large',
+  normal: 'normal',
+  small: 'small',
+}
+
+// const TYPE_CLASS = {
+//   primary: 'primary',
+// }
+
+
+export default class AtAvatar extends Taro.Component {
+  constructor() {
+    super(...arguments)
+    this.state = {
+
+    }
+  }
+
+  onClick() {
+  }
+
+  render(){
+    let {
+      size,
+      circle,
+      image,
+    } = this.props
+    let rootClassName = ['at-avatar']
+    let sizeClass = SIZE_CLASS[size] || ''
+    let circleClass = circle? 'at-avatar--circle': ''
+
+    rootClassName.push(`at-avatar--${sizeClass}`, circleClass)
+    rootClassName = rootClassName.filter(str => str != '')
+console.log('=====', this.props.children)
+
+    let {children} = this.props
+    let letter;
+    if (typeof children == 'string') {
+      letter = children[0]
+    }
+    return (
+      <View className={rootClassName}>
+        {letter ? <Text className="at-avatar__text">{letter}</Text>: <Image className="at-avatar__img" src={image} />}
+
+      </View>
+    )
+  }
+}
+
+AtAvatar.defaultProps = {
+  size: 'normal',
+  circle: false,
+  image: '',
+}
+
+AtAvatar.propTypes = {
+  size: PropTypes.oneOf(['large', 'normal', 'small']),
+  circle: PropTypes.bool,
+  image: PropTypes.string,
+};

src/components/avatar/index.scss

@@ -0,0 +1,33 @@
+
+.at-avatar {
+    height: 100px;
+    width: 100px;
+    overflow: hidden;
+    box-shadow: 0 0 50px 0 rgba(0,0,0,0.05);
+    border-radius: 8px;
+    font-size: 40px;
+    line-height: 100px;
+    color: #fff;
+    background: #D8D8D8;
+    &__img {
+        width: 100%;
+        height: 100%;
+    }
+    &--large {
+        width: 120px;
+        height: 120px;
+        font-size: 48px;
+        line-height: 120px;
+    }
+    &--small {
+        height: 80px;
+        width: 80px;
+        font-size: 32px;
+        line-height: 80px;
+    }
+    &--circle {
+        border-radius: 100px;
+        overflow: hidden;
+        background-clip: border-box;
+    }
+}

src/components/badge/index.js

@@ -0,0 +1,50 @@
+
+import PropTypes from 'prop-types';
+import Taro from "@tarojs/taro"
+import { View, Text } from "@tarojs/components"
+
+import './index.scss'
+
+
+export default class AtBadge extends Taro.Component {
+  constructor() {
+    super(...arguments)
+    this.state = {}
+  }
+
+  formatValue(value, maxValue) {
+    if (isNaN(value)) {
+      return value
+    } else {
+      let numValue = +value
+      return numValue > maxValue? `${maxValue}+`: numValue
+    }
+  }
+
+  render(){
+    let {
+      dot,
+      value,
+      maxValue,
+    } = this.props
+    let rootClassName = ['at-badge']
+
+    return (
+      <View className={rootClassName}>
+        {this.props.children}
+        {dot ? <View className="at-badge__dot"></View>: <View className="at-badge__num">{this.formatValue(value, maxValue)}</View>}
+      </View>
+    )
+  }
+}
+
+AtBadge.defaultProps = {
+  dot: false,
+  value: '',
+  maxValue: 99,
+}
+
+AtBadge.propTypes = {
+  dot: PropTypes.bool,
+  maxValue: PropTypes.number,
+};

src/components/badge/index.scss

@@ -0,0 +1,35 @@
+
+@import "../../style/mixins.scss";
+
+.at-badge {
+    position: relative;
+    display: inline-block;
+    font-size: 0;
+    vertical-align: middle;
+    &__dot {
+        position: absolute;
+        right: -10px;
+        top: -10px;
+        width: 20px;
+        height: 20px;
+        border-radius: 20px;
+        overflow: hidden;
+        background: #FF4949;
+        box-shadow: 0 4px 8px 0 rgba(233,59,61,0.20);
+    }
+    &__num {
+        font-size: 20px;
+        color: #fff;
+        height: 28px;
+        line-height: 28px;
+        position: absolute;
+        right: 0;
+        top: -14px;
+        transform: translate(50%, 0);
+        padding: 0 10px;
+        border-radius: 20px 20px 20px 0;
+        overflow: hidden;
+        background: #FF4949;
+        box-shadow: 0 4px 8px 0 rgba(233,59,61,0.20);
+    }
+}

src/components/button/index.js

@@ -6,7 +6,7 @@ import './index.scss'
 
 const SIZE_CLASS = {
   normal: 'normal',
-  large: 'large',
+  // large: 'large',
   small: 'small',
 }
 
@@ -24,9 +24,9 @@ export default class AtButton extends Taro.Component {
     }
   }
 
-  onClick(e) {
+  onClick() {
     if (!this.props.disabled && this.props.onClick) {
-      this.props.onClick(e)
+      this.props.onClick(...arguments)
     }
   }
 
@@ -35,6 +35,7 @@ export default class AtButton extends Taro.Component {
       size = 'normal',
       type = '',
       icon = '',
+      circle = false,
       active = false,
       loading = false,
       disabled = false,
@@ -44,10 +45,11 @@ export default class AtButton extends Taro.Component {
     let disabledClass = disabled? 'at-button--disabled': ''
     let typeClass = TYPE_CLASS[type]? `at-button--${type}`: ''
     let activeClass = active? 'at-button--active': ''
+    let circleClass = circle? 'at-button--circle': ''
     // let loadingClass = loading? 'at-button--loading': ''
     // let iconClass = loading? 'at-button--icon': ''
 
-    rootClassName.push(`at-button--${sizeClass}`, disabledClass, typeClass, activeClass)
+    rootClassName.push(`at-button--${sizeClass}`, typeClass, activeClass, circleClass, disabledClass)
     rootClassName = rootClassName.filter(str => str != '')
     console.log('loading====', loading)
     return (

src/components/button/index.scss

@@ -28,4 +28,16 @@
         color: rgba(92, 137, 228, 1);
         border: 2px solid rgba(92, 137, 228, 1);
     }
+    &--small {
+        width: 120px;
+        height: 60px;
+        line-height: 60px;
+        display: inline-block;
+        font-size: 28px;
+    }
+    &--circle {
+        border-radius: 100px;
+        overflow: hidden;
+        background-clip: border-box;
+    }
 }