更新记录
1.0.0(2025-05-29) 下载此版本
1、初始化提交
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | - | √ | √ | √ | √ |
其他
多语言 | 暗黑模式 | 宽屏模式 |
---|---|---|
× | × | √ |
d-text
DeedUI Text 按钮,基于 uniapp 内置组件 Text 开发实现,样式参考 VantUI,实现多端兼容。 优点:轻量化、拿来即用。不依赖其他组件和公共文件,从而减小代码包体积。
props
属性名称 | 数据类型 | 必需 | 默认值 | 说明 |
---|---|---|---|---|
text | String / Number | 否 | - | 显示的文本内容 |
type | String | 否 | default | 主题颜色类型:primary、success、default、danger、warning |
show | Boolean | 否 | true | 是否显示文本 |
fontWeight | Number / String | 否 | 400 | 字体粗细 |
bold | Boolean | 否 | false | 是否加粗,优先于 fontWeight |
decoration | String | 否 | none | 文字装饰线:none、underline、line-through |
align | String | 否 | left | 对齐方式:left、center、right |
lineHeight | Boolean | 否 | false | 行高是否与字体大小一致 |
padding | Array | 否 | ['0', '0'] | 内边距,格式:[上下]、[上, 左右]、[上, 右, 下, 左] |
margin | Array | 否 | ['0', '0'] | 外边距,格式同 padding |
block | Boolean | 否 | false | 是否为块级元素,使用 view 包裹 |
lines | Number | 否 | 0 | 最多显示行数,超出显示省略号(最大支持 5 行) |
mode | String | 否 | text | 文本处理模式:text、price、phone、name、date、link |
href | String | 否 | '' | 超链接地址(mode=link 时有效) |
call | Boolean | 否 | false | 是否拨打电话(mode=phone 时有效) |
wordWrap | String | 否 | normal | 换行方式:normal、break-word、anywhere |
openType | String | 否 | '' | 小程序打开方式,如 navigateTo |
event
事件名称 | 参数 | 说明 |
---|---|---|
click | 点击文本时触发 |
基本用法
复制代码<d-text text="这是一个默认文本" />
主题颜色
设置 type 属性控制主题色:
复制代码<d-text text="主要" type="primary" />
<d-text text="成功" type="success" />
<d-text text="默认" type="default" />
<d-text text="危险" type="danger" />
<d-text text="警告" type="warning" />
自定义颜色
设置 color 属性覆盖预设颜色
复制代码<d-text text="红色文字" color="red" />
加粗文本
设置 bold 属性开启加粗
复制代码<d-text text="这是加粗文字" bold />
设置字体大小
通过 size 控制字体大小(支持 rpx/px)
复制代码<d-text text="大号文字" size="36" />
点击事件
复制代码<d-button @click="onClick">按钮</d-button>