@cloudbase/weda-ui 3.5.0 → 3.5.2-mp

package/components/wd-input-number/number.js

@@ -0,0 +1,309 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+
+/**
+ * 两正数字符串比较
+ * @param {*} v1
+ * @param {*} v2
+ * @returns
+ */
+const comparePositive = (v1, v2) => {
+  const v1Split = `${v1}`.split('.');
+  const v2Split = `${v2}`.split('.');
+  // 整数部分长度不等，长的大
+  if (v1Split[0].length !== v2Split[0].length) {
+    return v1Split[0].length > v2Split[0].length ? 'gt' : 'lt';
+  }
+  // 整数部分长度相等，且不相同，则从高位往低位比较
+  if (v1Split[0] !== v2Split[0]) {
+    for (let i = 0; i < v1Split[0].length; i++) {
+      if (v1Split[0][i] !== v2Split[0][i]) {
+        return +v1Split[0][i] > +v2Split[0][i] ? 'gt' : 'lt';
+      }
+    }
+  }
+  // 整数部分相等，比较小数部分
+  const len = Math.max(v1Split[1]?.length || 0, v2Split[1]?.length || 0);
+  for (let i = 0; i < len; i++) {
+    const v1Float = v1Split[1]?.[i] || 0;
+    const v2Float = v2Split[1]?.[i] || 0;
+    if (v1Float !== v2Float) {
+      return +v1Float > +v2Float ? 'gt' : 'lt';
+    }
+  }
+
+  return 'eq';
+};
+/**
+ * 数字字符串比较
+ * @param {*} v1
+ * @param {*} v2
+ * @returns
+ */
+const compareStrNum = (v1, v2) => {
+  v1 = `${v1}`;
+  v2 = `${v2}`;
+  // 负数 < 正数
+  if (v1.startsWith('-') && !v2.startsWith('-')) {
+    return 'lt';
+  }
+  // 正数 > 负数
+  if (!v1.startsWith('-') && v2.startsWith('-')) {
+    return 'gt';
+  }
+  // 两正数
+  if (!v1.startsWith('-') && !v2.startsWith('-')) {
+    return comparePositive(v1, v2);
+  }
+  // 两负数
+  if (v1.startsWith('-') && v2.startsWith('-')) {
+    return {
+      lt: 'gt',
+      gt: 'lt',
+      eq: 'eq',
+    }[comparePositive(v1.replace('-', ''), v2.replace('-', ''))];
+  }
+};
+/**
+ * 两正数字符串相减
+ * @param {*} v1
+ * @param {*} v2
+ * @returns
+ */
+const strNumMinusPositive = (v1, v2) => {
+  const v1Split = `${v1}`.split('.');
+  const v2Split = `${v2}`.split('.');
+
+  const v1Float = v1Split[1] || '';
+  const v2Float = v2Split[1] || '';
+  const maxFloatLen = Math.max(v1Float.length, v2Float.length);
+  let add = 0;
+  let res = '';
+
+  if (maxFloatLen > 0) {
+    for (let i = maxFloatLen - 1; i >= 0; i--) {
+      let temp = (+v1Float[i] || 0) - (+v2Float[i] || 0) + add;
+      if (temp < 0) {
+        temp = 10 + temp;
+        add = -1;
+      } else {
+        add = 0;
+      }
+      res = `${temp}${res}`;
+    }
+
+    res = `.${res}`;
+  }
+
+  v1 = v1Split[0].split('').reverse();
+  v2 = v2Split[0].split('').reverse();
+  const maxLen = Math.max(v1.length, v2.length);
+
+  for (let i = 0; i < maxLen; i++) {
+    let temp = (+v1[i] || 0) - (+v2[i] || 0) + add;
+
+    if (temp < 0) {
+      temp = 10 + temp;
+      add = -1;
+    } else {
+      add = 0;
+    }
+    res = `${temp}${res}`;
+  }
+
+  res = res.replace(/^0+/, '');
+
+  return res.startsWith('.') ? `0${res}` : res;
+};
+
+export const isNumber = (val) => typeof val === 'number' && !isNaN(val);
+
+export const getPercentUnit = (format) => ({ percent: '%' }[format] ?? '');
+/**
+ * 数字字符串相加
+ * @param {*} v1
+ * @param {*} v2
+ * @returns
+ */
+export const strNumPlus = (v1, v2) => {
+  const v1Split = `${v1}`.split('.');
+  const v2Split = `${v2}`.split('.');
+
+  const v1Float = v1Split[1] || '';
+  const v2Float = v2Split[1] || '';
+  const maxFloatLen = Math.max(v1Float.length, v2Float.length);
+  let add = 0;
+  let res = '';
+
+  if (maxFloatLen > 0) {
+    for (let i = maxFloatLen - 1; i >= 0; i--) {
+      const temp = (+v1Float[i] || 0) + (+v2Float[i] || 0) + add;
+      res = `${temp % 10}${res}`;
+      add = Math.floor(temp / 10);
+    }
+
+    res = `.${res}`;
+  }
+
+  v1 = v1Split[0].split('').reverse();
+  v2 = v2Split[0].split('').reverse();
+  const maxLen = Math.max(v1.length, v2.length);
+
+  for (let i = 0; i < maxLen; i++) {
+    const temp = (+v1[i] || 0) + (+v2[i] || 0) + add;
+
+    res = `${temp % 10}${res}`;
+    add = Math.floor(temp / 10);
+  }
+
+  res = `${add !== 0 ? add : ''}${res}`;
+  return res.startsWith('.') ? `0${res}` : res;
+};
+/**
+ * 数字字符串相减
+ * @param {*} v1
+ * @param {*} v2
+ * @returns
+ */
+export const strNumMinus = (v1, v2) => {
+  let res = '';
+  // 负数 - 正数
+  if (v1.startsWith('-') && !v2.startsWith('-')) {
+    res = `-${strNumPlus(v1.replace('-', ''), v2)}`;
+  }
+  // 正数 - 负数
+  if (!v1.startsWith('-') && v2.startsWith('-')) {
+    res = `${strNumPlus(v1, v2.replace('-', ''))}`;
+  }
+  // 正数 - 正数
+  if (!v1.startsWith('-') && !v2.startsWith('-')) {
+    const compare = compareStrNum(v1, v2);
+    if (compare === 'eq') return '0';
+
+    res =
+      compare === 'gt'
+        ? strNumMinusPositive(v1, v2)
+        : `-${strNumMinusPositive(v2, v1)}`;
+  }
+  // 负数 - 负数 转成 正数 - 正数
+  if (v1.startsWith('-') && v2.startsWith('-')) {
+    res = strNumMinus(v2.replace('-', ''), v1.replace('-', ''));
+  }
+
+  return res.startsWith('.') ? `0${res}` : res;
+};
+/**
+ * 处理百分比
+ * @param {*} v
+ * @param {*} type
+ * @returns
+ */
+export const dealPercent = (v, type = 'add') => {
+  if (v === 'Infinity' || v == '-Infinity') {
+    return v;
+  }
+
+  let value = `${`${v}`.replace(/-/g, '')}`;
+
+  if (type === 'add') {
+    if (!/\./.test(`${value}`)) {
+      value = `${value}00`;
+    } else {
+      const valueSplit = value.split('.');
+      value = `${valueSplit[0]}${valueSplit[1].slice(0, 2)}${
+        valueSplit[1].length <= 1 ? '0' : ''
+      }.${valueSplit[1].slice(2)}`;
+    }
+  }
+
+  if (type === 'del') {
+    if (!/\./.test(`${value}`)) {
+      const len = `${value}`.length;
+      value = `${value.slice(0, -2)}${
+        len < 2 ? new Array(2 - len).fill(0).join('') : ''
+      }.${len <= 1 ? '0' : ''}${value.slice(-2)}`;
+    } else {
+      const valueSplit = value.split('.');
+      value = `${valueSplit[0].slice(0, -2)}.${
+        valueSplit[0].length <= 1 ? '0' : ''
+      }${valueSplit[0].slice(-2)}${valueSplit[1]}`;
+    }
+  }
+
+  value = value.startsWith('.') ? `0${value}` : value;
+
+  return `${`${v}`.startsWith('-') ? '-' : ''}${value}`;
+};
+/**
+ * 小数位处理
+ * @param {*} v
+ * @param {*} decimals
+ * @param {*} type
+ * @returns
+ */
+export const dealDecimals = (v, decimals, type) => {
+  if (v === 'Infinity' || v === '-Infinity') {
+    return v;
+  }
+  let value = v;
+
+  if (type === 'percent') {
+    value = dealPercent(value, 'add');
+  } else if (type === 'delPercent') {
+    value = dealPercent(value, 'del');
+  }
+
+  if (isNumber(decimals) && decimals >= 0) {
+    if (!/\./.test(`${value}`)) {
+      value = `${value}.${new Array(decimals).fill(0).join('')}`;
+    } else {
+      const len = decimals - (`${value}`.split('.')[1]?.length || 0);
+      if (len < 0) {
+        const res = `${value}`.slice(0, len);
+        if (+`${value}`.slice(len)[0] >= 5) {
+          const minus =
+            decimals >= 1
+              ? `0.${new Array(decimals - 1).fill(0).join('')}1`
+              : '1';
+          value = strNumPlus(res, minus).replace(/\.$/, '');
+        } else {
+          value = res.replace(/\.$/, '');
+        }
+      } else {
+        value = `${value}${new Array(len).fill(0).join('')}`;
+      }
+    }
+  }
+
+  value = value !== '0' ? value.replace(/^0+/, '') : value;
+  value = value.startsWith('.') ? `0${value}` : value;
+  value = value.endsWith('.') ? value.split('.')[0] : value;
+
+  return value;
+};
+/**
+ * 数字字符串相加
+ * @param {*} v1
+ * @param {*} v2
+ * @returns
+ */
+export const strNumAddCalc = (v1, v2) => {
+  let res = '';
+  // 负数 + 正数
+  if (v1.startsWith('-') && !v2.startsWith('-')) {
+    res = `${strNumMinus(v2, v1.replace('-', ''))}`;
+  }
+  // 正数 + 负数
+  if (!v1.startsWith('-') && v2.startsWith('-')) {
+    res = `${strNumMinus(v1, v2.replace('-', ''))}`;
+  }
+  // 正数 + 正数
+  if (!v1.startsWith('-') && !v2.startsWith('-')) {
+    res = `${strNumPlus(v1, v2)}`;
+  }
+  // 负数 + 负数 转成 正数 + 正数
+  if (v1.startsWith('-') && v2.startsWith('-')) {
+    res = `-${strNumPlus(v2.replace('-', ''), v1.replace('-', ''))}`;
+  }
+
+  return res.startsWith('.') ? `0${res}` : res;
+};

package/components/wd-input-number/wd-input-number.wxss

@@ -0,0 +1,243 @@
+.wd-input-number-root {
+  --wd-input-number-content-width-max: 3.4375rem;
+  --wd-input-number-btn-text-color: var(--wd-color-text-default);
+  --wd-input-number-btn-text-color-hover: var(--wd-color-text-default);
+  --wd-input-number-btn-text-color-active: var(--wd-color-text-default);
+  --wd-input-number-btn-text-color-disabled: var(--wd-color-text-disabled);
+  --wd-input-number-btn-color-bg: transparent;
+  --wd-input-number-btn-color-bg-hover: transparent;
+  --wd-input-number-btn-color-bg-active: var(--wd-color-brand-active);
+  --wd-input-number-btn-color-bg-disabled: var(--wd-color-gray-2);
+  --wd-input-number-btn-color-border: var(--wd-color-gray-4);
+  --wd-input-number-btn-color-border-hover: var(--wd-color-brand-hover);
+  --wd-input-number-btn-color-border-active: var(--wd-color-brand-active);
+  --wd-input-number-btn-color-border-disabled: var(--wd-color-gray-4);
+  --wd-input-number-btn-height-sm: 1.5rem;
+  --wd-input-number-btn-height-md: 2rem;
+  --wd-input-number-btn-height-lg: 2.5rem;
+  --wd-input-number-btn-width-sm: 1.5rem;
+  --wd-input-number-btn-width-md: 2rem;
+  --wd-input-number-btn-width-lg: 2.5rem;
+  --wd-input-number-btn-font-sm: var(--wd-font-size-2);
+  --wd-input-number-btn-font-md: var(--wd-font-size-3);
+  --wd-input-number-btn-font-lg: var(--wd-font-size-4);
+  --wd-input-number-icon-color-bg: var(--wd-color-gray-1);
+  --wd-input-number-icon-color-bg-hover: var(--wd-color-gray-3);
+  --wd-input-number-icon-color-bg-active: var(--wd-color-gray-4);
+  --wd-input-number-icon-color-bg-disabled: var(--wd-color-gray-2);
+  --wd-input-number-icon-height-sm: 0.625rem;
+  --wd-input-number-icon-height-md: 0.875rem;
+  --wd-input-number-icon-height-lg: 1.125rem;
+  --wd-input-number-icon-width-sm: 1.25rem;
+  --wd-input-number-icon-width-md: 1.75rem;
+  --wd-input-number-icon-width-lg: 2.1875rem;
+  --wd-input-number-icon-font-sm: var(--wd-font-size-2);
+  --wd-input-number-icon-font-md: var(--wd-font-size-4);
+  --wd-input-number-icon-font-lg: var(--wd-font-size-6);
+  --wd-input-number-content-max-width: 1rem;
+}
+
+.wd-input-number-root.wd-input-number--row .wd-form-input-wrap {
+  width: 100%;
+  border-radius: var(--wd-form-input-group-border-radius);
+}
+.wd-input-number-root.wd-input-number--row .wd-form-input-wrap--no-radius-left {
+  border-radius: 0 var(--wd-form-input-group-border-radius) var(--wd-form-input-group-border-radius) 0;
+}
+.wd-input-number-root.wd-input-number--row .wd-form-input-wrap--no-radius-right {
+  border-radius: var(--wd-form-input-group-border-radius) 0 0 var(--wd-form-input-group-border-radius);
+}
+.wd-input-number-root.wd-input-number--row .wd-form-input-wrap--no-radius {
+  border-radius: 0;
+}
+.wd-input-number-root.wd-input-number--row .wd-form-input-wrap__content {
+  width: var(--wd-input-number-content-max-width);
+  min-width: var(--wd-input-number-content-max-width);
+}
+.wd-input-number-root.wd-input-number--row .wd-form-input-wrap__control {
+  min-width: 10px;
+}
+.wd-input-number-root.wd-input-number--row .wd-form-input-wrap__control-wrap {
+  width: auto;
+}
+.wd-input-number-root.wd-input-number--row .wd-form-input-group {
+  flex: 1;
+}
+.wd-input-number-root.wd-input-number--row .wd-form-input-group__content {
+  z-index: inherit;
+}
+.wd-input-number-root.wd-input-number--row .wd-form-item-wrap__control {
+  min-width: 7rem;
+}
+.wd-input-number-root.input-number-step-right .wd-form-input-group.is-not-h5 .wd-input-number__text-before {
+  margin-right: 0.5rem;
+}
+.wd-input-number-root .wd-form-input-group__content {
+  z-index: inherit;
+}
+.wd-input-number-root .wd-input-number-input-number {
+  border: 1px solid var(--wd-form-input-wrap-border-default);
+}
+.wd-input-number-root .wd-input-number-btn__before {
+  margin-right: 0.5rem;
+}
+.wd-input-number-root .wd-input-number-btn__after {
+  margin-left: 0.5rem;
+}
+.wd-input-number-root .wd-form-input-group__addon-right-percent {
+  border: none;
+  background: none;
+}
+.wd-input-number-root .wd-form-input-wrap--no-padding-right {
+  padding-right: 0;
+}
+.wd-input-number-root .wd-form-input-wrap--no-padding-right .wd-form-input-wrap__after {
+  margin-right: 0;
+}
+.wd-input-number__text-after {
+  color: var(--wd-color-text-default);
+}
+.wd-input-number .wd-form-input-wrap__input-row {
+  text-align: center;
+}
+.wd-input-number-btn {
+  flex: none;
+  width: var(--wd-input-number-btn-width-md);
+  height: var(--wd-input-number-btn-height-md);
+  min-height: var(--wd-input-number-btn-height-md);
+  background-color: var(--wd-input-number-btn-color-bg);
+  border-color: var(--wd-input-number-btn-color-border);
+  color: var(--wd-input-number-btn-text-color);
+}
+.wd-input-number-btn.size-md {
+  width: var(--wd-input-number-btn-width-md);
+  height: var(--wd-input-number-btn-height-md);
+  min-height: var(--wd-input-number-btn-height-md);
+  font-size: var(--wd-input-number-btn-font-md);
+}
+.wd-input-number-btn.size-sm {
+  width: var(--wd-input-number-btn-width-sm);
+  height: var(--wd-input-number-btn-height-sm);
+  min-height: var(--wd-input-number-btn-height-sm);
+  font-size: var(--wd-input-number-btn-font-sm);
+}
+.wd-input-number-btn.size-lg {
+  width: var(--wd-input-number-btn-width-lg);
+  height: var(--wd-input-number-btn-height-lg);
+  min-height: var(--wd-input-number-btn-height-lg);
+  font-size: var(--wd-input-number-btn-font-lg);
+}
+.wd-input-number-btn:hover:not(.is-disabled) {
+  background-color: var(--wd-input-number-btn-color-bg-hover);
+  border-color: var(--wd-input-number-btn-color-border-hover);
+  color: var(--wd-input-number-btn-text-color-hover);
+}
+.wd-input-number-btn:active:not(.is-disabled) {
+  background-color: var(--wd-btn-color-white-active);
+  border-color: var(--wd-btn-color-brand-active);
+  color: var(--wd-input-number-btn-text-color-active);
+}
+.wd-input-number-btn.is-disabled {
+  background-color: var(--wd-input-number-btn-color-bg-disabled);
+  border-color: var(--wd-input-number-btn-color-border-disabled);
+  color: var(--wd-input-number-btn-text-color-disabled);
+}
+.wd-input-number-icon__right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-left: 0.5rem;
+}
+.wd-input-number-icon__right-item {
+  width: var(--wd-input-number-icon-width-md);
+  height: var(--wd-input-number-icon-height-md);
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background-color: var(--wd-input-number-icon-color-bg);
+}
+.wd-input-number-icon__right-item.size-md {
+  width: var(--wd-input-number-icon-width-md);
+  height: var(--wd-input-number-icon-height-md);
+  font-size: var(--wd-input-number-icon-font-md);
+}
+.wd-input-number-icon__right-item.size-sm {
+  width: var(--wd-input-number-icon-width-sm);
+  height: var(--wd-input-number-icon-height-sm);
+  font-size: var(--wd-input-number-icon-font-sm);
+}
+.wd-input-number-icon__right-item.size-lg {
+  width: var(--wd-input-number-icon-width-lg);
+  height: var(--wd-input-number-icon-height-lg);
+  font-size: var(--wd-input-number-icon-font-lg);
+}
+.wd-input-number-icon__right-item:hover:not(.is-disabled) {
+  background-color: var(--wd-input-number-icon-color-bg-hover);
+}
+.wd-input-number-icon__right-item:active:not(.is-disabled) {
+  background-color: var(--wd-input-number-icon-color-bg-active);
+}
+.wd-input-number-icon__right-item.is-disabled {
+  color: var(--wd-color-text-disabled);
+  background-color: var(--wd-input-number-icon-color-bg-disabled);
+  cursor: no-drop;
+}
+.wd-input-number__increase {
+  margin-bottom: 2px;
+  border-radius: 0 var(--wd-form-input-wrap-border-radius) 0 0;
+}
+.wd-input-number__decrease {
+  border-radius: 0 0 var(--wd-form-input-wrap-border-radius) 0;
+}
+
+.wd-form-input-wrap.size-font-sm {
+  font: var(--wd-typography-body-sm);
+}
+.wd-form-input-wrap.size-height-sm {
+  height: var(--wd-form-height-sm);
+}
+.wd-form-input-wrap.size-width-sm {
+  width: var(--wd-form-width-sm);
+}
+.wd-form-input-wrap.size-font-md {
+  font: var(--wd-typography-body-md);
+}
+.wd-form-input-wrap.size-height-md {
+  height: var(--wd-form-item-height-md);
+}
+.wd-form-input-wrap.size-width-md {
+  width: var(--wd-form-width-md);
+}
+.wd-form-input-wrap.size-font-lg {
+  font: var(--wd-typography-body-lg);
+}
+.wd-form-input-wrap.size-height-lg {
+  height: var(--wd-form-item-height-lg);
+}
+.wd-form-input-wrap.size-width-lg {
+  width: var(--wd-form-width-lg);
+}
+.wd-form-input-wrap.size-width-hundred {
+  width: 100%;
+}
+
+.wd-form-item--weui .wd-form-input-wrap.is-not-h5.wd-form-input-wrap--no-border,
+.wd-form-input-wrap.is-not-h5.wd-form-input-wrap--no-border {
+  padding-left: 0;
+  flex: 1;
+}
+.wd-form-item--weui .wd-form-input-wrap.is-not-h5.wd-form-input-wrap--no-border .wd-form-input-wrap__content,
+.wd-form-input-wrap.is-not-h5.wd-form-input-wrap--no-border .wd-form-input-wrap__content {
+  width: auto;
+}
+.wd-form-item--weui .wd-form-input-wrap.is-not-h5.wd-form-input-wrap--no-border .wd-form-input-wrap__input-row,
+.wd-form-input-wrap.is-not-h5.wd-form-input-wrap--no-border .wd-form-input-wrap__input-row {
+  text-align: var(--wd-form-input-wrap-text-align);
+}
+
+.wd-form-input-wrap.is-not-h5 {
+  line-height: 2;
+}

package/components/wd-input-phone/index.js

@@ -0,0 +1,80 @@
+import { commonCompBehavior } from '../../utils/common-behavior';
+import formFieldBehavior from '../form-field-behavior/form-field-behavior';
+import itemBehavior from '../form-field-behavior/item-behavior';
+
+/**
+ * 标准化：网址
+ */
+Component({
+  options: { virtualHost: true },
+  behaviors: [itemBehavior, commonCompBehavior, formFieldBehavior],
+  properties: {
+    classRoot: {
+      type: String,
+      value: 'input-phone',
+    },
+    rules: {
+      type: Array,
+      value: [
+        {
+          format: 'mobile',
+          message: '手机校验失败',
+        },
+      ],
+    },
+  },
+  methods: {
+    convertValueToString(val) {
+      // 数据源认string
+      return String(val ?? '');
+    },
+    handleChange(event) {
+      this.setData({
+        value: this.convertValueToString(event.detail.value),
+      });
+      this.triggerEvent('change', event.detail);
+    },
+    getValue() {
+      return this.convertValueToString(this.data.value);
+    },
+    updateWidgetAPI: function (inputData = {}) {
+      const data = { ...this.data, ...inputData };
+      const {
+        name,
+        value,
+        label,
+        required,
+        visible,
+        disabled,
+        readOnly,
+        before,
+        after,
+      } = data;
+
+      this.setReadonlyAttributes?.({
+        name,
+        value,
+        label,
+        required,
+        visible,
+        disabled,
+        readOnly,
+        before,
+        after,
+      });
+    },
+  },
+  observers: {
+    'name, value, label, required, visible, disabled, readOnly, before, after':
+      function (name, value) {
+        this.updateWidgetAPI({
+          value: String(value ?? ''),
+        });
+      },
+  },
+  lifetimes: {
+    attached: function () {
+      this.updateWidgetAPI();
+    },
+  },
+});

package/components/wd-input-phone/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "inner-input": "../wd-input/inner-input/index"
+  }
+}

package/components/wd-input-phone/index.wxml

@@ -0,0 +1,55 @@
+<inner-input
+  id="{{id}}"
+  className="{{className}}"
+  style="{{style}}"
+  name="{{name}}"
+  inputValue="{{inputValue}}"
+  placeholder="{{placeholder}}"
+  size="{{size}}"
+  block="{{block}}"
+  label="{{label}}"
+  layout="{{actualLayout}}"
+  labelVisible="{{labelVisible}}"
+  labelAlign="{{labelAlign}}"
+  labelWrap="{{labelWrap}}"
+  labelWidth="{{labelWidth}}"
+  labelTips="{{labelTips}}"
+  clearable="{{clearable}}"
+  before="{{before}}"
+  after="{{after}}"
+  isUnionValue="{{isUnionValue}}"
+  prefixType="{{prefixType}}"
+  prefixIcon="{{prefixIcon}}"
+  prefixSrc="{{prefixSrc}}"
+  suffixType="{{suffixType}}"
+  suffixIcon="{{suffixIcon}}"
+  suffixSrc="{{suffixSrc}}"
+  extra="{{extra}}"
+  password="{{false}}"
+  type="number"
+  counterVisible="{{counterVisible}}"
+  focus="{{focus}}"
+  borderedH5="{{borderedH5}}"
+  borderedPc="{{borderedPc}}"
+  isNickNameType="{{false}}"
+  maxLength="11"
+  rules="{{rules}}"
+  status="{{status}}"
+  required="{{required}}"
+  requiredFlag="{{requiredFlag}}"
+  requiredMsg="{{requiredMsg}}"
+  bind:focus="handleEvent"
+  bind:blur="handleEvent"
+  bind:change="handleChange"
+  bind:clear="handleEvent"
+  bind:confirm="handleEvent"
+  bind:changeForm="changeForm"
+  classRoot="{{classRoot}}"
+  visible="{{visible}}"
+  validateState="{{validateState}}"
+  validateErrorMsg="{{validateErrorMsg}}"
+  disabled="{{disabled}}"
+  readOnly="{{readOnly}}"
+  value="{{value}}"
+  cursorSpacing="{{cursorSpacing}}"
+></inner-input>