gxd-uni-library-editx 1.0.0

package/src/components/XdNavTab/XdNavTab.vue

@@ -0,0 +1,147 @@
+<template>
+	<view
+    :class="[styleType === 'text'?'xd-segmented-control--text' : 'xd-segmented-control--button' ]"
+    :style="{ borderColor: styleType === 'text' ? '' : uiActiveColor }"
+    class="xd-segmented-control"
+  >
+		<view
+      v-for="(item, index) in values"
+      :class="[
+       styleType === 'text'?'xd-segmented-control__item--text': 'xd-segmented-control__item--button' ,
+       index === currentIndex&&styleType === 'button'?'xd-segmented-control__item--button--active': '' ,
+        index === 0&&styleType === 'button'?'xd-segmented-control__item--button--first': '',
+        index === values.length - 1&&styleType === 'button'?'xd-segmented-control__item--button--last': '' ]"
+		  :key="index"
+      :style="{
+        backgroundColor: index === currentIndex && styleType === 'button' ? uiActiveColor : '',
+        borderColor: index === currentIndex&&styleType === 'text'||styleType === 'button'?uiActiveColor:'transparent'
+      }"
+		  class="xd-segmented-control__item"
+      @click="_onClick(index)"
+    >
+			<text
+        :style="{color: index === currentIndex
+            ? styleType === 'text'
+              ? uiActiveColor
+              : '#fff'
+            : styleType === 'text'
+              ? '#000'
+              : uiActiveColor}"
+			 class="xd-segmented-control__text">{{ item }}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'XdCustomTab',
+		props: {
+			current: {
+				type: Number,
+				default: 0
+			},
+			values: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			activeColor: {
+				type: String,
+				default: ''
+			},
+			styleType: {
+				type: String,
+				default: 'button'
+			}
+		},
+		data() {
+			return {
+				currentIndex: 0,
+        uiActiveColor: null,
+			}
+		},
+		watch: {
+			current(val) {
+        this.currentIndex = val
+			}
+		},
+		created() {
+			this.currentIndex = this.current;
+			this.uiActiveColor = this.$mainColor;
+			if(this.activeColor) {
+        this.uiActiveColor = this.activeColor;
+      }
+
+		},
+		methods: {
+			_onClick(index) {
+			  if(this.currentIndex === index) return;
+        this.currentIndex = index;
+        this.$emit('clickItem', this.currentIndex)
+			}
+		}
+	}
+</script>
+
+<style lang="less">
+  @name: xd-segmented-control;
+  @radius: 10;
+  .@{name} {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+    height: unit(72,rpx);
+    box-sizing: border-box;
+    overflow: hidden;
+
+
+    &__item {
+      background: @xd-text-color-inverse;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      justify-content: center;
+      align-items: center;
+      height: unit(72, rpx);
+      box-sizing: border-box;
+      position: relative;
+      flex: 1;
+
+
+      &--button {
+        border-style: solid;
+        border-top-width: 1px;
+        border-bottom-width: 1px;
+        border-right-width: 1px;
+        border-left-width: 0;
+
+        &--first {
+          border-left-width: 1px;
+          border-top-left-radius: unit(@radius, rpx);
+          border-bottom-left-radius: unit(@radius, rpx);
+        }
+
+        &--last {
+          border-top-right-radius: unit(@radius, rpx);
+          border-bottom-right-radius: unit(@radius, rpx);
+        }
+      }
+
+      &--text {
+        border-bottom-style: solid;
+        border-bottom-width: 3px;
+      }
+    }
+
+    &__text {
+      font-size: @xd-font-size-base;
+      line-height: unit(40, rpx);
+      text-align: center;
+    }
+
+  }
+
+</style>

package/src/components/XdNoData/XdNoData.vue

@@ -0,0 +1,87 @@
+<template>
+  <view class="xd-nodata" :style="{height: uiHeight}">
+    <view class="xd-nodata-box">
+      <view class="xd-nodata-image" v-if="icon">
+        <image :src="image"></image>
+      </view>
+      <view :style="{color:color}">
+        <slot>当前界面无更多数据了</slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+
+  export default {
+    name: "XdNoData",
+    components:{
+      XdFontIcon
+    },
+    props: {
+      height:{
+        type: String,
+        default: '40vh'
+      },
+
+      icon: {
+        type: Boolean,
+        default: true
+      },
+
+      color: {
+        type: String,
+        default: '#999'
+      },
+    },
+
+    data(){
+      return {
+        paddingBottom: 0,
+        uiHeight: 0,
+
+        image: 'data:image/png;base64,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',
+      }
+    },
+
+    created() {
+      if(this.height) {
+        this.uiHeight = this.height;
+      }else{
+        this.uiHeight = (getApp().globalData.$systemInfo['safeArea']['height'] - 44) + 'px';
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-nodata {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: unit(30,rpx);
+
+    &-box {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+    }
+
+    &-image {
+      width: unit(172,rpx);
+      height: unit(128,rpx);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding-bottom: unit(30,rpx);
+
+
+      & > image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+</style>