stellar-ui-plus 1.16.18

package/components/ste-barcode/encode.ts

@@ -0,0 +1,317 @@
+const CHAR_TILDE = 126
+
+const SET_STARTA = 103
+const SET_STARTB = 104
+const SET_STARTC = 105
+const SET_SHIFT = 98
+const SET_CODEA = 101
+const SET_CODEB = 100
+const SET_STOP = 106
+
+const CODESET = {
+  ANY: 1,
+  AB: 2,
+  A: 3,
+  B: 4,
+  C: 5,
+}
+
+export const PATTERNS = [
+  [2, 1, 2, 2, 2, 2, 0, 0], // 0
+  [2, 2, 2, 1, 2, 2, 0, 0], // 1
+  [2, 2, 2, 2, 2, 1, 0, 0], // 2
+  [1, 2, 1, 2, 2, 3, 0, 0], // 3
+  [1, 2, 1, 3, 2, 2, 0, 0], // 4
+  [1, 3, 1, 2, 2, 2, 0, 0], // 5
+  [1, 2, 2, 2, 1, 3, 0, 0], // 6
+  [1, 2, 2, 3, 1, 2, 0, 0], // 7
+  [1, 3, 2, 2, 1, 2, 0, 0], // 8
+  [2, 2, 1, 2, 1, 3, 0, 0], // 9
+  [2, 2, 1, 3, 1, 2, 0, 0], // 10
+  [2, 3, 1, 2, 1, 2, 0, 0], // 11
+  [1, 1, 2, 2, 3, 2, 0, 0], // 12
+  [1, 2, 2, 1, 3, 2, 0, 0], // 13
+  [1, 2, 2, 2, 3, 1, 0, 0], // 14
+  [1, 1, 3, 2, 2, 2, 0, 0], // 15
+  [1, 2, 3, 1, 2, 2, 0, 0], // 16
+  [1, 2, 3, 2, 2, 1, 0, 0], // 17
+  [2, 2, 3, 2, 1, 1, 0, 0], // 18
+  [2, 2, 1, 1, 3, 2, 0, 0], // 19
+  [2, 2, 1, 2, 3, 1, 0, 0], // 20
+  [2, 1, 3, 2, 1, 2, 0, 0], // 21
+  [2, 2, 3, 1, 1, 2, 0, 0], // 22
+  [3, 1, 2, 1, 3, 1, 0, 0], // 23
+  [3, 1, 1, 2, 2, 2, 0, 0], // 24
+  [3, 2, 1, 1, 2, 2, 0, 0], // 25
+  [3, 2, 1, 2, 2, 1, 0, 0], // 26
+  [3, 1, 2, 2, 1, 2, 0, 0], // 27
+  [3, 2, 2, 1, 1, 2, 0, 0], // 28
+  [3, 2, 2, 2, 1, 1, 0, 0], // 29
+  [2, 1, 2, 1, 2, 3, 0, 0], // 30
+  [2, 1, 2, 3, 2, 1, 0, 0], // 31
+  [2, 3, 2, 1, 2, 1, 0, 0], // 32
+  [1, 1, 1, 3, 2, 3, 0, 0], // 33
+  [1, 3, 1, 1, 2, 3, 0, 0], // 34
+  [1, 3, 1, 3, 2, 1, 0, 0], // 35
+  [1, 1, 2, 3, 1, 3, 0, 0], // 36
+  [1, 3, 2, 1, 1, 3, 0, 0], // 37
+  [1, 3, 2, 3, 1, 1, 0, 0], // 38
+  [2, 1, 1, 3, 1, 3, 0, 0], // 39
+  [2, 3, 1, 1, 1, 3, 0, 0], // 40
+  [2, 3, 1, 3, 1, 1, 0, 0], // 41
+  [1, 1, 2, 1, 3, 3, 0, 0], // 42
+  [1, 1, 2, 3, 3, 1, 0, 0], // 43
+  [1, 3, 2, 1, 3, 1, 0, 0], // 44
+  [1, 1, 3, 1, 2, 3, 0, 0], // 45
+  [1, 1, 3, 3, 2, 1, 0, 0], // 46
+  [1, 3, 3, 1, 2, 1, 0, 0], // 47
+  [3, 1, 3, 1, 2, 1, 0, 0], // 48
+  [2, 1, 1, 3, 3, 1, 0, 0], // 49
+  [2, 3, 1, 1, 3, 1, 0, 0], // 50
+  [2, 1, 3, 1, 1, 3, 0, 0], // 51
+  [2, 1, 3, 3, 1, 1, 0, 0], // 52
+  [2, 1, 3, 1, 3, 1, 0, 0], // 53
+  [3, 1, 1, 1, 2, 3, 0, 0], // 54
+  [3, 1, 1, 3, 2, 1, 0, 0], // 55
+  [3, 3, 1, 1, 2, 1, 0, 0], // 56
+  [3, 1, 2, 1, 1, 3, 0, 0], // 57
+  [3, 1, 2, 3, 1, 1, 0, 0], // 58
+  [3, 3, 2, 1, 1, 1, 0, 0], // 59
+  [3, 1, 4, 1, 1, 1, 0, 0], // 60
+  [2, 2, 1, 4, 1, 1, 0, 0], // 61
+  [4, 3, 1, 1, 1, 1, 0, 0], // 62
+  [1, 1, 1, 2, 2, 4, 0, 0], // 63
+  [1, 1, 1, 4, 2, 2, 0, 0], // 64
+  [1, 2, 1, 1, 2, 4, 0, 0], // 65
+  [1, 2, 1, 4, 2, 1, 0, 0], // 66
+  [1, 4, 1, 1, 2, 2, 0, 0], // 67
+  [1, 4, 1, 2, 2, 1, 0, 0], // 68
+  [1, 1, 2, 2, 1, 4, 0, 0], // 69
+  [1, 1, 2, 4, 1, 2, 0, 0], // 70
+  [1, 2, 2, 1, 1, 4, 0, 0], // 71
+  [1, 2, 2, 4, 1, 1, 0, 0], // 72
+  [1, 4, 2, 1, 1, 2, 0, 0], // 73
+  [1, 4, 2, 2, 1, 1, 0, 0], // 74
+  [2, 4, 1, 2, 1, 1, 0, 0], // 75
+  [2, 2, 1, 1, 1, 4, 0, 0], // 76
+  [4, 1, 3, 1, 1, 1, 0, 0], // 77
+  [2, 4, 1, 1, 1, 2, 0, 0], // 78
+  [1, 3, 4, 1, 1, 1, 0, 0], // 79
+  [1, 1, 1, 2, 4, 2, 0, 0], // 80
+  [1, 2, 1, 1, 4, 2, 0, 0], // 81
+  [1, 2, 1, 2, 4, 1, 0, 0], // 82
+  [1, 1, 4, 2, 1, 2, 0, 0], // 83
+  [1, 2, 4, 1, 1, 2, 0, 0], // 84
+  [1, 2, 4, 2, 1, 1, 0, 0], // 85
+  [4, 1, 1, 2, 1, 2, 0, 0], // 86
+  [4, 2, 1, 1, 1, 2, 0, 0], // 87
+  [4, 2, 1, 2, 1, 1, 0, 0], // 88
+  [2, 1, 2, 1, 4, 1, 0, 0], // 89
+  [2, 1, 4, 1, 2, 1, 0, 0], // 90
+  [4, 1, 2, 1, 2, 1, 0, 0], // 91
+  [1, 1, 1, 1, 4, 3, 0, 0], // 92
+  [1, 1, 1, 3, 4, 1, 0, 0], // 93
+  [1, 3, 1, 1, 4, 1, 0, 0], // 94
+  [1, 1, 4, 1, 1, 3, 0, 0], // 95
+  [1, 1, 4, 3, 1, 1, 0, 0], // 96
+  [4, 1, 1, 1, 1, 3, 0, 0], // 97
+  [4, 1, 1, 3, 1, 1, 0, 0], // 98
+  [1, 1, 3, 1, 4, 1, 0, 0], // 99
+  [1, 1, 4, 1, 3, 1, 0, 0], // 100
+  [3, 1, 1, 1, 4, 1, 0, 0], // 101
+  [4, 1, 1, 1, 3, 1, 0, 0], // 102
+  [2, 1, 1, 4, 1, 2, 0, 0], // 103
+  [2, 1, 1, 2, 1, 4, 0, 0], // 104
+  [2, 1, 1, 2, 3, 2, 0, 0], // 105
+  [2, 3, 3, 1, 1, 1, 2, 0], // 106
+]
+
+function getBytes(str: string) {
+  const bytes = []
+  for (let i = 0; i < str.length; i++)
+    bytes.push(str.charCodeAt(i))
+
+  return bytes
+}
+
+export function stringToCode128(text: string) {
+  const barc = {
+    currcs: CODESET.C,
+  }
+
+  const bytes = getBytes(text)
+  // decide starting codeset
+  let index = bytes[0] === CHAR_TILDE ? 1 : 0
+
+  const csa1 = bytes.length > 0 ? codeSetAllowedFor(bytes[index++]) : CODESET.AB
+  const csa2 = bytes.length > 0 ? codeSetAllowedFor(bytes[index++]) : CODESET.AB
+  barc.currcs = getBestStartSet(csa1, csa2)
+  barc.currcs = perhapsCodeC(bytes, barc.currcs)
+
+  // if no codeset changes this will end up with bytes.length+3
+  // start, checksum and stop
+  let codes = []
+
+  switch (barc.currcs) {
+    case CODESET.A:
+      codes.push(SET_STARTA)
+      break
+    case CODESET.B:
+      codes.push(SET_STARTB)
+      break
+    default:
+      codes.push(SET_STARTC)
+      break
+  }
+
+  for (let i = 0; i < bytes.length; i++) {
+    const b1 = bytes[i] // get the first of a pair
+
+    // get the next in the pair if possible
+    const b2 = bytes.length > i + 1 ? bytes[i + 1] : -1
+
+    codes = codes.concat(codesForChar(b1, b2, barc.currcs))
+    // code C takes 2 chars each time
+    if (barc.currcs === CODESET.C)
+      i++
+  }
+
+  // calculate checksum according to Code 128 standards
+  let checksum = codes[0]
+  for (let weight = 1; weight < codes.length; weight++)
+    checksum += weight * codes[weight]
+
+  codes.push(checksum % 103)
+
+  codes.push(SET_STOP)
+
+  // encoding should now be complete
+  return codes
+
+  function getBestStartSet(csa1: number, csa2: number) {
+    // tries to figure out the best codeset
+    // to start with to get the most compact code
+    let vote = 0
+    vote += csa1 === CODESET.A ? 1 : 0
+    vote += csa1 === CODESET.B ? -1 : 0
+    vote += csa2 === CODESET.A ? 1 : 0
+    vote += csa2 === CODESET.B ? -1 : 0
+    // tie goes to B due to my own predudices
+    return vote > 0 ? CODESET.A : CODESET.B
+  }
+
+  function perhapsCodeC(bytes: number[], codeset: number) {
+    for (let i = 0; i < bytes.length; i++) {
+      const b = bytes[i]
+      if ((b < 48 || b > 57) && b !== CHAR_TILDE)
+        return codeset
+    }
+    return CODESET.C
+  }
+
+  // chr1 is current byte
+  // chr2 is the next byte to process. looks ahead.
+  function codesForChar(chr1: number, chr2: number, currcs: number) {
+    const result = []
+    let shifter = -1
+
+    if (charCompatible(chr1, currcs)) {
+      /* eslint-disable no-unused-expressions */
+      if (currcs === CODESET.C) {
+        if (chr2 === -1) {
+          shifter === SET_CODEB
+          currcs = CODESET.B
+        }
+        else if (chr2 !== -1 && !charCompatible(chr2, currcs)) {
+          // need to check ahead as well
+          if (charCompatible(chr2, CODESET.A)) {
+            shifter = SET_CODEA
+            currcs = CODESET.A
+          }
+          else {
+            shifter = SET_CODEB
+            currcs = CODESET.B
+          }
+        }
+      }
+      /* eslint-enable no-unused-expressions */
+    }
+    else {
+      // if there is a next char AND that next char is also not compatible
+
+      if (chr2 !== -1 && !charCompatible(chr2, currcs)) {
+        // need to switch code sets
+        switch (currcs) {
+          case CODESET.A:
+            shifter = SET_CODEB
+            currcs = CODESET.B
+            break
+          case CODESET.B:
+            shifter = SET_CODEA
+            currcs = CODESET.A
+            break
+        }
+      }
+      else {
+        // no need to shift code sets, a temporary SHIFT will suffice
+        shifter = SET_SHIFT
+      }
+    }
+
+    // ok some type of shift is nessecary
+    if (shifter !== -1) {
+      result.push(shifter)
+      // result.push(codeValue(chr2));-----------------------------------
+      result.push(codeValue(chr1))
+    }
+    else {
+      if (currcs === CODESET.C) {
+        // include next as well
+        result.push(codeValue(chr1, chr2))
+      }
+      else {
+        result.push(codeValue(chr1))
+      }
+    }
+    barc.currcs = currcs
+
+    return result
+  }
+}
+
+// reduce the ascii code to fit into the Code128 char table
+function codeValue(chr1: number, chr2: any = undefined) {
+  if (typeof chr2 === 'undefined')
+    return chr1 >= 32 ? chr1 - 32 : chr1 + 64
+  else
+    return Number.parseInt(String.fromCharCode(chr1) + String.fromCharCode(chr2))
+}
+
+function charCompatible(chr: number, codeset: number) {
+  const csa = codeSetAllowedFor(chr)
+  if (csa === CODESET.ANY)
+    return true
+    // if we need to change from current
+  if (csa === CODESET.AB)
+    return true
+  if (csa === CODESET.A && codeset === CODESET.A)
+    return true
+  if (csa === CODESET.B && codeset === CODESET.B)
+    return true
+  return false
+}
+
+function codeSetAllowedFor(chr: number) {
+  if (chr >= 48 && chr <= 57) {
+    // 0-9
+    return CODESET.ANY
+  }
+  else if (chr >= 32 && chr <= 95) {
+    // 0-9 A-Z
+    return CODESET.AB
+  }
+  else {
+    // if non printable
+    return chr < 32 ? CODESET.A : CODESET.B
+  }
+}

package/components/ste-barcode/props.ts

@@ -0,0 +1,7 @@
+export default {
+  content: { type: String, required: true },
+  width: { type: Number, default: 300 },
+  height: { type: Number, default: 100 },
+  background: { type: String, default: '#FFFFFF' },
+  foreground: { type: String, default: '#000000' },
+}

package/components/ste-barcode/ste-barcode.easycom.json

@@ -0,0 +1,44 @@
+{
+    "name": "ste-barcode",
+    "description": "条形码组件",
+    "example": "<ste-barcode content='1234567890'></ste-barcode>",
+    "tutorial": "https://stellar-ui.intecloud.com.cn/plus/#/?active=barcode",
+    "attributes": [
+        {
+            "name": "content",
+            "description": "条形码内容(仅支持数字和字母)",
+            "type": "string"
+        },
+        {
+            "name": "width",
+            "description": "条形码宽度，单位`px`",
+            "type": "number"
+        },
+        {
+            "name": "height",
+            "description": "条形码高度，单位`px`",
+            "type": "number"
+        },
+        {
+            "name": "background",
+            "description": "背景色",
+            "type": "string"
+        },
+        {
+            "name": "foreground",
+            "description": "前景色(条形码画笔颜色)",
+            "type": "string"
+        },
+        {
+            "name": "[event]loadImage",
+            "description": "加载完成后返回条形码对应的图片数据",
+            "type": "(src:string r) => void",
+            "params": [
+                {
+                    "name": "src",
+                    "description": "图片数据"
+                }
+            ]
+        }
+    ]
+}

package/components/ste-barcode/ste-barcode.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import utils from '../../utils/utils';
+import { ref, onMounted, watch, nextTick, defineOptions, getCurrentInstance, type ComponentPublicInstance } from 'vue';
+import propsData from './props';
+import { PATTERNS, stringToCode128 } from './encode';
+
+const componentName = `ste-barcode`;
+defineOptions({
+    name: componentName,
+    options: {
+        virtualHost: true,
+    },
+});
+const instance = getCurrentInstance() as unknown as ComponentPublicInstance;
+const props = defineProps(propsData);
+const canvasId = 'ste-barcode-' + utils.guid(8);
+
+onMounted(() => {
+    initCanvas();
+});
+
+watch(
+    () => props.content,
+    val => {
+        if (!val) return;
+        initCanvas();
+    },
+    {}
+);
+
+const initCanvas = () => {
+    // #ifdef H5 || APP
+    const context = uni.createCanvasContext(canvasId, instance);
+    drawBarcodeH5(context);
+    // #endif
+
+    // #ifdef MP-WEIXIN  || MP-ALIPAY
+    uni.createSelectorQuery()
+        .in(instance)
+        .select(`#${canvasId}`)
+        .node(res => {
+            const context = res.node.getContext('2d');
+            const dpr = utils.System.getWindowInfo().pixelRatio;
+            res.node.width = props.width * dpr;
+            res.node.height = props.height * dpr;
+            context.scale(dpr, dpr);
+            drawBarcodeMP(context);
+        })
+        .exec();
+    // #endif
+};
+
+// 将 PATTERNS 码序列转换为二进制序列
+const patternsToBinary = (codes: number[]) => {
+    let binary = '';
+    for (let i = 0; i < codes.length; i++) {
+        const pattern = PATTERNS[codes[i]];
+        for (let j = 0; j < 8; j += 2) {
+            // 添加黑色条
+            binary += '1'.repeat(pattern[j]);
+            // 添加白色空格
+            if (j + 1 < 8) {
+                binary += '0'.repeat(pattern[j + 1]);
+            }
+        }
+    }
+    return binary;
+};
+
+// H5环境下的绘制方法
+const drawBarcodeH5 = (context: UniApp.CanvasContext) => {
+    if (!props.content) return;
+    // 生成编码数据
+    const codes = stringToCode128(props.content);
+    if (!codes || codes.length === 0) {
+        return;
+    }
+
+    // 转换为二进制序列
+    const barcodeData = patternsToBinary(codes);
+
+    // 清空画布
+    context.setFillStyle(props.background);
+    context.fillRect(0, 0, props.width, props.height);
+
+    // 设置条码颜色
+    context.setFillStyle(props.foreground);
+
+    // 直接使用画布宽度，不考虑边距
+    const unitWidth = props.width / barcodeData.length;
+
+    // 绘制条码
+    let x = 0;
+    for (let i = 0; i < barcodeData.length; i++) {
+        if (barcodeData[i] === '1') {
+            context.fillRect(x, 0, Math.ceil(unitWidth), props.height);
+        }
+        x += unitWidth;
+    }
+
+    context.draw();
+};
+
+// 小程序环境下的绘制方法
+const drawBarcodeMP = (context: UniApp.CanvasContext) => {
+    if (!context || !props.content) return;
+
+    const codes = stringToCode128(props.content);
+    if (!codes || codes.length === 0) return;
+
+    // 清空画布
+    context.fillStyle = props.background;
+    context.fillRect(0, 0, props.width, props.height);
+
+    const barWeight = props.width / ((codes.length - 3) * 11 + 35);
+    let x = 0;
+
+    // 绘制条码
+    context.fillStyle = props.foreground;
+    for (let i = 0; i < codes.length; i++) {
+        const pattern = PATTERNS[codes[i]];
+        for (let bar = 0; bar < 8; bar += 2) {
+            const barW = pattern[bar] * barWeight;
+            if (barW > 0) {
+                context.fillRect(x, 0, barW, props.height);
+            }
+            x += barW + pattern[bar + 1] * barWeight;
+        }
+    }
+};
+</script>
+
+<template>
+    <view class="ste-barcode-root">
+        <!-- #ifdef H5 || APP -->
+        <canvas :style="{ width: width + 'px', height: height + 'px' }" :canvas-id="canvasId" :id="canvasId" class="h5-canvas"></canvas>
+        <!-- #endif -->
+
+        <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
+        <canvas type="2d" :id="canvasId" :style="{ width: width + 'px', height: height + 'px' }" class="mp-canvas"></canvas>
+        <!-- #endif -->
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.ste-barcode-root {
+    width: fit-content;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+</style>

package/components/ste-button/ATTRIBUTES.md

@@ -0,0 +1,32 @@
+#### Props
+| 属性名 | 说明  | 类型 | 默认值  | 可选值 | 支持版本 |
+| ----- | ----- | --- | ------- | ------ | -------- |
+| `mode` | 尺寸 | `number` | `200` | `100`：小<br/>`200`：中<br/>`300`：大<br/>`400`：超大 | - |
+| `color` | 文本颜色 | `string` | `#ffffff` | - | - |
+| `background` | 背景 | `string` | `#0090FF` | - | - |
+| `borderColor` | 边框颜色 | `string` | - | - | - |
+| `width` | 宽度 | `string / number` | `auto` | `auto`：自适应宽度<br/>`100%`：填满<br/>`{Number}`：自适应宽度，单位rpx | - |
+| `round` | 是否圆角按钮 | `boolean` | `false` | - | - |
+| `disabled` | 是否禁用状态 | `boolean` | `false` | - | - |
+| `loading` | 是否加载中状态 | `boolean` | `false` | - | - |
+| `stopPropagation` | 是否阻止冒泡行为 | `boolean` | `false` | - | - |
+| `openType` | 微信开放能力和支付宝开放能力 | `string` | - | - | - |
+| `scope` | 支付宝开放能力，当 openType 为 getAuthorize 时有效 | `string` | - | - | - |
+| `rootStyle` | 按钮样式属性 | `object` | - | - | - |
+
+
+#### Events
+| 事件名 | 说明  | 事件参数 | 支持版本 |
+| ----- | ----- | ------- | -------- |
+| `click` | 非禁止并且非加载中，才能点击 | - | - |
+| `getuserinfo` | 微信小程序：用户点击该按钮时，会返回获取到的用户信息，从返回参数的 detail 中获取到的值同 wx.getUserInfo。支付宝小程序：当 open-type 为 getAuthorize 且 scope 为 userInfo 时有效。当授权成功时触发。 | - | - |
+| `contact` | 微信小程序：客服消息回调，open-type="contact"时有效。 | - | - |
+| `getphonenumber` | 微信小程序：手机号快速验证回调，open-type=getPhoneNumber时有效。Tips：在触发 bindgetphonenumber 回调后应立即隐藏手机号按钮组件，或置为 disabled 状态，避免用户重复授权手机号产生额外费用。支付宝小程序：当 open-type 为 getAuthorize 且 scope 为 phoneNumber 时有效。当授权成功时触发。 | - | - |
+| `getrealtimephonenumber` | 微信小程序：手机号实时验证回调，open-type=getRealtimePhoneNumber 时有效。Tips：在触发 bindgetrealtimephonenumber 回调后应立即隐藏手机号按钮组件，或置为 disabled 状态，避免用户重复授权手机号产生额外费用。 | - | - |
+| `agreeprivacyauthorization` | 微信小程序：用户同意隐私协议事件回调，open-type=agreePrivacyAuthorization时有效 （Tips: 如果使用 onNeedPrivacyAuthorization 接口，需要在 bindagreeprivacyauthorization 触发后再调用 resolve({ event: "agree", buttonId })） | - | - |
+| `error` | 微信小程序：当使用开放能力时，发生错误的回调，open-type=launchApp时有效 支付宝小程序：当 open-type 为 getAuthorize 时有效。当授权失败时触发。event.detail = {type, errorMessage}，此时 type 的值为 getAuthorize。 | - | - |
+| `launchapp` | 微信小程序：打开 APP 成功的回调，open-type=launchApp时有效 | - | - |
+| `opensetting` | 微信小程序：在打开授权设置页后回调，open-type=openSetting时有效 | - | - |
+| `chooseavatar` | 微信小程序：获取用户头像回调，open-type=chooseAvatar时有效。返回 e.detail.avatarUrl 为头像临时文件链接。 | - | - |
+| `getAuthorize` | 支付宝小程序：当 open-type 为 getAuthorize 时有效。当授权成功时触发。 | - | - |
+| `followLifestyle` | 支付宝小程序：当 open-type 为 lifestyle 时有效。当点击按钮时触发。event.detail = { followStatus }，folllowStatus 合法值有 1、2、3，其中 1 表示已关注。2 表示用户不允许关注。3 表示发生未知错误；。 | - | - |

package/components/ste-button/README.md

@@ -0,0 +1,119 @@
+# Button 按钮
+
+基础按钮组件
+
+---$
+
+### 代码演示
+
+#### 按钮大小
+
+通过`mode`设置按钮的大小，默认值是`200`
+
+```html
+<ste-button :mode="400">超大按钮</ste-button>
+<ste-button :mode="300">大按钮</ste-button>
+<ste-button>中按钮</ste-button>
+<ste-button :mode="100">小按钮</ste-button>
+```
+
+#### 文本颜色
+
+通过`color`设置字体颜色
+
+```html
+<ste-button :color="'#000000'">文本颜色按钮</ste-button>
+```
+
+#### 背景
+
+通过`background`设置背景，支持纯颜色、背景图、渐变色
+
+```html
+<ste-button background="#ff1e19">按钮</ste-button>
+<ste-button background="https://image.whzb.com/chain/StellarUI/image/精选会员瓷片.png">背景图</ste-button>
+<ste-button background="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))">渐变色</ste-button>
+```
+
+#### 边框颜色
+
+通过`borderColor`设置边框颜色，默认值是`#ffffff`
+
+```html
+<ste-button borderColor="#ff1e19">文本颜色按钮</ste-button>
+```
+
+#### 宽度
+
+通过`width`设置宽度，默认值是`auto`
+
+-   设置值为`100%`，填满父容器
+-   设置具体值时，按具体数值的宽度，单位是rpx
+
+```html
+<ste-button width="100%">宽度填满</ste-button>
+<ste-button width="500">自定义宽度-500rpx</ste-button>
+<ste-button>自适应宽度</ste-button>
+```
+
+#### 圆角按钮
+
+通过`round`设置按钮是否为圆角，默认值是`true`
+
+```html
+<ste-button>圆角按钮</ste-button>
+<ste-button :round="false">非圆角按钮</ste-button>
+```
+
+#### 禁止按钮
+
+通过`disabled`设置按钮是否禁止，默认值是`false`
+
+```html
+<ste-button disabled>禁止按钮</ste-button>
+```
+
+#### 加载中
+
+通过`loading`设置是否加载中，默认值是`false`
+
+-   `loading`值是`true`时不允许点击，且按钮内容会变成`加载中......`
+
+```html
+<ste-button loading>按钮</ste-button>
+```
+
+#### 插槽
+
+```html
+<ste-button>
+    <text style="display: inline-block">
+        <ste-icon code="&#xe68f;" :size="32" :color="'#ffffff'" :marginRight="8"></ste-icon>
+    </text>
+    <text>购卡</text>
+</ste-button>
+<ste-button>提交订单</ste-button>
+```
+
+#### 超长文字
+
+```html
+<ste-button width="100%">提交-按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮</ste-button>
+```
+
+---$
+
+### API
+
+<!-- props -->
+
+#### Slots
+
+| 插槽名    | 说明     | 插槽参数 | 支持版本 |
+| --------- | -------- | -------- | -------- |
+| `default` | 按钮内容 | -        | -        |
+
+---$
+{{fuyuwei}}
+
+{{qinpengfei}}

package/components/ste-button/config.json

@@ -0,0 +1,5 @@
+{
+  "group": "基础组件",
+  "title": "Button 按钮",
+  "icon": "https://image.whzb.com/chain/StellarUI/%E7%BB%84%E4%BB%B6%E5%9B%BE%E6%A0%87/button.png"
+}