@10yun/cv-mobile-ui 0.5.56 → 0.5.58

package/uview-plus/components/u-button/props-old.js

@@ -0,0 +1,159 @@
+import { defineMixin } from '../../libs/vue';
+import defProps from '../../libs/config/props.js';
+export const props = defineMixin({
+  props: {
+    // 是否细边框
+    hairline: {
+      type: Boolean,
+      default: () => defProps.button.hairline
+    },
+    // 按钮的预置样式，info，primary，error，warning，success
+    type: {
+      type: String,
+      default: () => defProps.button.type
+    },
+    // 按钮尺寸，large，normal，small，mini
+    size: {
+      type: String,
+      default: () => defProps.button.size
+    },
+    // 按钮形状，circle（两边为半圆），square（带圆角）
+    shape: {
+      type: String,
+      default: () => defProps.button.shape
+    },
+    // 按钮是否镂空
+    plain: {
+      type: Boolean,
+      default: () => defProps.button.plain
+    },
+    // 是否禁止状态
+    disabled: {
+      type: Boolean,
+      default: () => defProps.button.disabled
+    },
+    // 是否加载中
+    loading: {
+      type: Boolean,
+      default: () => defProps.button.loading
+    },
+    // 加载中提示文字
+    loadingText: {
+      type: [String, Number],
+      default: () => defProps.button.loadingText
+    },
+    // 加载状态图标类型
+    loadingMode: {
+      type: String,
+      default: () => defProps.button.loadingMode
+    },
+    // 加载图标大小
+    loadingSize: {
+      type: [String, Number],
+      default: () => defProps.button.loadingSize
+    },
+    // 开放能力，具体请看uniapp稳定关于button组件部分说明
+    // https://uniapp.dcloud.io/component/button
+    openType: {
+      type: String,
+      default: () => defProps.button.openType
+    },
+    // 用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
+    // 取值为submit（提交表单），reset（重置表单）
+    formType: {
+      type: String,
+      default: () => defProps.button.formType
+    },
+    // 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
+    // 只微信小程序、QQ小程序有效
+    appParameter: {
+      type: String,
+      default: () => defProps.button.appParameter
+    },
+    // 指定是否阻止本节点的祖先节点出现点击态，微信小程序有效
+    hoverStopPropagation: {
+      type: Boolean,
+      default: () => defProps.button.hoverStopPropagation
+    },
+    // 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。只微信小程序有效
+    lang: {
+      type: String,
+      default: () => defProps.button.lang
+    },
+    // 会话来源，open-type="contact"时有效。只微信小程序有效
+    sessionFrom: {
+      type: String,
+      default: () => defProps.button.sessionFrom
+    },
+    // 会话内消息卡片标题，open-type="contact"时有效
+    // 默认当前标题，只微信小程序有效
+    sendMessageTitle: {
+      type: String,
+      default: () => defProps.button.sendMessageTitle
+    },
+    // 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效
+    // 默认当前分享路径，只微信小程序有效
+    sendMessagePath: {
+      type: String,
+      default: () => defProps.button.sendMessagePath
+    },
+    // 会话内消息卡片图片，open-type="contact"时有效
+    // 默认当前页面截图，只微信小程序有效
+    sendMessageImg: {
+      type: String,
+      default: () => defProps.button.sendMessageImg
+    },
+    // 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，
+    // 用户点击后可以快速发送小程序消息，open-type="contact"时有效
+    showMessageCard: {
+      type: Boolean,
+      default: () => defProps.button.showMessageCard
+    },
+    // 额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
+    dataName: {
+      type: String,
+      default: () => defProps.button.dataName
+    },
+    // 节流，一定时间内只能触发一次
+    throttleTime: {
+      type: [String, Number],
+      default: () => defProps.button.throttleTime
+    },
+    // 按住后多久出现点击态，单位毫秒
+    hoverStartTime: {
+      type: [String, Number],
+      default: () => defProps.button.hoverStartTime
+    },
+    // 手指松开后点击态保留时间，单位毫秒
+    hoverStayTime: {
+      type: [String, Number],
+      default: () => defProps.button.hoverStayTime
+    },
+    // 按钮文字，之所以通过props传入，是因为slot传入的话
+    // nvue中无法控制文字的样式
+    text: {
+      type: [String, Number],
+      default: () => defProps.button.text
+    },
+    // 按钮图标
+    icon: {
+      type: String,
+      default: () => defProps.button.icon
+    },
+    // 按钮图标
+    iconColor: {
+      type: String,
+      default: () => defProps.button.icon
+    },
+    // 按钮颜色，支持传入linear-gradient渐变色
+    color: {
+      type: String,
+      default: () => defProps.button.color
+    },
+    // 停止冒泡
+    stop: {
+      type: Boolean,
+      default: () => defProps.button.stop
+    }
+  }
+});

package/uview-plus/components/u-button/props.js

@@ -2,6 +2,13 @@ import { defineMixin } from '../../libs/vue';
 import defProps from '../../libs/config/props.js';
 export const props = defineMixin({
   props: {
+    /**
+     * 自动加载禁用
+     */
+    autoLoading: {
+      type: Boolean,
+      default: false
+    },
     // 是否细边框
     hairline: {
       type: Boolean,

package/uview-plus/components/u-button/u-button-old.vue

@@ -0,0 +1,476 @@
+<template>
+  <!-- #ifndef APP-NVUE -->
+  <button
+    :hover-start-time="Number(hoverStartTime)"
+    :hover-stay-time="Number(hoverStayTime)"
+    :form-type="formType"
+    :open-type="openType"
+    :app-parameter="appParameter"
+    :hover-stop-propagation="hoverStopPropagation"
+    :send-message-title="sendMessageTitle"
+    :send-message-path="sendMessagePath"
+    :lang="lang"
+    :data-name="dataName"
+    :session-from="sessionFrom"
+    :send-message-img="sendMessageImg"
+    :show-message-card="showMessageCard"
+    @getphonenumber="getphonenumber"
+    @getuserinfo="getuserinfo"
+    @error="error"
+    @opensetting="opensetting"
+    @launchapp="launchapp"
+    @agreeprivacyauthorization="agreeprivacyauthorization"
+    :hover-class="!disabled && !loading ? 'u-button--active' : ''"
+    class="u-button u-reset-button"
+    :style="[baseColor, addStyle(customStyle)]"
+    @tap="clickHandler"
+    :class="bemClass"
+  >
+    <template v-if="loading">
+      <up-loading-icon :mode="loadingMode" :size="loadingSize * 1.15" :color="loadingColor"></up-loading-icon>
+      <text class="u-button__loading-text" :style="[{ fontSize: textSize + 'px' }]">{{ loadingText || text }}</text>
+    </template>
+    <template v-else>
+      <up-icon
+        v-if="icon"
+        :name="icon"
+        :color="iconColorCom"
+        :size="textSize * 1.35"
+        :customStyle="{ marginRight: '2px' }"
+      ></up-icon>
+      <slot>
+        <text class="u-button__text" :style="[{ fontSize: textSize + 'px' }]">{{ text }}</text>
+      </slot>
+    </template>
+  </button>
+  <!-- #endif -->
+  <!-- #ifdef APP-NVUE -->
+  <view
+    :hover-start-time="Number(hoverStartTime)"
+    :hover-stay-time="Number(hoverStayTime)"
+    class="u-button"
+    :hover-class="
+      !disabled && !loading && !color && (plain || type === 'info')
+        ? 'u-button--active--plain'
+        : !disabled && !loading && !plain
+          ? 'u-button--active'
+          : ''
+    "
+    @tap="clickHandler"
+    :class="bemClass"
+    :style="[baseColor, addStyle(customStyle)]"
+  >
+    <template v-if="loading">
+      <up-loading-icon :mode="loadingMode" :size="loadingSize * 1.15" :color="loadingColor"></up-loading-icon>
+      <text class="u-button__loading-text" :style="[nvueTextStyle]" :class="[plain && `u-button__text--plain--${type}`]">
+        {{ loadingText || text }}
+      </text>
+    </template>
+    <template v-else>
+      <up-icon v-if="icon" :name="icon" :color="iconColorCom" :size="textSize * 1.35"></up-icon>
+      <text
+        class="u-button__text"
+        :style="[
+          {
+            marginLeft: icon ? '2px' : 0
+          },
+          nvueTextStyle
+        ]"
+        :class="[plain && `u-button__text--plain--${type}`]"
+      >
+        {{ text }}
+      </text>
+    </template>
+  </view>
+  <!-- #endif -->
+</template>
+<script>
+import { buttonMixin } from '../../libs/mixin/button';
+import { openType } from '../../libs/mixin/openType';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { props } from './props';
+import { addStyle } from '../../libs/function/index';
+import { throttle } from '../../libs/function/throttle';
+import color from '../../libs/config/color';
+/**
+ * button 按钮
+ * @description Button 按钮
+ * @tutorial https://uview-plus.jiangruyi.com/components/button.html
+ *
+ * @property {Boolean}			hairline				是否显示按钮的细边框 (默认 true )
+ * @property {String}			type					按钮的预置样式，info，primary，error，warning，success (默认 'info' )
+ *  @value info 默认按钮
+ *  @value primary 主题按钮
+ *  @value error 危险按钮
+ *  @value warning  警告按钮
+ *  @value success 成功按钮
+ * @property {String}			size					按钮尺寸，large，normal，mini （默认 normal）
+ *  @value large 超大尺寸
+ *  @value normal 普通尺寸
+ *  @value mini 迷你尺寸
+ * @property {String}			shape					按钮形状，circle（两边为半圆），square（带圆角） （默认 'square' ）
+ * @value circle 两边为半圆
+ * @value square 带有一定的圆角
+ * @property {Boolean}			plain					按钮是否镂空，背景色透明 （默认 false）
+ * @property {Boolean}			disabled				是否禁用 （默认 false）
+ * @property {Boolean}			loading					按钮名称前是否带 loading 图标(App-nvue 平台，在 ios 上为雪花，Android上为圆圈) （默认 false）
+ * @property {String | Number}	loadingText				加载中提示文字
+ * @property {String}			loadingMode				加载状态图标类型 （默认 'spinner' ）
+ * @property {String | Number}	loadingSize				加载图标大小 （默认 15 ）
+ * @property {String}			openType				开放能力，具体请看uniapp稳定关于button组件部分说明
+ * @property {String}			formType				用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件
+ * @property {String}			appParameter			打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 （注：只微信小程序、QQ小程序有效）
+ * @property {Boolean}			hoverStopPropagation	指定是否阻止本节点的祖先节点出现点击态，微信小程序有效（默认 true ）
+ * @property {String}			lang					指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文（默认 en ）
+ * @property {String}			sessionFrom				会话来源，openType="contact"时有效
+ * @property {String}			sendMessageTitle		会话内消息卡片标题，openType="contact"时有效
+ * @property {String}			sendMessagePath			会话内消息卡片点击跳转小程序路径，openType="contact"时有效
+ * @property {String}			sendMessageImg			会话内消息卡片图片，openType="contact"时有效
+ * @property {Boolean}			showMessageCard			是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效（默认false）
+ * @property {String}			dataName				额外传参参数，用于小程序的data-xxx属性，通过target.dataset.name获取
+ * @property {String | Number}	throttleTime			节流，一定时间内只能触发一次 （默认 0 )
+ * @property {String | Number}	hoverStartTime			按住后多久出现点击态，单位毫秒 （默认 0 )
+ * @property {String | Number}	hoverStayTime			手指松开后点击态保留时间，单位毫秒 （默认 200 )
+ * @property {String | Number}	text					按钮文字，之所以通过props传入，是因为slot传入的话（注：nvue中无法控制文字的样式）
+ * @property {String}			icon					按钮图标
+ * @property {String}			iconColor				按钮图标颜色
+ * @property {String}			color					按钮颜色，支持传入linear-gradient渐变色
+ * @property {Object}			customStyle				定义需要用到的外部样式
+ *
+ * @event {Function}	click			非禁止并且非加载中，才能点击
+ * @event {Function}	getphonenumber	open-type="getPhoneNumber"时有效
+ * @event {Function}	getuserinfo		用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo
+ * @event {Function}	error			当使用开放能力时，发生错误的回调
+ * @event {Function}	opensetting		在打开授权设置页并关闭后回调
+ * @event {Function}	launchapp		打开 APP 成功的回调
+ * @event {Function}	agreeprivacyauthorization	用户同意隐私协议事件回调
+ * @example <up-button>月落</up-button>
+ */
+export default {
+  name: 'u-button',
+  // #ifdef MP
+  mixins: [mpMixin, mixin, buttonMixin, openType, props],
+  // #endif
+  // #ifndef MP
+  mixins: [mpMixin, mixin, props],
+  // #endif
+  data() {
+    return {};
+  },
+  computed: {
+    // 生成bem风格的类名
+    bemClass() {
+      // this.bem为一个computed变量，在mixin中
+      if (!this.color) {
+        return this.bem('button', ['type', 'shape', 'size'], ['disabled', 'plain', 'hairline']);
+      } else {
+        // 由于nvue的原因，在有color参数时，不需要传入type，否则会生成type相关的类型，影响最终的样式
+        return this.bem('button', ['shape', 'size'], ['disabled', 'plain', 'hairline']);
+      }
+    },
+    loadingColor() {
+      if (this.plain) {
+        // 如果有设置color值，则用color值，否则使用type主题颜色
+        return this.color ? this.color : color[`u-${this.type}`];
+      }
+      if (this.type === 'info') {
+        return '#c9c9c9';
+      }
+      return 'rgb(200, 200, 200)';
+    },
+    iconColorCom() {
+      // 如果是镂空状态，设置了color就用color值，否则使用主题颜色，
+      // up-icon的color能接受一个主题颜色的值
+      if (this.iconColor) return this.iconColor;
+      if (this.plain) {
+        return this.color ? this.color : this.type;
+      } else {
+        return this.type === 'info' ? '#000000' : '#ffffff';
+      }
+    },
+    baseColor() {
+      let style = {};
+      if (this.color) {
+        // 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色
+        style.color = this.plain ? this.color : 'white';
+        if (!this.plain) {
+          // 非镂空，背景色使用自定义的颜色
+          style['background-color'] = this.color;
+        }
+        if (this.color.indexOf('gradient') !== -1) {
+          // 如果自定义的颜色为渐变色，不显示边框，以及通过backgroundImage设置渐变色
+          // weex文档说明可以写borderWidth的形式，为什么这里需要分开写？
+          // 因为weex是阿里巴巴为了部门业绩考核而做的你懂的东西，所以需要这么写才有效
+          style.borderTopWidth = 0;
+          style.borderRightWidth = 0;
+          style.borderBottomWidth = 0;
+          style.borderLeftWidth = 0;
+          if (!this.plain) {
+            style.backgroundImage = this.color;
+          }
+        } else {
+          // 非渐变色，则设置边框相关的属性
+          style.borderColor = this.color;
+          style.borderWidth = '1px';
+          style.borderStyle = 'solid';
+        }
+      }
+      return style;
+    },
+    // nvue版本按钮的字体不会继承父组件的颜色，需要对每一个text组件进行单独的设置
+    nvueTextStyle() {
+      let style = {};
+      // 针对自定义了color颜色的情况，镂空状态下，就是用自定义的颜色
+      if (this.type === 'info') {
+        style.color = '#323233';
+      }
+      if (this.color) {
+        style.color = this.plain ? this.color : 'white';
+      }
+      style.fontSize = this.textSize + 'px';
+      return style;
+    },
+    // 字体大小
+    textSize() {
+      let fontSize = 14,
+        { size } = this;
+      if (size === 'large') fontSize = 16;
+      if (size === 'normal') fontSize = 14;
+      if (size === 'small') fontSize = 12;
+      if (size === 'mini') fontSize = 10;
+      return fontSize;
+    }
+  },
+  emits: ['click', 'getphonenumber', 'getuserinfo', 'error', 'opensetting', 'launchapp', 'agreeprivacyauthorization'],
+  methods: {
+    addStyle,
+    clickHandler(e) {
+      // 非禁止并且非加载中，才能点击
+      if (!this.disabled && !this.loading) {
+        // 进行节流控制，每this.throttle毫秒内，只在开始处执行
+        throttle(() => {
+          this.$emit('click', e);
+        }, this.throttleTime);
+      }
+      // 是否阻止事件传播
+      this.stop && this.preventEvent(e);
+    },
+    // 下面为对接uniapp官方按钮开放能力事件回调的对接
+    getphonenumber(res) {
+      this.$emit('getphonenumber', res);
+    },
+    getuserinfo(res) {
+      this.$emit('getuserinfo', res);
+    },
+    error(res) {
+      this.$emit('error', res);
+    },
+    opensetting(res) {
+      this.$emit('opensetting', res);
+    },
+    launchapp(res) {
+      this.$emit('launchapp', res);
+    },
+    agreeprivacyauthorization(res) {
+      this.$emit('agreeprivacyauthorization', res);
+    }
+  }
+};
+</script>
+<style scoped>
+/* #ifndef APP-NVUE */
+.u-button {
+  width: 100%;
+  white-space: nowrap;
+}
+.u-button__text {
+  white-space: nowrap;
+  line-height: 1;
+}
+.u-button:before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  border: inherit;
+  border-radius: inherit;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  content: ' ';
+  background-color: #000;
+  border-color: #000;
+}
+.u-button--active:before {
+  opacity: 0.15;
+}
+.u-button__icon + .u-button__text:not(:empty),
+.u-button__loading-text {
+  margin-left: 4px;
+}
+.u-button--plain.u-button--primary {
+  color: var(--u-primary);
+}
+.u-button--plain.u-button--info {
+  color: var(--u-info);
+}
+.u-button--plain.u-button--success {
+  color: var(--u-success);
+}
+.u-button--plain.u-button--error {
+  color: var(--u-error);
+}
+.u-button--plain.u-button--warning {
+  color: var(--u-warning);
+}
+/* #endif */
+/* #ifdef APP-NVUE */
+.u-button--active {
+  opacity: 0.75;
+}
+.u-button--active--plain {
+  background-color: rgb(217, 217, 217);
+}
+.u-button__loading-text {
+  margin-left: 4px;
+}
+.u-button__text,
+.u-button__loading-text {
+  color: #ffffff;
+}
+.u-button__text--plain--error {
+  color: var(--u-error);
+}
+.u-button__text--plain--warning {
+  color: var(--u-warning);
+}
+.u-button__text--plain--success {
+  color: var(--u-success);
+}
+.u-button__text--plain--info {
+  color: var(--u-info);
+}
+.u-button__text--plain--primary {
+  color: var(--u-primary);
+}
+/* #endif */
+.u-button {
+  height: 40px;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  /* #ifndef APP-NVUE */
+  box-sizing: border-box;
+  /* #endif */
+  flex-direction: row;
+}
+.u-button__text {
+  font-size: 15px;
+}
+.u-button__loading-text {
+  font-size: 15px;
+  margin-left: 4px;
+}
+.u-button--large {
+  /* #ifndef APP-NVUE */
+  width: 100%;
+  /* #endif */
+  height: 50px;
+  padding: 0 15px;
+}
+.u-button--normal {
+  padding: 0 12px;
+  font-size: 14px;
+}
+.u-button--small {
+  /* #ifndef APP-NVUE */
+  min-width: 60px;
+  /* #endif */
+  height: 30px;
+  padding: 0px 8px;
+  font-size: 12px;
+}
+.u-button--mini {
+  height: 22px;
+  font-size: 10px;
+  /* #ifndef APP-NVUE */
+  min-width: 50px;
+  /* #endif */
+  padding: 0px 8px;
+}
+.u-button--disabled {
+  opacity: 0.5;
+}
+.u-button--info {
+  color: #323233;
+  background-color: #fff;
+  border-color: #ebedf0;
+  border-width: 1px;
+  border-style: solid;
+}
+.u-button--success {
+  color: #fff;
+  background-color: var(--u-success);
+  border-color: var(--u-success);
+  border-width: 1px;
+  border-style: solid;
+}
+.u-button--primary {
+  color: #fff;
+  background-color: var(--u-primary);
+  border-color: var(--u-primary);
+  border-width: 1px;
+  border-style: solid;
+}
+.u-button--error {
+  color: #fff;
+  background-color: var(--u-error);
+  border-color: var(--u-error);
+  border-width: 1px;
+  border-style: solid;
+}
+.u-button--warning {
+  color: #fff;
+  background-color: var(--u-warning);
+  border-color: var(--u-warning);
+  border-width: 1px;
+  border-style: solid;
+}
+.u-button--block {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  width: 100%;
+}
+.u-button--circle {
+  border-top-right-radius: 100px;
+  border-top-left-radius: 100px;
+  border-bottom-left-radius: 100px;
+  border-bottom-right-radius: 100px;
+}
+.u-button--square {
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+}
+.u-button__icon {
+  /* #ifndef APP-NVUE */
+  min-width: 1em;
+  line-height: inherit !important;
+  vertical-align: top;
+  /* #endif */
+}
+.u-button--plain {
+  background-color: #fff;
+}
+.u-button--hairline {
+  border-width: 0.5px !important;
+}
+</style>