gxd-uni-library-editx 1.0.0

package/src/components/XdSwiper/XdSwiper.vue

@@ -0,0 +1,124 @@
+<template>
+  <view class="xd-swiper-wrap" :style="{width: width}">
+    <swiper
+      v-if="list.length > 0"
+      class="swiper xd-swiper-content"
+      :style="{width: width, height: height}"
+      :indicator-dots="indicatorDots && list.length > 1"
+      :autoplay="interval === 0 ? false: true"
+      :interval="interval"
+      :duration="duration"
+      :current="current"
+      @animationfinish="handleAnimationFinish"
+    >
+      <swiper-item v-for="(item,index) in list" :key="index" @click.stop="handleClick(item,index)">
+        <slot :item="item" :index="index">
+         <view class="swiper-item uni-bg-red">{{item}}</view>
+        </slot>
+      </swiper-item>
+    </swiper>
+  </view>
+</template>
+
+<script>
+
+
+  /***
+   * @example https://uniapp.dcloud.io/component/swiper
+   */
+  export default {
+    name: "XdSwiper",
+    props:{
+      list: {
+        type: Array,
+        required: false,
+        default(){
+          return [];
+        },
+      },
+      width: {
+        type: String,
+        default: '750rpx',
+      },
+      height: {
+        type: String,
+        default: '100rpx',
+      },
+
+      current: {
+        type: Number,
+        default: 0,
+      },
+
+      /**
+       * @default 是否显示指示面版
+       * @type boolean
+       */
+      indicatorDots: {
+        type: Boolean,
+        default: true,
+      },
+
+      /**
+       * @description 自动轮播周期时间 0=》 不自动轮播
+       * @type number
+       */
+      interval: {
+        type: Number,
+        default: 10000,
+      },
+
+      /**
+       * @description 动画执行时长
+       * @type number
+       */
+      duration: {
+        type: Number,
+        duration: 500,
+      }
+
+    },
+    data(){
+      return {
+        background: ['color1', 'color2', 'color3'],
+      }
+    },
+    methods: {
+      handleAnimationFinish(item){
+        this.$emit('animationfinish', item);
+      },
+      handleClick(item,index){
+        //console.log('handleClick', item, index);
+        this.$emit('onClickItem', item, index);
+      },
+    }
+  }
+</script>
+
+<style scoped lang="less">
+
+  .xd-swiper-wrap {
+    /* #ifdef H5 */
+    /deep/ uni-image {
+      width: 100%;
+      height: 100%;
+    }
+    /* #endif */
+
+    /* #ifdef MP-WEIXIN */
+    /deep/ swiper-item {
+      image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    /* #endif */
+
+    /deep/ .uni-swiper-slides {
+      width: 100%;
+      height: 100%;
+    }
+
+  }
+
+</style>

package/src/components/XdSwitch/XdSwitch.vue

@@ -0,0 +1,204 @@
+<template>
+  <view>
+    <view
+      class="xd-switch" v-if="!$isIpad"
+      :class="'xd-switch__' +  size"
+      :style="{
+        fontSize:textFontSize + 'rpx',
+      }">
+      <text v-if="isShowText">{{closeText}}</text>
+      <view :class="'xd-switch__body xd-switch__' + size + '-body'">
+        <switch
+          :class="'xd-switch__' + size + '-body-switch ' + (disabled ? 'disabled':'')"
+          :checked="checked"
+          @change="handleChange"
+          :color="uiColor"
+          :disabled="disabled"
+        ></switch>
+      </view>
+      <text v-if="isShowText">{{openText}}</text>
+    </view>
+    <view v-else class="xd-switch" :class="{'xd-switch__ipad': $isIpad}">
+      <text class="xd-switch__ipad-left" v-if="isShowText">{{closeText}}</text>
+      <switch
+        :checked="uiChecked"
+        @change="handleChange"
+        :color="uiColor"
+        :disabled="disabled"
+      ></switch>
+      <text class="xd-switch__ipad-right" v-if="isShowText">{{openText}}</text>
+    </view>
+  </view>
+
+
+</template>
+
+<script>
+  /**
+   * XdButton XdSwitch
+   * @description 选择是否按钮
+   * @tutorial
+   * @property {Boolean} disabled = [true|false]    是否禁用     默认：false
+   * @property {String}  size                       支持尺寸大小（small,mini,lag,default）   默认:default
+   * @property {Boolean}  isShowText                支持显示是否文本    默认：false
+   * @property {Boolean}  checked                   是否选中    默认：true
+   * @property {String}  openText                   选择文本    默认：开 （isShowText=>true 生效）
+   * @property {String}  closeText                  未选择文本    默认：关 （isShowText=>true 生效）
+   * @property {String}  color                      按钮选择颜色   默认：主色调
+   *
+   * @v-model 单向绑定 是否选择通过checked进行绑定
+   *
+   * @event {Function} change                       状态改变事件
+   */
+  export default {
+    name: "XdSwitch",
+    props:{
+      size: {
+        type: String,
+        default: 'default' //small , mini , lag, default,
+      },
+      isShowText: {
+        type: Boolean,
+        default: false
+      },
+      checked:{
+        type: Boolean,
+        default: true
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      openText: {
+        type: String,
+        default: '开'
+      },
+      closeText: {
+        type: String,
+        default: '关'
+      },
+      color: {
+        type: String,
+        default: ''
+      }
+    },
+    data(){
+      return {
+        textFontSize: 34,
+        uiColor: '',
+        value: false,
+        uiChecked: true,
+      }
+    },
+    watch:{
+      checked(value){
+        this.uiChecked = value;
+      },
+    },
+    created(){
+      if (this.size === 'small') this.textFontSize = 24;
+      if (this.size === 'mini') this.textFontSize = 26;
+      if (this.size === 'lag') this.textFontSize = 30;
+      this.uiColor = this.$mainColor;
+      this.uiChecked = this.checked;
+      if(this.color) this.uiColor = this.color;
+      this.$emit('input',this.checked);
+    },
+    methods:{
+      handleChange(e){
+        this.$emit('input', e.detail.value);
+        this.$emit('change', e.detail.value)
+      },
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-switch {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    &__ipad {
+      font-size: @xd-font-size-sm;
+
+      &-left {
+        margin-right: unit(10,rpx);
+      }
+
+      &-right {
+        margin-left: unit(10, rpx);
+      }
+
+    }
+
+    &__body {
+      position: relative;
+
+      & .disabled {
+        opacity: 0.6;
+      }
+    }
+
+
+    &__small {
+      &-body {
+        width: unit(68, rpx);
+        height: unit(30, rpx);
+
+        &-switch {
+          position: absolute;
+          top: unit(-16,rpx);
+          left: unit(-20,rpx);
+          transform: scale(0.5);
+          display: flex;
+        }
+      }
+    }
+
+    &__mini {
+      &-body {
+        width: unit(100, rpx);
+        height: unit(44, rpx);
+
+        &-switch {
+          position: absolute;
+          top: unit(-14, rpx);
+          left: unit(-4, rpx);
+          transform: scale(0.7);
+          display: flex;
+        }
+      }
+    }
+
+    &__lag {
+      &-body {
+        width: unit(120, rpx);
+        height: unit(50, rpx);
+
+        &-switch {
+          position: absolute;
+          top: unit(-6, rpx);
+          left: unit(6, rpx);
+          transform: scale(0.85);
+          display: flex;
+        }
+      }
+    }
+
+    &__default {
+      &-body {
+        width: unit(140, rpx);
+        height: unit(64, rpx);
+
+        &-switch {
+          position: absolute;
+          top: unit(0, rpx);
+          left: unit(16, rpx);
+          transform: scale(1);
+          display: flex;
+        }
+      }
+    }
+  }
+</style>

package/src/components/XdTab/XdTab.vue

@@ -0,0 +1,220 @@
+<template>
+	<view class="xd-tab">
+		<scroll-view
+      class="tab-scroll"
+      scroll-x
+      :scroll-with-animation="true"
+      :scroll-into-view="toView"
+      :style="{
+        width: 'calc(100% - '+ getSettingWidth + 'px)'
+      }"
+
+    >
+			<view class="tab-scroll__box">
+				<view
+          :id="`tab-scroll__index-${index}`"
+          v-for="(item, index) in list"
+          :key="index"
+          :style="{color: activeIndex === index? $mainColor: ''}"
+          class="tab-scroll__item"
+          :class="{active:activeIndex === index}"
+				  @click="clickTab(item, index)"
+        >
+          <view :style="{fontWeight: activeIndex === index? 'bold': 'normal',fontSize: fontSize + 'rpx'}">{{item.name}}</view>
+          <view v-if="showFooterLine" :style="{background: activeIndex === index? $mainColor: ''}"></view>
+        </view>
+			</view>
+		</scroll-view>
+		<view
+      class="tab-icons"
+      @click="handleClickSetting"
+      :style="{width: settingWidth + 'rpx'}"
+      v-if="showSetting"
+    >
+      <xd-font-icon
+        icon="iconshezhi1"
+        color="#666"
+        size="40"
+        width="50"
+        height="50"
+      ></xd-font-icon>
+		</view>
+	</view>
+</template>
+
+<script>
+
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+
+	export default {
+	  name:'XdTab',
+    components: {
+	    XdFontIcon
+    },
+		props: {
+      settingWidth: {
+        type: Number,
+        default: 70
+      },
+	    showSetting: {
+	      type: Boolean,
+        default: false,
+      },
+			list: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			tabIndex: {
+				type: Number,
+				default: 0
+			},
+      showFooterLine: {
+        type: Boolean,
+        default: false
+      },
+
+      fontSize:{
+        type: Number|String, //rpx
+        default: 30
+      },
+      height: {
+        type: Number | String, //rpx
+        default: 90
+      }
+		},
+    data() {
+      return {
+        activeIndex: 0,
+        toView: null
+      };
+    },
+
+    computed:{
+      getSettingWidth(){
+	      if(this.showSetting) {
+	        return 100 * this.$rpxNum;
+        }
+	      return 0;
+      }
+    },
+    mounted(){
+	    this.$nextTick(()=>{
+        this.toView = 'tab-scroll__index-0';
+        setTimeout(() => {
+          this.activeIndex = this.tabIndex;
+          this.toView = `tab-scroll__index-${this.tabIndex}`;
+          this.$emit('onInit', this.list[this.activeIndex], this.activeIndex);
+        }, 50);
+      });
+    },
+
+		methods: {
+			clickTab(item, index) {
+				this.activeIndex = index;
+        this.toView = `tab-scroll__index-${this.activeIndex}`;
+				this.$emit('onTab', item, index);
+			},
+      handleClickSetting(){
+			  this.$emit('onSetting');
+      },
+		}
+	}
+</script>
+
+<style lang="less">
+	.xd-tab {
+		display: flex;
+		border-bottom: 1px #f5f5f5 solid;
+		background-color: #fff;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    overflow: hidden;
+    padding: 0;
+    height: unit(90, rpx);
+
+		.tab-scroll {
+
+			.tab-scroll__box {
+				display: flex;
+				align-items: center;
+				flex-wrap: nowrap;
+				height: unit(90,rpx);
+				box-sizing: border-box;
+
+				.tab-scroll__item {
+					flex-shrink: 0;
+          padding: 0 unit(20, rpx);
+					color: #333;
+					font-size: unit(30, rpx);
+
+					&.active {
+						color: @xd-base-color;
+					}
+				}
+			}
+
+			.tab-scroll__box {
+				display: flex;
+				align-items: center;
+				flex-wrap: nowrap;
+				height: unit(90, rpx);
+				box-sizing: border-box;
+
+				.tab-scroll__item {
+					flex-shrink: 0;
+					padding: 0 unit(20, rpx);
+					color: #333;
+					font-size: unit(30, rpx);
+          position: relative;
+
+
+          & > view:nth-child(2) {
+            position: absolute;
+            bottom: unit(10,rpx);
+            left: unit(20,rpx);
+            right: unit(20, rpx);
+            height: unit(4,rpx);
+          }
+				}
+			}
+		}
+
+		.tab-icons {
+			position: relative;
+			justify-content: flex-end;
+      display: flex;
+			align-items: center;
+
+      height: unit(90, rpx);
+
+      /deep/ span {
+        font-size: unit(40, rpx) !important;
+      }
+
+      .tab-icons-box {
+        width: unit(60, rpx);
+        height: unit(60, rpx);
+        line-height: unit(60, rpx);
+        text-align: center;
+        vertical-align: middle;
+        display: block;
+      }
+
+			&::after {
+				content: '';
+				position: absolute;
+				top: unit(30, rpx);
+				bottom: unit(30, rpx);
+				left: 0;
+				width: 1px;
+				background-color: #ddd;
+			}
+		}
+	}
+
+
+</style>