gxd-uni-library-editx 1.0.0

package/src/components/XdCoins/XdCoins.vue

@@ -0,0 +1,66 @@
+<template>
+  <view class="xd-coins" @click="handleClick" :style="getStyle">
+    <view class="xd-coins__bg"></view>
+  </view>
+</template>
+
+<script>
+
+  /**
+   * XdCoins 全局Ui
+   * @description 元宝ui
+   * @tutorial
+   * @property {Number} size        元宝被放大倍数，值为0.1 - 1.5 之间， 默认值为0.5
+   * @event {Function} click|tap    点击元宝事件
+   */
+
+  export default {
+    name: "XdCoins",
+    props:{
+      /**
+       * @description 放大倍数 0.1 - 2 直接
+       * @type number
+       */
+      size: {
+        type: Number|String,
+        default: 0.5,
+      }
+    },
+    data(){
+      return {
+        height: 92,
+        width: 120
+      }
+    },
+    computed:{
+      getStyle(){
+        let size = this.size;
+        if (this.$xdUniHelper.checkVarType(size) === 'string') {
+          try {
+            size = Number(size);
+          }catch (e) {
+            size = 1;
+          }
+        }
+        if (size < 0.1) size = 0.1;
+        if (size > 1.5) size = 1.5;
+        return `height:${this.height * size}rpx; width: ${this.width * size}rpx;`;
+      }
+    },
+    methods:{
+      handleClick(e){
+        this.$emit('click',e);
+        this.$emit('tap', e);
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-coins__bg {
+    width: 100%;
+    height: 100%;
+    background: url(@xd-coins-unit) no-repeat top left;
+    background-size: 100% 100%;
+  }
+</style>

package/src/components/XdConfirm/XdConfirm.vue

@@ -0,0 +1,240 @@
+<template>
+  <view class="xd-input-confirm" @touchmove.stop.prevent :style="{zIndex:confirm.zIndex}" v-if="show">
+    <view class="xd-input-confirm__mask"></view>
+    <view
+      class="xd-input-confirm__body"
+      :style="{
+        borderRadius: confirm.radius,
+        width: confirm.width
+      }"
+    >
+      <view class="xd-input-confirm__body-close" v-if="confirm.showClose">
+        <xd-font-icon @click="close" icon="icondanchuangguanbi_xian" size="32"></xd-font-icon>
+      </view>
+      <view class="xd-input-confirm__body-title" v-if="confirm.isTitle">{{confirm.title}}</view>
+      <view class="xd-input-confirm__body-title" v-else></view>
+      <view
+        class="xd-input-confirm__body-content"
+        v-if="confirm.isHtml"
+        :style="{color: confirm.contentColor}"
+      >
+        <xd-content-xss :html="confirm.content"></xd-content-xss>
+      </view>
+      <view
+        v-else
+        class="xd-input-confirm__body-content"
+        :style="{color: confirm.contentColor}"
+      >
+        <slot>{{confirm.content}}</slot>
+      </view>
+      <view class="xd-input-confirm__body-btn">
+        <view>
+          <xd-button
+            v-if="confirm.cancel"
+            @click="handleConfirm('cancel')"
+            :type="confirm.cancelColorType"
+            size="medium"
+            :radius="confirm.btnRadius"
+          >{{confirm.cancelText}}
+          </xd-button>
+        </view>
+        <view>
+          <xd-button
+            @click="handleConfirm('confirm')"
+            v-if="confirm.confirm"
+            :type="confirm.confirmColorType"
+            size="medium"
+            :radius="confirm.btnRadius"
+          >{{confirm.confirmText}}
+          </xd-button>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdButton from "@/components/XdButton/XdButton";
+  import {mapState, mapMutations} from 'vuex';
+  import XdContentXss from "@/components/XdContentXss/XdContentXss";
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+
+  export default {
+    name: "XdConfirm",
+    components: {
+      XdFontIcon,
+      XdContentXss,
+      XdButton
+    },
+    computed: {
+      ...mapState([
+        'xdInputConfirm'
+      ])
+    },
+    data() {
+      return {
+        show: false,
+
+        /**
+         * @description 确认框(confirm)
+         * @type {Object}
+         * @property confirm.width {string} 确认框宽度 默认：65%
+         * @property confirm.title {string} 标题 默认：标题
+         * @property confirm.showClose {string} 是否显示关闭按钮 默认：标题
+         * @property confirm.isTitle 是否启用标题 默认：不启用
+         * @property confirm.zIndex {number} 样式层级关系 默认：2000
+         * @property confirm.content {string|Element} html 只支持原生元素（请不要使用小程序相关元素组件，有兼容问题）,例如：<div style="color: green">html test</div>
+         * @property confirm.contentColor {string} 文本颜色  默认：#333
+         * @property confirm.isHtml {boolean} 是否支持html 默认：false
+         * @property confirm.cancel {boolean} 是否显示取消按钮 默认：true
+         * @property confirm.cancelText {string} 取消文本 默认：取消
+         * @property confirm.cancelColorType {string} 按钮样式（primary,default,subPrimary,danger,info,warning,success） 默认：default
+         * @property confirm.confirm {boolean} 是否显示确认按钮 默认：true
+         * @property confirm.confirmText {string} 确认文本  默认：确认
+         * @property confirm.confirmColorType {string} 确认按钮样式（primary,default,subPrimary,danger,info,warning,success） 默认：primary
+         * @property confirm.radius {string} 边框圆角  默认：确认10rpx
+         * @property confirm.btnRadius {string} 按钮边框圆角  默认：确认10rpx
+         * @property confirm.success {function} 按钮回调事件
+         * @property confirm.onClose {function} 关闭事件
+         */
+        confirm: {},
+
+        defaultConfirm: {
+          width: '640rpx',
+          showClose: true,
+          onClose: null,
+          zIndex: 1400,
+          title: '温馨提示',
+          isTitle: true,
+          content: '',
+          contentColor: '#333',
+          isHtml: false,
+          cancel: true,
+          cancelText: '取消',
+          cancelColorType: 'info',
+          confirm: true,
+          confirmText: '确认',
+          confirmColorType: 'primary',
+          radius: '10rpx',
+          btnRadius: '',
+        }
+      }
+    },
+    watch: {
+      xdInputConfirm(value) {
+        this.init(value);
+      }
+    },
+    created() {
+      this.init(this.xdInputConfirm);
+    },
+    methods: {
+      ...mapMutations(['setXdInputConfirm']),
+
+      init(value){
+        //只有当前访问页面触发逻辑
+        if (this.$root.$isShow === false) {
+          return;
+        }
+        if (value === null) {
+          this.show = false;
+          this.confirm = {}
+        } else {
+          this.confirm= Object.assign({},
+            this.$xdUniHelper.cloneDeep(this.defaultConfirm),
+            value,
+          );
+          console.log('xdInputConfirm', this.confirm);
+          this.show = true;
+        }
+      },
+
+      handleConfirm(status) {
+        if (typeof this.confirm.success === 'function') {
+          let params = {};
+          params[status] = true;
+          this.confirm.success(params);
+          this.close();
+        } else {
+          this.close();
+        }
+      },
+
+      close() {
+        this.setXdInputConfirm(null);
+        if (typeof this.confirm.onClose === 'function') {
+          this.onClose()
+        }
+      },
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-input-confirm {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    &__mask {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background: rgba(0, 0, 0, .5);
+    }
+
+    &__body {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: #fff;
+      overflow: hidden;
+      padding: unit(30,rpx);
+      box-sizing: border-box;
+
+      &-title {
+        padding: 0 unit(30, rpx);
+        font-size: unit(40, rpx);
+        line-height: unit(120, rpx);
+        text-align: center;
+        color: #000;
+        min-height: unit(50, rpx);
+      }
+
+      &-close {
+        position: absolute;
+        top: unit(30, rpx);
+        right: unit(30, rpx);
+        font-size: @xd-font-size-lg;
+        font-weight: normal;
+        width: unit(40, rpx);
+        height: unit(40, rpx);
+        color: #ccc;
+      }
+
+      &-content {
+        padding: unit(22, rpx) unit(30, rpx) unit(60, rpx);
+        text-align: center;
+        font-size: unit(34, rpx);
+        line-height: unit(52, rpx);
+        color: #595656;
+      }
+
+      &-btn {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-bottom: unit(30, rpx);
+
+        & > view {
+          padding: 0 unit(20, rpx);
+        }
+      }
+    }
+  }
+</style>

package/src/components/XdContentXss/XdContentXss.vue

@@ -0,0 +1,71 @@
+<template>
+  <!-- #ifdef MP-WEIXIN  -->
+  <view class="xd-content-xss" v-if="vhtml" v-html="vhtml"></view>
+  <!-- #endif -->
+  <!-- #ifdef H5  -->
+  <view class="xd-content-xss" v-if="vhtml" v-html="vhtml"></view>
+  <!-- #endif -->
+  <!-- #ifndef MP-WEIXIN || H5 -->
+  <xd-mp-html v-if="vhtml" :content="vhtml"></xd-mp-html>
+  <!-- #endif -->
+</template>
+
+<script>
+  // #ifdef H5
+  import DOMPurify from 'dompurify';
+  // #endif
+  import XdMpHtml from "@/components/XdMpHtml/XdMpHtml";
+
+  export default {
+    name: "XdContentXss",
+    components: {
+      XdMpHtml
+    },
+    props: {
+      html: {
+        type: String | null,
+        default: null
+      }
+    },
+    data(){
+      return {
+        vhtml : null,
+        testHtml: '<math><mi//xlink:href="data:x,<\script>alert(4)<\/script>"><TABLE><tr><td>HELLO</tr></TABL><UL><li><A HREF=//google.com>click</UL><p><img src="http://www.jpg" onerror="console.log(\'onerror\',2222)"></p><svg><g/onload=console.log(\'onerror\',2)//<p><p>abc<iframe//src=jAva&Tab;script:console.log(\'onerror\',3)>def</p>'
+      }
+    },
+    created() {
+      if(this.html === null) {
+        // #ifdef H5
+        this.vhtml = DOMPurify.sanitize(this.testHtml);
+        // #endif
+
+        // #ifndef H5
+        this.vhtml = this.testHtml;
+        // #endif
+
+      }
+      else{
+        // #ifdef H5
+        this.vhtml = DOMPurify.sanitize(this.html);
+        // #endif
+
+        // #ifndef H5
+        this.vhtml = this.html;
+        // #endif
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  .xd-content-xss {
+    font-size: @xd-font-size-base;
+    line-height: @xd-font-size-base * 1.5;
+
+    /*  #ifdef  H5  */
+    & /deep/ img {
+      max-width: 100%;
+    }
+    /*  #endif  */
+  }
+</style>

package/src/components/XdDailog/XdDailog.vue

@@ -0,0 +1,258 @@
+<template>
+  <view class="xd-dailog" :style="{zIndex:zIndex <= 4000? 4000:zIndex }" v-if="uiShow">
+    <view class="xd-dailog__mask" @click="bodyClose"></view>
+    <view
+      class="xd-dailog__body"
+      @click.stop
+      :style="{
+        borderRadius: (uiRadius +  'rpx'),
+        width: width,
+        background: background
+      }"
+    >
+      <view class="xd-dailog__body-title" v-if="title">
+        <slot name="title">
+          {{title}}
+        </slot>
+      </view>
+      <view class="xd-dailog__body-close" v-if="showClose" @click="close">
+        <xd-font-icon
+          icon="icondanchuangguanbi_xian"
+          width="52"
+          height="52"
+          size="26"
+          color="#fff"
+        ></xd-font-icon>
+      </view>
+      <view class="xd-dailog__body-content" >
+        <view class="xd-dailog__body-content-box">
+          <slot></slot>
+        </view>
+        <view class="xd-dailog__body-btn" v-if="cancel || confirm">
+          <slot name="btn">
+            <view>
+              <xd-button
+                v-if="cancel"
+                @click="handleConfirm('cancel')"
+                :type="cancelColorType"
+                size="medium"
+                :radius="btnRadius  + 'rpx'"
+              >{{cancelText}}</xd-button>
+            </view>
+            <view>
+              <xd-button
+                @click="handleConfirm('confirm')"
+                v-if="confirm"
+                :type="confirmColorType"
+                size="medium"
+                :radius="btnRadius + 'rpx'"
+              >{{confirmText}}</xd-button>
+            </view>
+          </slot>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdButton from "@/components/XdButton/XdButton";
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+
+  export default {
+    name: "XdDailog",
+    components: {
+      XdButton,
+      XdFontIcon
+    },
+    props:{
+      disabled:{
+        type: Boolean,
+        default: false,
+      },
+      width:{
+        type: Number | String,
+        default: '680rpx',
+      },
+      title:{
+        type: String,
+        default: '操作',
+      },
+
+      showClose: {
+        type: Boolean,
+        default: true,
+      },
+
+      background: {
+        type: String,
+        default: '#fff',
+      },
+
+      maskAutoClose:{
+        type: Boolean,
+        default: false,
+      },
+      show:{
+        type: Boolean,
+        default: true,
+      },
+      zIndex: {
+        type: Number,
+        default: 4000,
+      },
+      cancel: {
+        type: Boolean,
+        default: true,
+      },
+      cancelText: {
+        type: String,
+        default: '取消',
+      },
+      cancelColorType: {
+        type: String,
+        default: 'info',
+      },
+      confirm: {
+        type: Boolean,
+        default: true,
+      },
+      confirmText: {
+        type: String,
+        default: '打招呼',
+      },
+      confirmColorType: {
+        type: String,
+        default: 'primary',
+      },
+      radius:{
+        type: Number, //rpx
+        default: 10,
+      },
+      btnRadius:{
+        type: Number, //rpx
+        default: 10,
+      },
+
+    },
+
+    data(){
+      return {
+        uiShow: false,
+        uiRadius: 11.2,
+        uiDisabled: false,
+      }
+    },
+
+    watch:{
+      show(value){
+        this.uiShow = value;
+      },
+      disabled(value) {
+        this.uiDisabled = value;
+      },
+    },
+    created(){
+      this.uiShow = this.show;
+      this.uiDisabled = this.disabled;
+      this.uiRadius = this.radius;
+    },
+    methods: {
+
+      handleConfirm(status){
+        console.log(status)
+        let params = {};
+        params[status] = true;
+        this.$emit('onBtn', params);
+        if(status === 'cancel') {
+          this.close();
+        }
+      },
+
+      bodyClose(){
+        if(this.maskAutoClose) {
+          this.close();
+        }
+      },
+
+      close(){
+        if (this.uiDisabled) {
+          return
+        }
+        this.uiShow = false;
+        this.$emit('update:show', this.uiShow);
+        this.$emit('close');
+      },
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-dailog {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 2000;
+
+    &__mask {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background: rgba(0,0,0,.5);
+    }
+
+    &__body {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+
+      &-close {
+        position: absolute;
+        width:unit(52/@scale, rpx);
+        height: unit(52/@scale, rpx);
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: unit(-100/@scale, rpx);
+        border:unit(5, rpx) solid #fff;
+        border-radius: 50%;
+        overflow: hidden;
+      }
+
+      &-title{
+        height: unit(118/@scale, rpx);
+        line-height: unit(118/@scale, rpx);
+        font-size: unit(40, rpx);
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      &-content {
+        padding: unit(0/@scale,rpx) unit(40, rpx) unit(60/@scale, rpx);
+        text-align: center;
+        &-box {
+          max-height: 58vh;
+          overflow-y: auto;
+          padding: 0 unit(20, rpx);
+          overflow-x: hidden;
+        }
+      }
+
+      &-btn {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-top: unit(30, rpx);
+        & > view {
+          padding: 0 unit(30/@scale,rpx);
+        }
+      }
+    }
+  }
+</style>