gxd-uni-library-editx 1.0.0

package/src/components/XdBar/XdBar.vue

@@ -0,0 +1,339 @@
+<template>
+  <view class="xd-custom-bar" v-if="initDone">
+    <view
+      class="xd-custom-bar__fixed"
+      :style="{
+        backgroundColor: uiBgImage ? '': uiBgColor,
+        backgroundImage: 'url('+ uiBgImage +')',
+        height: barNavHeight + barStatusHeight  + 'rpx'
+      }"
+    >
+      <!-- 状态栏 -->
+      <view :style="{ height: barStatusHeight+'rpx'}"></view>
+      <!-- 状态栏 -->
+      <!-- 导航栏内容 -->
+      <view
+        class="xd-custom-bar__fixed-content"
+        :style="{
+          height: barNavHeight + 'rpx',
+          lineHeight: barNavHeight + 'rpx',
+          width : barWidth + 'px',
+          paddingLeft: isSlotTopBar ? 0: (paddingLeftAndright + 'px')
+         }"
+      >
+        <!--返回上一个界元素-->
+        <view class="xd-custom-bar__fixed-content-icon" @click.stop="back" v-if="!isSlotTopBar">
+          <xd-font-icon
+            v-if="noPrevToIndex && showBack && isPrev !== null"
+            :icon="isPrev ? 'iconxiangzuo_xian' : 'iconshouye_mian'"
+            :color="uiTextColor"
+            :size="uiIconSize"
+          ></xd-font-icon>
+        </view>
+        <!--返回上一个界元素-->
+        <view class="xd-custom-bar__fixed-content-slot" v-if="isSlotTopBar">
+          <slot>{{title}}</slot>
+        </view>
+        <template v-else>
+          <view
+            v-if="textAlign === 'left'"
+            class="xd-custom-bar__fixed-content-left"
+            :style="{
+              color: uiTextColor,
+              fontSize: uiFontSize + 'rpx'
+            }">{{title}}</view>
+          <view
+            v-else
+            class="xd-custom-bar__fixed-content-center"
+            :style="{
+              color: uiTextColor,
+              width: barWidth - (paddingLeftAndright + menuButtonInfoWidth) + 'px',
+              fontSize: uiFontSize + 'rpx'
+            }">{{title}}</view>
+        </template>
+        <view class="xd-custom-bar__fixed-content-icon" v-if="paddingRight && !isSlotTopBar"></view>
+      </view>
+      <!-- 导航栏内容 -->
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import {Base64} from 'js-base64';
+
+  /**
+   * XdBar 全局UI
+   * @description header tabbar 当前组件一定要放在页面跟节点下（不可放在组件当中使用，应该是编译问题导致）
+   * @tutorial
+   * @property {String}  title             标题名称（可选）默认：''
+   * @property {Boolean}  showBack         是否显示返回按钮（可选）默认：true
+   * @property {String}  bgColor           背景颜色，默认使用全局主色调（可选）默认：主色掉
+   * @property {String}  bgImage           背景图片，默认无
+   * @property {String}  color             文字颜色（可选）使用主色调时候文字颜色为 #333
+   *
+   * @event {Function} click               按钮点击事件e
+   */
+
+  export default {
+    name: "XdBar",
+    components: {
+      XdFontIcon
+    },
+    props: {
+      barNavHeight: {
+        type: Number,
+        default: 100
+      },
+
+      isSlotTopBar: {
+        type: Boolean,
+        default: false
+      },
+
+      barStatusHeight:{
+        type: Number,
+        default: 0
+      },
+      title: {
+        type: String,
+        default: ''
+      },
+      showBack: {
+        type: Boolean,
+        default: true
+      },
+      bgColor: {
+        type: String,
+        default: ''
+      },
+      bgImage: {
+        type: String,
+      },
+      color: {
+        type: String,
+        default: '#fff'
+      },
+      textAlign: {
+        type: String,
+        default: 'center' //center,left
+      }
+    },
+    data() {
+      return {
+        initDone: false, //是否加载完成
+        isIpad: null,
+
+        //返回键显示相关数据
+        isPrev: null, //是否可以返回页面
+        noPrevToIndex: false, //是否设置无返回页面是否跳转到首页
+        xdRedirectUrl: null, //返回上一个地址
+
+        //胶囊的计算
+        paddingLeftAndright: 0, //px 计算左右padding默认值
+        menuButtonInfoWidth: 0, //胶囊宽度
+        barWidth: 0, //bar宽度
+        paddingRight: true,
+
+        //样式风格
+        uiBgColor: '', //自定义背景颜色
+        uiTextColor: '#fff', //自定义标题文本与返回ICON颜色
+        uiBgImage:'', //背景图片
+        uiIconSize: 40,
+        uiFontSize: 34,
+      };
+    },
+    created(){
+      this.noPrevToIndex = this.$settings['noPrevPageToIndex'] === undefined ?
+        false : this.$settings['noPrevPageToIndex'];
+
+      //背景颜色设置
+      this.uiBgColor = this.bgColor || this.$mainColor;
+      if(this.color) this.uiTextColor = this.color;
+      this.uiBgImage = this.bgImage;
+
+      /**
+       * @description 设置样式
+       */
+      this.setNavBar();
+      uni.onWindowResize(() => {
+        this.setNavBar()
+      });
+    },
+    mounted() {
+      this.checkPrevPages();
+    },
+    methods: {
+
+      /**
+       * @description 检查上一个页面
+       */
+      checkPrevPages(){
+        //判断是否有上一个页面
+        let pages = getCurrentPages();//当前页
+        let beforePageStatus = false;
+        if (pages.length >= 2) {
+          beforePageStatus = true;
+        }
+
+        //有项目内跳转地址
+        let xdRedirect = false;
+        if(this.$xdUniHelper.getParmater('xdRedirect')) {
+          try {
+            if(Base64.decode(this.$xdUniHelper.getParmater('xdRedirect'))) xdRedirect = true;
+          } catch (e) {
+            xdRedirect = false;
+          }
+        }
+
+        //项目外地址
+        let xdProjectCallback = false;
+        if (this.$xdUniHelper.getParmater('xdProjectCallback')) {
+          try {
+            if (Base64.decode(this.$xdUniHelper.getParmater('xdProjectCallback'))) xdProjectCallback = true;
+          } catch (e) {
+            xdProjectCallback = false;
+          }
+        }
+        this.isPrev = beforePageStatus || xdRedirect || xdProjectCallback;
+      },
+
+      setNavBar() {
+        // 获取手机系统信息
+        const info = uni.getSystemInfoSync();
+
+        //导航宽度
+        this.barWidth = info['safeArea'].width;
+
+        // 获取胶囊的位置
+        // #ifndef H5 || APP-PLUS || MP-ALIPAY
+        const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+        this.paddingLeftAndright = info['safeArea'].width - menuButtonInfo.right;
+        this.menuButtonInfoWidth = menuButtonInfo.width;
+        this.barWidth = info['safeArea'].width - (this.paddingLeftAndright + this.menuButtonInfoWidth);
+        this.paddingRight = false;
+        // #endif
+
+
+        this.initDone = true;
+      },
+
+      back(){
+        if(!this.showBack) return;
+
+        //临时兼容
+        if(this.noPrevToIndex === 'back') {
+          //其他正常跳转
+          this.$emit('click');
+          this.$emit('back');
+          return;
+        }
+
+        //有上一个路径的返回到上一个路径
+        if(this.$xdUniHelper.getParmater('xdRedirect')) {
+          try {
+            this.$xdUniHelper.redirectTo({
+              url: Base64.decode(this.$xdUniHelper.getParmater('xdRedirect'))
+            }, false);
+            return;
+          }catch (e) {}
+        }
+
+
+        //有上一个路径的返回到上一个路径
+        if (this.$xdUniHelper.getParmater('xdProjectCallback')) {
+          try {
+            window.location.href = Base64.decode(this.$xdUniHelper.getParmater('xdProjectCallback'));
+            return;
+          } catch (e) {
+          }
+        }
+
+
+        //无上一个页面返回到首页
+        if(this.noPrevToIndex && !this.isPrev) {
+          this.$xdUniHelper.redirectTo({
+            url: this.$settings.index
+          }, false);
+          return;
+        }
+
+
+        //未开启无返回页面跳首页功能不处理
+        if (!this.noPrevToIndex && !this.isPrev) return;
+
+        //其他正常跳转
+        this.$emit('click');
+        this.$emit('back');
+      },
+    }
+  }
+</script>
+
+<style lang="less">
+  .xd-custom-bar {
+    overflow: hidden;
+
+    &__fixed {
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 99;
+      width: 100%;
+      background-size: 100%;
+      background-position: top center;
+      background-repeat: no-repeat;
+
+      &-content {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        box-sizing: border-box;
+
+        &-slot {
+          width: 100%;
+          display: block;
+        }
+
+        &-icon {
+          display: flex;
+          width: 30px;
+          height: 100%;
+          padding-left: 5px;
+          justify-content: flex-start;
+          align-items: center;
+          flex-shrink: 0;
+
+          & > view {
+            font-size: 20px;
+            color: #fff;
+            text-align: center;
+            vertical-align: middle;
+          }
+        }
+
+        &-left {
+          flex: 1;
+          width: 0;
+          & > view:last-child {
+            .uni-max-cut(1, 90);
+            .uni-break-word();
+          }
+        }
+
+        &-center {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          text-align: center;
+          & > view:last-child {
+            .uni-max-cut(1, 90);
+            .uni-break-word();
+          }
+        }
+      }
+    }
+
+  }
+</style>
+

package/src/components/XdButton/XdButton.vue

@@ -0,0 +1,288 @@
+<template>
+  <button
+    :disabled="disabled"
+    @click.stop="handleClick"
+    :style="{
+      opacity: disabled ? 0.4 : 1,
+      background: getBgColor(uiType),
+      fontSize: getInfo(uiSize,'fontSize','btnFontSieList'),
+      height: getInfo(uiSize,'height','btnHeightList'),
+      lineHeight: getInfo(uiSize,'height','btnHeightList'),
+      borderRadius: getRadius(uiSize),
+      color: getTextColor,
+      width: width ? width : 'auto',
+      boxShadow: getBoxShadow,
+      border: uiType === 'default'? '2rpx solid #dcdfe6!important': 0,
+      padding: '0 ' + btnPaddingtList[uiSize] + 'rpx'
+    }"
+    :class="getClassName"
+    type="default"
+    plain="true"
+  ><slot>按钮</slot></button>
+</template>
+
+<script>
+  import helper from "@/utils/helper";
+  import {
+    getParentsStyle, //获取页面风格单个键值值
+    getParentsStyles //获取页面风格列表
+  } from '@/utils/xd.base';
+  
+  /**
+   * XdButton 按钮UI
+   * @description 按钮组件
+   * @tutorial
+   * @property {Boolean} disabled                   是否禁用 默认值：false
+   * @property {String} bgColor                     按钮背景颜色 （可选）默认：空
+   * @property {String} color                       按钮文字颜色 （可选） 默认：#fff
+   * @property {String} width                       按钮宽度 （可选）默认：空
+   * @property {String}  type                       按钮颜色类型（primary,default,subPrimary,danger,info,warning,success）
+   * @property {String|Number} fontSize             按钮文字大小 （可选）默认：空
+   * @property {String}  radius                     按钮圆角 （可选）默认：空
+   * @property {String}  size                       按钮大小  default（默认）, large（最大）, medium（中）, small（小）, 'mini'
+   * @property {String|null} boxShadow              启动文字阴影功能，其值与css原生属性保存一直，例如：0,0,10px rgba(0,0,0,0.5) null:关闭阴影效果
+   * @property {String} gradualColor                启动ICON线性渐变 其值与css原生属性保存一直, 例如：rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%
+   * @property {Boolean} isGradual                  是否启用线性渐变 默认值：false
+   * @property {String} gradualType                 线性渐变类型  默认值：to right （to right 左右），（to right 左右），（135deg  左上到右下），（45deg 左下到右上（角度））
+   * @event {Function} click                        按钮点击事件e
+   */
+
+  export default {
+    name: "XdButton",
+    props:{
+      bgColor: {
+        type: String,
+        default: ''
+      },
+
+      color: {
+        type: String,
+        default: '#fff'
+      },
+
+      disabled:{
+        type: Boolean,
+        default: false
+      },
+
+      width: {
+        type: String,
+        default: ''  //rpx
+      },
+
+      type: {
+        type: String,
+        default: 'default', //primary,default,subPrimary,danger,info,warning,success
+      },
+
+      fontSize: {
+        type: String|Number,
+        default: '' , //rpx
+      },
+
+      radius: {
+        type: String,
+        default: ''//rpx
+      },
+
+      size: {
+        type: String,
+        default: 'medium' //'default', 'large', 'medium', 'small', 'mini'
+      },
+
+      /**仅支持线性渐变******/
+      boxShadow: {
+        type: String|null,
+        default: ''
+      },
+
+      //rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%
+      gradualColor: {
+        type: String,
+        default: 'rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%',
+      },
+
+      isGradual: {
+        type: Boolean,
+        default: false,
+      },
+
+      gradualType: {
+        type: String,
+        //to right 左右
+        //to bottom 上下
+        //135deg  左上到右下（角度）
+        //45deg 左下到右上（角度）
+        default: 'to bottom',
+      }
+      /**仅支持线性渐变******/
+    },
+    data(){
+      return {
+        uiType: 'primary',
+        uiSize: 'default',
+        btnTypeList: ['primary','default', 'subPrimary', 'danger', 'info', 'warning', 'success', 'text'],
+        btnSizeList: ['default', 'large' ,'medium', 'small', 'mini'],
+        btnHeightList: {
+          default: 100,
+          large: 110,
+          medium: 80,
+          small: 60,
+          mini: 50,
+        },
+        btnPaddingtList: {
+          default: 75,
+          large: 82.5,
+          medium: 60,
+          small: 45,
+          mini: 30,
+        },
+        btnFontSieList: {
+          default: 36,
+          large: 40,
+          medium: 36,
+          small: 26,
+          mini: 24,
+        },
+        btnShadowList: {
+          default: 10,
+          large: 10,
+          medium: 8,
+          small: 6,
+          mini: 4,
+        },
+        btnOpacityList: {
+          default: .45,
+          large: .40,
+          medium: .25,
+          small: .25,
+          mini: .45,
+        },
+        btnBtnColor: {
+          subPrimary:'',
+          primary: '#EC4D71',
+          default: '#fff',
+          danger: '#ec5c5c',
+          info:'#B8B7BE',
+          warning: '#E6A23C',
+          success:'#67C23A',
+          text: '#F5F5F5'
+        }
+      }
+    },
+    computed: {
+      getClassName() {
+        let btn = `xd-button xd-button__${this.uiType} xd-button-size__${this.size}`;
+        if(this.disabled) {
+          btn = `${btn} xd-button__disabled`;
+        }
+        return btn
+      },
+
+      getTextColor(){
+        if(this.uiType === 'default') return '#333';
+        if(this.uiType === 'text') return  '#B8B7BE';
+        return this.color || '#fff';
+      },
+
+      getBoxShadow(){
+        if(this.uiType === 'default' || this.uiType === 'text'|| this.boxShadow === null) return `0 0 0 rgba(0,0,0,0)`
+        let color = this.$color(this.getColor(this.uiType)).alpha(0.4).toString();
+        if(this.boxShadow) return this.boxShadow;
+        return `0 ${this.btnShadowList[this.uiSize]}rpx ${this.btnShadowList[this.uiSize] - 2}rpx  ${color}`;
+      },
+    },
+    async created(){
+      let style = await getParentsStyles(this.$parent);
+      this.btnBtnColor = {
+        subPrimary: style.$subMainColor,
+        primary: style.$mainColor,
+        default: style.$defaultColor,
+        danger: style.$dangerColor,
+        info: style.$infoColor,
+        warning: style.$warningColor,
+        success: style.$successColor,
+        text: '#333'
+      };
+      
+      
+      this.uiType  = this.existKey(this.type);
+      this.uiSize = this.existKey(this.size, 'btnSizeList');
+      this.$set(this.btnBtnColor, 'primary', style.$subMainColor);
+      this.$set(this.btnBtnColor, 'subPrimary', this.$color(this.btnBtnColor.primary).alpha(0.4).lighten(0.35).hex());
+    },
+    methods:{
+      handleClick(e){
+        this.$emit('click',e);
+        this.$emit('tap', e);
+      },
+
+      getInfo(type, dataKey, list='btnHeightList'){
+        if (this[dataKey]) {
+          let temp = this[dataKey];
+          if (helper.checkVarType(this[dataKey]) === 'string') {
+            temp = Number(this[dataKey]);
+          }
+          return temp + 'rpx';
+        }
+        return this[list][type] + 'rpx'
+      },
+
+      getRadius(type){
+        if(this.radius) return this.radius;
+        if(this.uiSize === 'large') return  '20rpx';
+        return Math.floor(this.btnHeightList[type] / 2) + 'rpx';
+      },
+
+      getColor(){
+        let bgc = '';
+        if (this.isGradual && this.gradualColor && this.gradualType) {
+          let reg = /(rgba\((.*?)\))/g;
+          let arr = this.gradualColor.match(reg);
+          if(arr === null){
+            let strArr = this.gradualColor.split(',');
+            strArr = strArr[strArr.length - 1];
+            return  strArr.split(' ').filter(item=>{
+              return !!item;
+            })[0];
+          }
+          else {
+            return arr[arr.length - 1];
+          }
+
+        }
+        return  this.bgColor || bgc || this.btnBtnColor[this.uiType];
+      },
+
+      getBgColor(){
+        let bgc = this.getColor();
+        if (this.isGradual && this.gradualColor && this.gradualType) {
+          bgc =`linear-gradient(${this.gradualType}, ${this.gradualColor})`;
+        }
+        return bgc;
+      },
+
+      existKey(key, type='btnTypeList'){
+        if(this[type].includes(key)) return key;
+        else return this[type][0];
+      },
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .xd-button {
+    z-index: 0;
+    padding: 0 unit(50, rpx);
+    border: 0 !important;
+    opacity: 1;
+    transition: opacity .1s;
+    box-sizing: border-box;
+
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+
+
+</style>