gxd-uni-library-editx 1.0.0

package/src/components/XdNoticeBar/XdNoticeBar.vue

@@ -0,0 +1,501 @@
+<template>
+  <view v-if="show" class="uni-noticebar" :style="{ backgroundColor: backgroundColor }" @click="onClick">
+    <!-- #ifdef MP-ALIPAY -->
+    <view
+      v-if="showClose === true || showClose === 'true'"
+      class="uni-noticebar-close uni-cursor-point"
+      @click="close"
+    >
+      <xd-font-icon
+        :color="color"
+        size="20"
+        icon="iconguanbi2"
+        width="30"
+        height="30"
+      ></xd-font-icon>
+    </view>
+    <view
+      v-if="showIcon === true || showIcon === 'true'"
+      class="uni-noticebar-icon"
+    >
+      <xd-font-icon
+        icon="icontongzhi"
+        :color="color"
+        size="30"
+        width="30"
+        height="30"
+      ></xd-font-icon>
+    </view>
+    <!-- #endif -->
+    <!-- #ifndef MP-ALIPAY -->
+    <xd-font-icon
+      class="uni-noticebar-icon"
+      v-if="showIcon === true || showIcon === 'true'"
+      icon="icontongzhi"
+      :color="color"
+      size="30"
+      width="30"
+      height="30"
+    ></xd-font-icon>
+    <!-- #endif -->
+    <view
+      ref="textBox"
+      class="uni-noticebar__content-wrapper"
+      :class="{
+        'uni-noticebar__content-wrapper--scrollable':scrollable,
+        'uni-noticebar__content-wrapper--single':!scrollable && (single || moreText)
+      }">
+      <view
+        :id="elIdBox"
+        class="uni-noticebar__content"
+        :class="{
+          'uni-noticebar__content--scrollable':scrollable,
+          'uni-noticebar__content--single':!scrollable && (single || moreText)
+        }">
+        <view
+          :id="elId" ref="animationEle"
+          class="uni-noticebar__content-text"
+          :class="{
+            'uni-noticebar__content-text--scrollable':scrollable,
+            'uni-noticebar__content-text--single':!scrollable && (single || moreText)
+          }"
+          :style="{
+            color:color,
+            width:wrapWidth+'px',
+            'animationDuration': animationDuration,
+            '-webkit-animationDuration': animationDuration ,
+            animationPlayState: webviewHide?'paused':animationPlayState,
+            '-webkit-animationPlayState':webviewHide?'paused':animationPlayState,
+            animationDelay: '1s',
+            '-webkit-animationDelay':'1s'
+          }">
+          <slot>
+            <view>1. 本插件需要申请的系统权限列表：</view>
+            <view>2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：</view>
+            <view>3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：</view>
+          </slot>
+        </view>
+      </view>
+    </view>
+    <xd-font-icon
+      v-if="showClose === true || showClose === 'true'"
+      :color="color"
+      size="20"
+      icon="iconguanbi2"
+      @click="close"
+      width="30"
+      height="30"
+    ></xd-font-icon>
+    <view
+      v-if="showGetMore === true || showGetMore === 'true'"
+      class="uni-noticebar__more uni-cursor-point"
+      @click="clickMore"
+    >
+      <text v-if="moreText" :style="{ color: moreColor }" class="uni-noticebar__more-text">{{ moreText }}</text>
+      <xd-font-icon
+        :color="color"
+        size="20"
+        icon="iconjiantou"
+        width="30"
+        height="30"
+      ></xd-font-icon>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+
+  // #ifdef APP-NVUE
+  const dom = weex.requireModule('dom');
+  const animation = weex.requireModule('animation');
+  // #endif
+
+  /**
+   * XdNoticeBar 自定义导航栏
+   * @description 通告栏组件
+   * @tutorial https://ext.dcloud.net.cn/plugin?id=30
+   * @property {Number} speed 文字滚动的速度，默认100px/秒
+   * @property {String} text 显示文字
+   * @property {String} backgroundColor 背景颜色
+   * @property {String} color 文字颜色
+   * @property {String} moreColor 查看更多文字的颜色
+   * @property {String} moreText 设置“查看更多”的文本
+   * @property {Boolean} single = [true|false] 是否单行
+   * @property {Boolean} scrollable = [true|false] 是否滚动，为true时，NoticeBar为单行
+   * @property {Boolean} showIcon = [true|false] 是否显示左侧喇叭图标
+   * @property {Boolean} showClose = [true|false] 是否显示左侧关闭按钮
+   * @property {Boolean} showGetMore = [true|false] 是否显示右侧查看更多图标，为true时，NoticeBar为单行
+   * @event {Function} click 点击 NoticeBar 触发事件
+   * @event {Function} close 关闭 NoticeBar 触发事件
+   * @event {Function} getmore 点击”查看更多“时触发事件
+   */
+
+  export default {
+    name: 'XdNoticeBar',
+    components: {
+      XdFontIcon
+    },
+    props: {
+      text: {
+        type: String,
+        default: ''
+      },
+      moreText: {
+        type: String,
+        default: ''
+      },
+      backgroundColor: {
+        type: String,
+        default: '#fffbe8'
+      },
+      speed: {
+        // 默认1s滚动100px
+        type: Number,
+        default: 50
+      },
+      color: {
+        type: String,
+        default: '#de8c17'
+      },
+      moreColor: {
+        type: String,
+        default: '#999999'
+      },
+      single: {
+        // 是否单行
+        type: [Boolean, String],
+        default: false
+      },
+      scrollable: {
+        // 是否滚动，添加后控制单行效果取消
+        type: [Boolean, String],
+        default: false
+      },
+      showIcon: {
+        // 是否显示左侧icon
+        type: [Boolean, String],
+        default: false
+      },
+      showGetMore: {
+        // 是否显示右侧查看更多
+        type: [Boolean, String],
+        default: false
+      },
+      showClose: {
+        // 是否显示左侧关闭按钮
+        type: [Boolean, String],
+        default: false
+      }
+    },
+    data() {
+      const elId = `Uni_text_${Math.ceil(Math.random() * 10e5).toString(36)}`
+      const elIdBox = `Uni_box_${Math.ceil(Math.random() * 10e5).toString(36)}`
+      return {
+        textWidth: 0,
+        boxWidth: 0,
+        wrapWidth: '',
+        webviewHide: false,
+        // #ifdef APP-NVUE
+        stopAnimation: false,
+        // #endif
+        elId: elId,
+        elIdBox: elIdBox,
+        show: true,
+        animationDuration: 'none',
+        animationPlayState: 'paused',
+        animationDelay: '0s'
+      }
+    },
+    created() {
+      // #ifdef APP-PLUS
+      var pages = getCurrentPages();
+      var page = pages[pages.length - 1];
+      var currentWebview = page.$getAppWebview();
+      currentWebview.addEventListener('hide', () => {
+        this.webviewHide = true
+      })
+      currentWebview.addEventListener('show', () => {
+        this.webviewHide = false
+      })
+      // #endif
+
+      this.$nextTick(() => {
+        this.initSize()
+      })
+    },
+    // #ifdef APP-NVUE
+    beforeDestroy() {
+      this.stopAnimation = true
+    },
+    // #endif
+    methods: {
+      getEleDone(ele){
+        let el = (e, callback)=>{
+          uni.createSelectorQuery()
+          // #ifndef MP-ALIPAY
+            .in(this)
+            // #endif
+            .select(e)
+            .boundingClientRect()
+            .exec((res) => {
+              if(res[0]['width']) {
+                res[0]['key'] = e.split('_')[1];
+                callback(res[0]);
+              }else{
+                setTimeout(()=>{
+                  el(e, callback)
+                },100)
+              }
+            });
+        };
+        return new Promise((resolve, reject) => {
+          el(ele,(res)=>{
+            resolve(res)
+          });
+        });
+
+      },
+      initSize() {
+        if (this.scrollable) {
+          // #ifndef APP-NVUE
+          let query = [];
+          let textQuery = this.getEleDone(`#${this.elId}`);
+          let boxQuery = this.getEleDone(`#${this.elIdBox}`);
+          query.push(textQuery);
+          query.push(boxQuery);
+          Promise.all(query).then((res) => {
+            console.log('Promise.all',res);
+            res.map((item)=>{
+              if(item.key === 'text') {
+                this.textWidth = item.width;
+                this.animationDuration = `${item.width / this.speed}s`
+              }
+              if(item.key === 'box') {
+                this.boxWidth = item.width;
+                this.animationDelay = `0.5s`
+              }
+            });
+            setTimeout(() => {
+              this.animationPlayState = 'running'
+            }, 10)
+          })
+
+
+          // #endif
+          // #ifdef APP-NVUE
+          dom.getComponentRect(this.$refs['animationEle'], (res) => {
+            let winWidth = getApp().globalData.$systemInfo.windowWidth
+            this.textWidth = res.size.width
+            animation.transition(this.$refs['animationEle'], {
+              styles: {
+                transform: `translateX(-${winWidth}px)`
+              },
+              duration: 0,
+              timingFunction: 'linear',
+              delay: 0
+            }, () => {
+              if (!this.stopAnimation) {
+                animation.transition(this.$refs['animationEle'], {
+                  styles: {
+                    transform: `translateX(-${this.textWidth}px)`
+                  },
+                  timingFunction: 'linear',
+                  duration: (this.textWidth - winWidth) / this.speed * 1000,
+                  delay: 1000
+                }, () => {
+                  if (!this.stopAnimation) {
+                    this.loopAnimation()
+                  }
+                });
+              }
+            });
+          })
+          // #endif
+        }
+        // #ifdef APP-NVUE
+        if (!this.scrollable && (this.single || this.moreText)) {
+          dom.getComponentRect(this.$refs['textBox'], (res) => {
+            this.wrapWidth = res.size.width
+          })
+        }
+        // #endif
+      },
+      loopAnimation() {
+        // #ifdef APP-NVUE
+        animation.transition(this.$refs['animationEle'], {
+          styles: {
+            transform: `translateX(0px)`
+          },
+          duration: 0
+        }, () => {
+          if (!this.stopAnimation) {
+            animation.transition(this.$refs['animationEle'], {
+              styles: {
+                transform: `translateX(-${this.textWidth}px)`
+              },
+              duration: this.textWidth / this.speed * 1000,
+              timingFunction: 'linear',
+              delay: 0
+            }, () => {
+              if (!this.stopAnimation) {
+                this.loopAnimation()
+              }
+            });
+          }
+        });
+        // #endif
+      },
+      clickMore() {
+        this.$emit('getmore')
+      },
+      close() {
+        this.show = false;
+        this.$emit('close')
+      },
+      onClick() {
+        this.$emit('click')
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+
+  .uni-noticebar {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    width: 100%;
+    box-sizing: border-box;
+    /* #endif */
+    flex-direction: row;
+    align-items: center;
+    padding: unit(12, rxp) unit(24, rpx);
+  }
+
+  .uni-cursor-point {
+    /* #ifdef H5 */
+    cursor: pointer;
+    /* #endif */
+  }
+
+  .uni-noticebar-close {
+    margin-right: unit(10, rpx);
+  }
+
+  .uni-noticebar-icon {
+    margin-right: unit(10, rpx);
+  }
+
+  .uni-noticebar__content-wrapper {
+    flex: 1;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .uni-noticebar__content-wrapper--single {
+    /* #ifndef APP-NVUE */
+    line-height: unit(36, rpx);
+    /* #endif */
+  }
+
+  .uni-noticebar__content-wrapper--single,
+  .uni-noticebar__content-wrapper--scrollable {
+    flex-direction: row;
+  }
+
+  /* #ifndef APP-NVUE */
+  .uni-noticebar__content-wrapper--scrollable {
+    position: relative;
+    height: unit(36, rpx);
+  }
+
+  /* #endif */
+
+  .uni-noticebar__content--scrollable {
+    /* #ifdef APP-NVUE */
+    flex: 0;
+    /* #endif */
+    /* #ifndef APP-NVUE */
+    flex: 1;
+    display: block;
+    overflow: hidden;
+    /* #endif */
+  }
+
+  .uni-noticebar__content--single {
+    /* #ifndef APP-NVUE */
+    display: flex;
+    flex: none;
+    width: 100%;
+    justify-content: center;
+    /* #endif */
+  }
+
+  .uni-noticebar__content-text {
+    font-size: unit(28, rpx);
+    line-height: unit(36, rpx);
+    /* #ifndef APP-NVUE */
+    word-break: break-all;
+    /* #endif */
+
+  }
+
+  .uni-noticebar__content-text--single {
+    /* #ifdef APP-NVUE */
+    lines: 1;
+    /* #endif */
+    /* #ifndef APP-NVUE */
+    display: block;
+    width: 100%;
+    white-space: nowrap;
+    /* #endif */
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .uni-noticebar__content-text--scrollable {
+    /* #ifdef APP-NVUE */
+    lines: 1;
+    padding-left: unit(750, rpx);
+    /* #endif */
+    /* #ifndef APP-NVUE */
+    position: absolute;
+    height: unit(36, rpx);
+    line-height: unit(36, rpx);
+    white-space: nowrap;
+    padding-left: 100%;
+    animation: notice 10s 0s linear infinite both;
+    animation-play-state: paused;
+    /* #endif */
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-flow: nowrap;
+
+
+    /deep/ & > view {
+      padding-right: unit(30, rpx);
+    }
+  }
+
+  .uni-noticebar__more {
+    /* #ifndef APP-NVUE */
+    display: inline-flex;
+    /* #endif */
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    padding-left: unit(10, rpx);
+  }
+
+  .uni-noticebar__more-text {
+    font-size: unit(28, rpx);
+  }
+
+  @keyframes notice {
+    100% {
+      transform: translate3d(-100%, 0, 0);
+    }
+  }
+</style>

package/src/components/XdNumber/XdNumber.vue

@@ -0,0 +1,210 @@
+<template>
+  <view class="xd-number">
+    <view class="xd-number__label" v-if="label">{{label}}</view>
+    <view class="xd-number__cut">
+      <xd-font-icon
+        icon="iconjian1"
+        size="24"
+        @click="cut"
+        :color="color"
+        :width="46"
+        :height="46"
+      ></xd-font-icon>
+    </view>
+    <view class="xd-number__input">
+      <input
+        class="xd-number__input-cont"
+        :style="{width:width + 'rpx'}"
+        :focus="focus"
+        @blur="handleChange"
+        @confirm="doneInput"
+        type="number"
+        confirm-type="search"
+        :placeholder="placeholder"
+        :adjust-position="false"
+        :disabled="disabled"
+        v-model="searchValue"/>
+    </view>
+    <view class="xd-number__add">
+      <xd-font-icon
+        :width="46"
+        :height="46"
+        icon="iconjia2"
+        size="24"
+        :color="endColor"
+        @click="add"
+      ></xd-font-icon>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from '@/components/XdFontIcon/XdFontIcon';
+
+  /**
+   * XdNumber 按钮UI
+   * @description 数量输入插件
+   * @tutorial
+   * @property {Number} value/v-model              双向绑定值 默认：null
+   * @property {String} label                      label名称 （选填） 默认：购买数量 值为空不显示
+   * @property {Boolean} focus                     输入框是否聚焦 （选填）
+   * @property {Number}  min                       默认最小值 （选填） 默认：1
+   * @property {Number}  width                     输入框最大宽度 （选填） 默认：100rpx
+   * @property {String}  placeholder               提示文案
+   *
+   * @v-model {Number} value
+   * @event {Function} change                      点击加减按钮事件
+   */
+  export default {
+    name: "XdNumber",
+    components: {XdFontIcon},
+    props:{
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      label: {
+        type: String,
+        default: '',
+      },
+      value:{
+        type: Number|null,
+        default: null
+      },
+      focus: {
+        type: Boolean,
+        default: false
+      },
+      min:{
+        type:Number,
+        default: 1
+      },
+      width: {
+        type: Number,
+        default: 100
+      },
+      placeholder: {
+        type: String,
+        default: ''
+      }
+    },
+    watch:{
+      value(val){
+        this.setValue(val);
+      }
+    },
+    data(){
+      return {
+        searchValue: null,
+        color: '#595757',
+        endColor: '#595757',
+      }
+    },
+    created(){
+      this.setValue(this.value);
+
+    },
+    methods:{
+      doneInput() {
+        uni.hideKeyboard();
+        console.log(this.value)
+      },
+      setValue(val){
+        if(this.disabled) {
+          this.color = this.endColor = '#ccc';
+          this.searchValue = 1;
+          return
+        }
+
+        if (val <= this.min) {
+          this.color = '#ccc';
+          this.searchValue = this.min;
+          this.$emit('input', this.searchValue);
+        }else{
+          this.searchValue = val === null ? this.min: val;
+          this.$emit('input', this.searchValue);
+          this.color = '#595757';
+        }
+      },
+      cut(){
+        if(this.disabled) {
+          this.color = '#ccc';
+          return
+        }
+        if(this.searchValue > this.min) {
+          this.searchValue--;
+          this.$emit('input', this.searchValue);
+          this.$emit('change', this.searchValue, 'cut');
+          console.log(this.searchValue)
+          if(this.searchValue === this.min) {
+            this.color = '#ccc';
+          }
+          else {
+            this.color = '#595757'
+          }
+        }
+        else {
+          this.color = '#ccc';
+        }
+
+      },
+      add(){
+        if (this.disabled) {
+          this.color = '#ccc';
+          return
+        }
+        this.searchValue++;
+        this.color = '#595757';
+        this.$emit('input', this.searchValue);
+        this.$emit('change', this.searchValue, 'add');
+        console.log(this.searchValue)
+      },
+      handleChange(value){
+        if(value['detail'] === '' || value['detail'] === '0' ) {
+          this.searchValue = '1';
+        }
+        this.setValue(Number(this.searchValue));
+        console.log(this.searchValue)
+        this.$emit('change', this.searchValue);
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-number {
+    font-size: @xd-font-size-sm;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    color: #595757;
+
+    &__label {
+      padding-right: unit(10,rpx);
+    }
+
+    &__cut,&__add {
+      border: 1px solid #dfdfdf;
+      background: #f9f9f9;
+      border-radius: unit(6,rpx);
+      height: unit(46, rpx);
+      width: unit(46, rpx);
+      box-sizing: border-box;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &__input {
+      &-cont {
+        text-align: center;
+        border: 1px solid #dfdfdf;
+        background: #f9f9f9;
+        border-radius: unit(6, rpx);
+        height: unit(46,rpx);
+        box-sizing: border-box;
+        font-size: @xd-font-size-sm;
+      }
+    }
+  }
+</style>