'!'
This commit is contained in:
@@ -6,7 +6,7 @@
|
|||||||
"tabBackground":"#ffffff"
|
"tabBackground":"#ffffff"
|
||||||
},
|
},
|
||||||
"dark": {
|
"dark": {
|
||||||
"navBgColor": "#292929",
|
"navBgColor": "#000000",
|
||||||
"navTxtStyle": "white",
|
"navTxtStyle": "white",
|
||||||
"tabFontColor":"#ffffff",
|
"tabFontColor":"#ffffff",
|
||||||
"tabBackground":"#000000"
|
"tabBackground":"#000000"
|
||||||
39
src/uni_modules/uni-number-box/changelog.md
Normal file
39
src/uni_modules/uni-number-box/changelog.md
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
## 1.2.8(2024-04-26)
|
||||||
|
- 修复 在vue2下H5黑边的bug
|
||||||
|
## 1.2.7(2024-04-26)
|
||||||
|
- 修复 在vue2手动输入后失焦导致清空数值的严重bug
|
||||||
|
## 1.2.6(2024-02-22)
|
||||||
|
- 新增 设置宽度属性width(单位:px)
|
||||||
|
## 1.2.5(2024-02-21)
|
||||||
|
- 修复 step步长小于1时,键盘类型为number的bug
|
||||||
|
## 1.2.4(2024-02-02)
|
||||||
|
- 修复 加减号垂直位置偏移样式问题
|
||||||
|
## 1.2.3(2023-05-23)
|
||||||
|
- 更新示例工程
|
||||||
|
## 1.2.2(2023-05-08)
|
||||||
|
- 修复 change 事件执行顺序错误的问题
|
||||||
|
## 1.2.1(2021-11-22)
|
||||||
|
- 修复 vue3中某些scss变量无法找到的问题
|
||||||
|
## 1.2.0(2021-11-19)
|
||||||
|
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-number-box](https://uniapp.dcloud.io/component/uniui/uni-number-box)
|
||||||
|
## 1.1.2(2021-11-09)
|
||||||
|
- 新增 提供组件设计资源,组件样式调整
|
||||||
|
## 1.1.1(2021-07-30)
|
||||||
|
- 优化 vue3下事件警告的问题
|
||||||
|
## 1.1.0(2021-07-13)
|
||||||
|
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||||
|
## 1.0.7(2021-05-12)
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 1.0.6(2021-04-20)
|
||||||
|
- 修复 uni-number-box 浮点数运算不精确的 bug
|
||||||
|
- 修复 uni-number-box change 事件触发不正确的 bug
|
||||||
|
- 新增 uni-number-box v-model 双向绑定
|
||||||
|
## 1.0.5(2021-02-05)
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
|
|
||||||
|
## 1.0.7(2021-02-05)
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
|
- 新增 支持 v-model
|
||||||
|
- 新增 支持 focus、blur 事件
|
||||||
|
- 新增 支持 PC 端
|
||||||
@@ -0,0 +1,232 @@
|
|||||||
|
<template>
|
||||||
|
<view class="uni-numbox">
|
||||||
|
<view @click="_calcValue('minus')" class="uni-numbox__minus uni-numbox-btns" :style="{background}">
|
||||||
|
<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }"
|
||||||
|
:style="{color}">-</text>
|
||||||
|
</view>
|
||||||
|
<input :disabled="disabled" @focus="_onFocus" @blur="_onBlur" class="uni-numbox__value"
|
||||||
|
:type="step<1?'digit':'number'" v-model="inputValue" :style="{background, color, width:widthWithPx}" />
|
||||||
|
<view @click="_calcValue('plus')" class="uni-numbox__plus uni-numbox-btns" :style="{background}">
|
||||||
|
<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }"
|
||||||
|
:style="{color}">+</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* NumberBox 数字输入框
|
||||||
|
* @description 带加减按钮的数字输入框
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=31
|
||||||
|
* @property {Number} value 输入框当前值
|
||||||
|
* @property {Number} min 最小值
|
||||||
|
* @property {Number} max 最大值
|
||||||
|
* @property {Number} step 每次点击改变的间隔大小
|
||||||
|
* @property {String} background 背景色
|
||||||
|
* @property {String} color 字体颜色(前景色)
|
||||||
|
* @property {Number} width 输入框宽度(单位:px)
|
||||||
|
* @property {Boolean} disabled = [true|false] 是否为禁用状态
|
||||||
|
* @event {Function} change 输入框值改变时触发的事件,参数为输入框当前的 value
|
||||||
|
* @event {Function} focus 输入框聚焦时触发的事件,参数为 event 对象
|
||||||
|
* @event {Function} blur 输入框失焦时触发的事件,参数为 event 对象
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "UniNumberBox",
|
||||||
|
emits: ['change', 'input', 'update:modelValue', 'blur', 'focus'],
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
min: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
max: {
|
||||||
|
type: Number,
|
||||||
|
default: 100
|
||||||
|
},
|
||||||
|
step: {
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
background: {
|
||||||
|
type: String,
|
||||||
|
default: '#f5f5f5'
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: '#333'
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: Number,
|
||||||
|
default: 40,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
inputValue: 0
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value(val) {
|
||||||
|
this.inputValue = +val;
|
||||||
|
},
|
||||||
|
modelValue(val) {
|
||||||
|
this.inputValue = +val;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
widthWithPx() {
|
||||||
|
return this.width + 'px';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
if (this.value === 1) {
|
||||||
|
this.inputValue = +this.modelValue;
|
||||||
|
}
|
||||||
|
if (this.modelValue === 1) {
|
||||||
|
this.inputValue = +this.value;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
_calcValue(type) {
|
||||||
|
if (this.disabled) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const scale = this._getDecimalScale();
|
||||||
|
let value = this.inputValue * scale;
|
||||||
|
let step = this.step * scale;
|
||||||
|
if (type === "minus") {
|
||||||
|
value -= step;
|
||||||
|
if (value < (this.min * scale)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (value > (this.max * scale)) {
|
||||||
|
value = this.max * scale
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (type === "plus") {
|
||||||
|
value += step;
|
||||||
|
if (value > (this.max * scale)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (value < (this.min * scale)) {
|
||||||
|
value = this.min * scale
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.inputValue = (value / scale).toFixed(String(scale).length - 1);
|
||||||
|
// TODO vue2 兼容
|
||||||
|
this.$emit("input", +this.inputValue);
|
||||||
|
// TODO vue3 兼容
|
||||||
|
this.$emit("update:modelValue", +this.inputValue);
|
||||||
|
this.$emit("change", +this.inputValue);
|
||||||
|
},
|
||||||
|
_getDecimalScale() {
|
||||||
|
|
||||||
|
let scale = 1;
|
||||||
|
// 浮点型
|
||||||
|
if (~~this.step !== this.step) {
|
||||||
|
scale = Math.pow(10, String(this.step).split(".")[1].length);
|
||||||
|
}
|
||||||
|
return scale;
|
||||||
|
},
|
||||||
|
_onBlur(event) {
|
||||||
|
this.$emit('blur', event)
|
||||||
|
let value = event.detail.value;
|
||||||
|
if (isNaN(value)) {
|
||||||
|
this.inputValue = this.value;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
value = +value;
|
||||||
|
if (value > this.max) {
|
||||||
|
value = this.max;
|
||||||
|
} else if (value < this.min) {
|
||||||
|
value = this.min;
|
||||||
|
}
|
||||||
|
const scale = this._getDecimalScale();
|
||||||
|
this.inputValue = value.toFixed(String(scale).length - 1);
|
||||||
|
this.$emit("input", +this.inputValue);
|
||||||
|
this.$emit("update:modelValue", +this.inputValue);
|
||||||
|
this.$emit("change", +this.inputValue);
|
||||||
|
},
|
||||||
|
_onFocus(event) {
|
||||||
|
this.$emit('focus', event)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
$box-height: 26px;
|
||||||
|
$bg: #f5f5f5;
|
||||||
|
$br: 2px;
|
||||||
|
$color: #333;
|
||||||
|
|
||||||
|
.uni-numbox {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-numbox-btns {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 8px;
|
||||||
|
background-color: $bg;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: pointer;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-numbox__value {
|
||||||
|
margin: 0 2px;
|
||||||
|
background-color: $bg;
|
||||||
|
width: 40px;
|
||||||
|
height: $box-height;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
border-width: 0;
|
||||||
|
color: $color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-numbox__minus {
|
||||||
|
border-top-left-radius: $br;
|
||||||
|
border-bottom-left-radius: $br;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-numbox__plus {
|
||||||
|
border-top-right-radius: $br;
|
||||||
|
border-bottom-right-radius: $br;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-numbox--text {
|
||||||
|
// fix nvue
|
||||||
|
line-height: 20px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 300;
|
||||||
|
color: $color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-numbox .uni-numbox--disabled {
|
||||||
|
color: #c0c0c0 !important;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: not-allowed;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
83
src/uni_modules/uni-number-box/package.json
Normal file
83
src/uni_modules/uni-number-box/package.json
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
{
|
||||||
|
"id": "uni-number-box",
|
||||||
|
"displayName": "uni-number-box 数字输入框",
|
||||||
|
"version": "1.2.8",
|
||||||
|
"description": "NumberBox 带加减按钮的数字输入框组件,用户可以控制每次点击增加的数值,支持小数。",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"数字输入框"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||||
|
"type": "component-vue"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": ["uni-scss"],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y",
|
||||||
|
"alipay": "n"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
13
src/uni_modules/uni-number-box/readme.md
Normal file
13
src/uni_modules/uni-number-box/readme.md
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
|
||||||
|
|
||||||
|
## NumberBox 数字输入框
|
||||||
|
> **组件名:uni-number-box**
|
||||||
|
> 代码块: `uNumberBox`
|
||||||
|
|
||||||
|
|
||||||
|
带加减按钮的数字输入框。
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-number-box)
|
||||||
|
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
|
||||||
|
|
||||||
|
|
||||||
10
src/uni_modules/uni-title/changelog.md
Normal file
10
src/uni_modules/uni-title/changelog.md
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
## 1.1.1(2022-05-19)
|
||||||
|
- 修改组件描述
|
||||||
|
## 1.1.0(2021-11-19)
|
||||||
|
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||||
|
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-title](https://uniapp.dcloud.io/component/uniui/uni-title)
|
||||||
|
## 1.0.2(2021-05-12)
|
||||||
|
- 新增 示例地址
|
||||||
|
- 修复 示例项目缺少组件的Bug
|
||||||
|
## 1.0.1(2021-02-05)
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
88
src/uni_modules/uni-title/package.json
Normal file
88
src/uni_modules/uni-title/package.json
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
{
|
||||||
|
"id": "uni-title",
|
||||||
|
"displayName": "uni-title 章节标题",
|
||||||
|
"version": "1.1.1",
|
||||||
|
"description": "章节标题,通常用于记录页面标题,使用当前组件,uni-app 如果开启统计,将会自动统计页面标题",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"标题",
|
||||||
|
"章节",
|
||||||
|
"章节标题",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example_temps"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"category": [
|
||||||
|
"前端组件",
|
||||||
|
"通用组件"
|
||||||
|
],
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "无",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": ["uni-scss"],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "y",
|
||||||
|
"aliyun": "y"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"App": {
|
||||||
|
"app-vue": "y",
|
||||||
|
"app-nvue": "y"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "y",
|
||||||
|
"Android Browser": "y",
|
||||||
|
"微信浏览器(Android)": "y",
|
||||||
|
"QQ浏览器(Android)": "y"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "y",
|
||||||
|
"IE": "y",
|
||||||
|
"Edge": "y",
|
||||||
|
"Firefox": "y",
|
||||||
|
"Safari": "y"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "y",
|
||||||
|
"阿里": "y",
|
||||||
|
"百度": "y",
|
||||||
|
"字节跳动": "y",
|
||||||
|
"QQ": "y"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
},
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "y",
|
||||||
|
"vue3": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
14
src/uni_modules/uni-title/readme.md
Normal file
14
src/uni_modules/uni-title/readme.md
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
|
||||||
|
|
||||||
|
## Title 标题
|
||||||
|
> **组件名:uni-title**
|
||||||
|
> 代码块: `uTitle`
|
||||||
|
|
||||||
|
|
||||||
|
章节标题,通常用于记录页面标题,使用当前组件,uni-app 如果开启统计,将会自动统计页面标题 。
|
||||||
|
|
||||||
|
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-title)
|
||||||
|
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Reference in New Issue
Block a user