同步版本
This commit is contained in:
唐明明
@@ -478,7 +478,7 @@
|
||||
.nvTabBox{position: absolute!important;}
|
||||
.nvTab{flex-direction: column!important;align-items: center;justify-content: flex-end;margin: 0 10rpx;position: relative;}
|
||||
.nTTxt,.nTTxt-ac{padding: 0 10rpx;line-height: 88rpx;}
|
||||
.nTLine,.nTLine-ac{height: 4rpx;border-radius: 2rpx;background: transparent;position: absolute;bottom: 0;left: 0;right: 0;}
|
||||
.nTLine,.nTLine-ac{height: 4rpx;border-radius: 2rpx;background: transparent;position: absolute;bottom: 10rpx;left: 0;right: 0;}
|
||||
.nTTxt-ac{color: $mainColor;}
|
||||
.nTLine-ac{background: $mainColor;}
|
||||
.nvTabHide{width:0;height:0;margin:0;overflow:hidden;}
|
||||
|
||||
18
uni_modules/uni-number-box/changelog.md
Normal file
18
uni_modules/uni-number-box/changelog.md
Normal file
@@ -0,0 +1,18 @@
|
||||
## 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,203 @@
|
||||
<template>
|
||||
<view class="uni-numbox">
|
||||
<view @click="_calcValue('minus')" class="uni-numbox__minus uni-cursor-point">
|
||||
<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }">-</text>
|
||||
</view>
|
||||
<input :disabled="disabled" @focus="_onFocus" @blur="_onBlur" class="uni-numbox__value" type="number" v-model="inputValue"/>
|
||||
<view @click="_calcValue('plus')" class="uni-numbox__plus uni-cursor-point">
|
||||
<text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }">+</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 {Boolean} disabled = [true|false] 是否为禁用状态
|
||||
* @event {Function} change 输入框值改变时触发的事件，参数为输入框当前的 value
|
||||
*/
|
||||
|
||||
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
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
inputValue: 0
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
this.inputValue = +val;
|
||||
},
|
||||
modelValue(val){
|
||||
this.inputValue = +val;
|
||||
}
|
||||
},
|
||||
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);
|
||||
this.$emit("change", +this.inputValue);
|
||||
// TODO vue2 兼容
|
||||
this.$emit("input", +this.inputValue);
|
||||
// TODO vue3 兼容
|
||||
this.$emit("update:modelValue", +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 (!value) {
|
||||
this.inputValue = this.min;
|
||||
this.$emit("change", +this.inputValue);
|
||||
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("change", +this.inputValue);
|
||||
this.$emit("input", +this.inputValue);
|
||||
},
|
||||
_onFocus(event) {
|
||||
this.$emit('focus', event)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
$box-height: 50rpx;
|
||||
/* #ifdef APP-NVUE */
|
||||
$box-line-height: 50rpx;
|
||||
/* #endif */
|
||||
$box-line-height: 50rpx;
|
||||
$box-width: 50rpx;
|
||||
|
||||
.uni-numbox {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
height: $box-height;
|
||||
line-height: $box-height - 7rpx;
|
||||
// width: 120px;
|
||||
}
|
||||
|
||||
.uni-cursor-point {
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-numbox__value {
|
||||
background-color: $uni-bg-color;
|
||||
width: 50px;
|
||||
height: $box-height;
|
||||
text-align: center;
|
||||
font-size: $uni-font-size-lg;
|
||||
}
|
||||
|
||||
.uni-numbox__minus {
|
||||
width: $box-width;
|
||||
height: $box-height;
|
||||
background: $border-color-lg;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.uni-numbox__plus {
|
||||
width: $box-width;
|
||||
height: $box-height;
|
||||
background: $border-color-lg;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.uni-numbox--text {
|
||||
font-size: 20px;
|
||||
color: $uni-text-color;
|
||||
}
|
||||
|
||||
.uni-numbox--disabled {
|
||||
color: $uni-text-color-disable;
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
81
uni_modules/uni-number-box/package.json
Normal file
81
uni_modules/uni-number-box/package.json
Normal file
@@ -0,0 +1,81 @@
|
||||
{
|
||||
"id": "uni-number-box",
|
||||
"displayName": "uni-number-box 数字输入框",
|
||||
"version": "1.1.1",
|
||||
"description": "NumberBox 带加减按钮的数字输入框组件，用户可以控制每次点击增加的数值，支持小数。",
|
||||
"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": [],
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
50
uni_modules/uni-number-box/readme.md
Normal file
50
uni_modules/uni-number-box/readme.md
Normal file
@@ -0,0 +1,50 @@
|
||||
|
||||
|
||||
## NumberBox 数字输入框
|
||||
> **组件名：uni-number-box**
|
||||
> 代码块： `uNumberBox`
|
||||
|
||||
|
||||
带加减按钮的数字输入框。
|
||||
|
||||
### 安装方式
|
||||
|
||||
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
|
||||
|
||||
如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
|
||||
|
||||
### 基本用法
|
||||
|
||||
在 ``template`` 中使用组件
|
||||
|
||||
```html
|
||||
<uni-number-box></uni-number-box>
|
||||
<uni-number-box v-model = "vModelValue" />
|
||||
<uni-number-box :min="0" :max="9"></uni-number-box>
|
||||
<uni-number-box @change="bindChange"></uni-number-box>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### NumberBox Props
|
||||
|
||||
|属性名 |类型 |默认值 |说明 |
|
||||
|:-: |:-: |:-: |:-: |
|
||||
|value/v-model|Number |0 |输入框当前值 |
|
||||
|min |Number |0 |最小值 |
|
||||
|max |Number |100 |最大值 |
|
||||
|step |Number |1 |每次点击改变的间隔大小 |
|
||||
|disabled |Boolean|false |是否为禁用状态 |
|
||||
|
||||
### NumberBox Events
|
||||
|
||||
|事件名称 |说明 |返回值 |
|
||||
|:-: |:-: |:-: |
|
||||
|change |输入框值改变时触发的事件，参数为输入框当前的 value |- |
|
||||
|focus |输入框聚焦时触发的事件，参数为 event 对象 |- |
|
||||
|blur |输入框失焦时触发的事件，参数为 event 对象 |- |
|
||||
|
||||
|
||||
## 组件示例
|
||||
|
||||
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/number-box/number-box](https://hellouniapp.dcloud.net.cn/pages/extUI/number-box/number-box)
|
||||
Reference in New Issue
Block a user