@10yun/cv-mobile-ui 0.5.20 → 0.5.21

package/uni-ui/lib/uni-popup-dialog/uni-popup-dialog.vue

@@ -1 +1,173 @@
-<template>
  <view class="uni-popup-dialog">
    <view class="uni-dialog-title">
      <text class="uni-dialog-title-text" :class="['uni-popup__' + dialogType]">{{ titleText }}</text>
    </view>
    <view v-if="mode === 'base'" class="uni-dialog-content">
      <slot>
        <text class="uni-dialog-content-text">{{ content }}</text>
      </slot>
    </view>
    <view v-else class="uni-dialog-content">
      <slot>
        <input class="uni-dialog-input" v-model="val" :type="inputType" :placeholder="placeholderText" :focus="focus" />
      </slot>
    </view>
    <view class="uni-dialog-button-group">
      <view class="uni-dialog-button" @click="closeDialog">
        <text class="uni-dialog-button-text">{{ closeText }}</text>
      </view>
      <view class="uni-dialog-button uni-border-left" @click="onOk">
        <text class="uni-dialog-button-text uni-button-color">{{ okText }}</text>
      </view>
    </view>
  </view>
 * PopUp 弹出层-对话框样式
 * @description 弹出层-对话框样式
 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
 * @property {String} value input 模式下的默认值
 * @property {String} placeholder input 模式下输入提示
 * @property {String} type = [success|warning|info|error] 主题样式
 *  @value success 成功
 * 	@value warning 提示
 * 	@value info 消息
 * 	@value error 错误
 * @property {String} mode = [base|input] 模式、
 * 	@value base 基础对话框
 * 	@value input 可输入对话框
 * @property {String} content 对话框内容
 * @property {Boolean} beforeClose 是否拦截取消事件
 * @event {Function} confirm 点击确认按钮触发
 * @event {Function} close 点击取消按钮触发
 */
  name: 'uniPopupDialog',
  mixins: [popup],
  emits: ['confirm', 'close'],
  props: {
    inputType: {
      type: String,
      default: 'text'
    },
    value: {
      type: [String, Number],
      default: ''
    },
    placeholder: {
      type: [String, Number],
      default: ''
    },
    type: {
      type: String,
      default: 'error'
    },
    mode: {
      type: String,
      default: 'base'
    },
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    beforeClose: {
      type: Boolean,
      default: false
    },
    cancelText: {
      type: String,
      default: ''
    },
    confirmText: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogType: 'error',
      focus: false,
      val: ''
    };
  },
  computed: {
    okText() {
      return this.confirmText || t('uni-popup.ok');
    },
    closeText() {
      return this.cancelText || t('uni-popup.cancel');
    },
    placeholderText() {
      return this.placeholder || t('uni-popup.placeholder');
    },
    titleText() {
      return this.title || t('uni-popup.title');
    }
  },
  watch: {
    type(val) {
      this.dialogType = val;
    },
    mode(val) {
      if (val === 'input') {
        this.dialogType = 'info';
      }
    },
    value(val) {
      this.val = val;
    }
  },
  created() {
    // 对话框遮罩不可点击
    this.popup.disableMask();
    // this.popup.closeMask()
    if (this.mode === 'input') {
      this.dialogType = 'info';
      this.val = this.value;
    } else {
      this.dialogType = this.type;
    }
  },
  mounted() {
    this.focus = true;
  },
  methods: {
    /**
     * 点击确认按钮
     */
    onOk() {
      if (this.mode === 'input') {
        this.$emit('confirm', this.val);
      } else {
        this.$emit('confirm');
      }
      if (this.beforeClose) return;
      this.popup.close();
    },
    /**
     * 点击取消按钮
     */
    closeDialog() {
      this.$emit('close');
      if (this.beforeClose) return;
      this.popup.close();
    },
    close() {
      this.popup.close();
    }
  }
+<template>
+  <view class="uni-popup-dialog">
+    <view class="uni-dialog-title">
+      <text class="uni-dialog-title-text" :class="['uni-popup__' + dialogType]">{{ titleText }}</text>
+    </view>
+    <view v-if="mode === 'base'" class="uni-dialog-content">
+      <slot>
+        <text class="uni-dialog-content-text">{{ content }}</text>
+      </slot>
+    </view>
+    <view v-else class="uni-dialog-content">
+      <slot>
+        <input class="uni-dialog-input" v-model="val" :type="inputType" :placeholder="placeholderText" :focus="focus" />
+      </slot>
+    </view>
+    <view class="uni-dialog-button-group">
+      <view class="uni-dialog-button" @click="closeDialog">
+        <text class="uni-dialog-button-text">{{ closeText }}</text>
+      </view>
+      <view class="uni-dialog-button uni-border-left" @click="onOk">
+        <text class="uni-dialog-button-text uni-button-color">{{ okText }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import popup from '../uni-popup/popup.js';
+import { initVueI18n } from '@dcloudio/uni-i18n';
+import messages from '../uni-popup/i18n/index.js';
+const { t } = initVueI18n(messages);
+/**
+ * PopUp 弹出层-对话框样式
+ * @description 弹出层-对话框样式
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=329
+ * @property {String} value input 模式下的默认值
+ * @property {String} placeholder input 模式下输入提示
+ * @property {String} type = [success|warning|info|error] 主题样式
+ *  @value success 成功
+ * 	@value warning 提示
+ * 	@value info 消息
+ * 	@value error 错误
+ * @property {String} mode = [base|input] 模式、
+ * 	@value base 基础对话框
+ * 	@value input 可输入对话框
+ * @property {String} content 对话框内容
+ * @property {Boolean} beforeClose 是否拦截取消事件
+ * @event {Function} confirm 点击确认按钮触发
+ * @event {Function} close 点击取消按钮触发
+ */
+export default {
+  name: 'uniPopupDialog',
+  mixins: [popup],
+  emits: ['confirm', 'close'],
+  props: {
+    inputType: {
+      type: String,
+      default: 'text'
+    },
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    placeholder: {
+      type: [String, Number],
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'error'
+    },
+    mode: {
+      type: String,
+      default: 'base'
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    content: {
+      type: String,
+      default: ''
+    },
+    beforeClose: {
+      type: Boolean,
+      default: false
+    },
+    cancelText: {
+      type: String,
+      default: ''
+    },
+    confirmText: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      dialogType: 'error',
+      focus: false,
+      val: ''
+    };
+  },
+  computed: {
+    okText() {
+      return this.confirmText || t('uni-popup.ok');
+    },
+    closeText() {
+      return this.cancelText || t('uni-popup.cancel');
+    },
+    placeholderText() {
+      return this.placeholder || t('uni-popup.placeholder');
+    },
+    titleText() {
+      return this.title || t('uni-popup.title');
+    }
+  },
+  watch: {
+    type(val) {
+      this.dialogType = val;
+    },
+    mode(val) {
+      if (val === 'input') {
+        this.dialogType = 'info';
+      }
+    },
+    value(val) {
+      this.val = val;
+    }
+  },
+  created() {
+    // 对话框遮罩不可点击
+    this.popup.disableMask();
+    // this.popup.closeMask()
+    if (this.mode === 'input') {
+      this.dialogType = 'info';
+      this.val = this.value;
+    } else {
+      this.dialogType = this.type;
+    }
+  },
+  mounted() {
+    this.focus = true;
+  },
+  methods: {
+    /**
+     * 点击确认按钮
+     */
+    onOk() {
+      if (this.mode === 'input') {
+        this.$emit('confirm', this.val);
+      } else {
+        this.$emit('confirm');
+      }
+      if (this.beforeClose) return;
+      this.popup.close();
+    },
+    /**
+     * 点击取消按钮
+     */
+    closeDialog() {
+      this.$emit('close');
+      if (this.beforeClose) return;
+      this.popup.close();
+    },
+    close() {
+      this.popup.close();
+    }
+  }
+};
+</script>
+<style>
+@import 'style.css';
+</style>

package/uni-ui/lib/uni-popup-message/uni-popup-message.vue

@@ -1 +1,74 @@
-<template>
  <view class="uni-popup-message">
    <view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__' + type">
      <slot>
        <text class="uni-popup-message-text" :class="'uni-popup__' + type + '-text'">{{ message }}</text>
      </slot>
    </view>
  </view>
 * PopUp 弹出层-消息提示
 * @description 弹出层-消息提示
 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
 * @property {String} type = [success|warning|info|error] 主题样式
 *  @value success 成功
 * 	@value warning 提示
 * 	@value info 消息
 * 	@value error 错误
 * @property {String} message 消息提示文字
 * @property {String} duration 显示时间，设置为 0 则不会自动关闭
 */
  name: 'uniPopupMessage',
  mixins: [popup],
  props: {
    /**
     * 主题 success/warning/info/error	  默认 success
     */
    type: {
      type: String,
      default: 'success'
    },
    /**
     * 消息文字
     */
    message: {
      type: String,
      default: ''
    },
    /**
     * 显示时间，设置为 0 则不会自动关闭
     */
    duration: {
      type: Number,
      default: 3000
    },
    maskShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  created() {
    this.popup.maskShow = this.maskShow;
    this.popup.messageChild = this;
  },
  methods: {
    timerClose() {
      if (this.duration === 0) return;
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.popup.close();
      }, this.duration);
    }
  }
+<template>
+  <view class="uni-popup-message">
+    <view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__' + type">
+      <slot>
+        <text class="uni-popup-message-text" :class="'uni-popup__' + type + '-text'">{{ message }}</text>
+      </slot>
+    </view>
+  </view>
+</template>
+<script>
+import popup from '../uni-popup/popup.js';
+/**
+ * PopUp 弹出层-消息提示
+ * @description 弹出层-消息提示
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=329
+ * @property {String} type = [success|warning|info|error] 主题样式
+ *  @value success 成功
+ * 	@value warning 提示
+ * 	@value info 消息
+ * 	@value error 错误
+ * @property {String} message 消息提示文字
+ * @property {String} duration 显示时间，设置为 0 则不会自动关闭
+ */
+export default {
+  name: 'uniPopupMessage',
+  mixins: [popup],
+  props: {
+    /**
+     * 主题 success/warning/info/error	  默认 success
+     */
+    type: {
+      type: String,
+      default: 'success'
+    },
+    /**
+     * 消息文字
+     */
+    message: {
+      type: String,
+      default: ''
+    },
+    /**
+     * 显示时间，设置为 0 则不会自动关闭
+     */
+    duration: {
+      type: Number,
+      default: 3000
+    },
+    maskShow: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {};
+  },
+  created() {
+    this.popup.maskShow = this.maskShow;
+    this.popup.messageChild = this;
+  },
+  methods: {
+    timerClose() {
+      if (this.duration === 0) return;
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.popup.close();
+      }, this.duration);
+    }
+  }
+};
+</script>
+<style>
+@import 'style.css';
+</style>

package/uni-ui/lib/uni-popup-share/uni-popup-share.vue

@@ -1 +1,106 @@
-<template>
  <view class="uni-popup-share">
    <view class="uni-share-title">
      <text class="uni-share-title-text">{{ shareTitleText }}</text>
    </view>
    <view class="uni-share-content">
      <view class="uni-share-content-box">
        <view class="uni-share-content-item" v-for="(item, index) in bottomData" :key="index" @click.stop="select(item, index)">
          <image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
          <text class="uni-share-text">{{ item.text }}</text>
        </view>
      </view>
    </view>
    <view class="uni-share-button-box">
      <button class="uni-share-button" @click="close">{{ cancelText }}</button>
    </view>
  </view>
  name: 'UniPopupShare',
  mixins: [popup],
  emits: ['select'],
  props: {
    title: {
      type: String,
      default: ''
    },
    beforeClose: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      bottomData: [
        {
          text: '微信',
          icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png',
          name: 'wx'
        },
        {
          text: '支付宝',
          icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
          name: 'wx'
        },
        {
          text: 'QQ',
          icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png',
          name: 'qq'
        },
        {
          text: '新浪',
          icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png',
          name: 'sina'
        }
        // {
        // 	text: '百度',
        // 	icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
        // 	name: 'copy'
        // },
        // {
        // 	text: '其他',
        // 	icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
        // 	name: 'more'
        // }
      ]
    };
  },
  created() {},
  computed: {
    cancelText() {
      return t('uni-popup.cancel');
    },
    shareTitleText() {
      return this.title || t('uni-popup.shareTitle');
    }
  },
  methods: {
    /**
     * 选择内容
     */
    select(item, index) {
      this.$emit('select', {
        item,
        index
      });
      this.close();
    },
    /**
     * 关闭窗口
     */
    close() {
      if (this.beforeClose) return;
      this.popup.close();
    }
  }
+<template>
+  <view class="uni-popup-share">
+    <view class="uni-share-title">
+      <text class="uni-share-title-text">{{ shareTitleText }}</text>
+    </view>
+    <view class="uni-share-content">
+      <view class="uni-share-content-box">
+        <view class="uni-share-content-item" v-for="(item, index) in bottomData" :key="index" @click.stop="select(item, index)">
+          <image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
+          <text class="uni-share-text">{{ item.text }}</text>
+        </view>
+      </view>
+    </view>
+    <view class="uni-share-button-box">
+      <button class="uni-share-button" @click="close">{{ cancelText }}</button>
+    </view>
+  </view>
+</template>
+<script>
+import popup from '../uni-popup/popup.js';
+import { initVueI18n } from '@dcloudio/uni-i18n';
+import messages from '../uni-popup/i18n/index.js';
+const { t } = initVueI18n(messages);
+export default {
+  name: 'UniPopupShare',
+  mixins: [popup],
+  emits: ['select'],
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    beforeClose: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      bottomData: [
+        {
+          text: '微信',
+          icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png',
+          name: 'wx'
+        },
+        {
+          text: '支付宝',
+          icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
+          name: 'wx'
+        },
+        {
+          text: 'QQ',
+          icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png',
+          name: 'qq'
+        },
+        {
+          text: '新浪',
+          icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png',
+          name: 'sina'
+        }
+        // {
+        // 	text: '百度',
+        // 	icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
+        // 	name: 'copy'
+        // },
+        // {
+        // 	text: '其他',
+        // 	icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
+        // 	name: 'more'
+        // }
+      ]
+    };
+  },
+  created() {},
+  computed: {
+    cancelText() {
+      return t('uni-popup.cancel');
+    },
+    shareTitleText() {
+      return this.title || t('uni-popup.shareTitle');
+    }
+  },
+  methods: {
+    /**
+     * 选择内容
+     */
+    select(item, index) {
+      this.$emit('select', {
+        item,
+        index
+      });
+      this.close();
+    },
+    /**
+     * 关闭窗口
+     */
+    close() {
+      if (this.beforeClose) return;
+      this.popup.close();
+    }
+  }
+};
+</script>
+<style>
+@import 'style.css';
+</style>