Compare commits

...

5 Commits

3 changed files with 60 additions and 36 deletions

View File

@@ -248,6 +248,7 @@
return (index, type) => { return (index, type) => {
let color = type === 'bg' ? '' : this.color let color = type === 'bg' ? '' : this.color
let day = index + 1 let day = index + 1
let date = `${this.year}-${this.month}-${day}` let date = `${this.year}-${this.month}-${day}`
let timestamp = new Date(date.replace(/\-/g,'/')).getTime() let timestamp = new Date(date.replace(/\-/g,'/')).getTime()
let start = this.startDate.replace(/\-/g,'/') let start = this.startDate.replace(/\-/g,'/')
@@ -487,8 +488,9 @@
let daysArr = days.map((item) => { let daysArr = days.map((item) => {
let bottomInfo = this.showLunar ? Calendar.solar2lunar(this.year, this.month, item).IDayCn : '' let bottomInfo = this.showLunar ? Calendar.solar2lunar(this.year, this.month, item).IDayCn : ''
let color = this.showLunar ? this.lunarColor : this.activeColor let color = this.showLunar ? this.lunarColor : this.activeColor
let date = `${this.year}-${this.month}-${item}`
if ( if (
(this.mode === 'date' && this.day == item) || (this.mode === 'date' && date == this.activeDate) ||
(this.mode === 'range' && (this.startDay == item || this.endDay == item)) (this.mode === 'range' && (this.startDay == item || this.endDay == item))
) { ) {
color = this.activeColor color = this.activeColor

View File

@@ -45,7 +45,7 @@
v-if="type === 'select'" v-if="type === 'select'"
class="tn-input__text" class="tn-input__text"
> >
{{defaultValue}} <text :class="defaultValue == undefined || defaultValue == '' ? 'tn-input__placeholder':''">{{defaultValue == undefined || defaultValue == '' ? placeholder : defaultValue }}</text>
</view> </view>
<input <input
@@ -337,28 +337,7 @@
/** /**
* input事件 * input事件
*/ */
handleInput:debounceFun(function(event){ handleInput:()=>{},
let value = event.detail.value
// 是否需要去掉空格
if (this.trim) value = this.$tn.string.trim(value)
// 原生事件
this.$emit('input', value)
// model赋值
this.defaultValue = value
// 过一个生命周期再发送事件给tn-form-item否则this.$emit('input')更新了父组件的值,但是微信小程序上
// 尚未更新到tn-form-item导致获取的值为空从而校验混论
// 这里不能延时时间太短或者使用this.$nextTick否则在头条上会造成混乱
setTimeout(() => {
// 头条小程序由于自身bug导致中文下每按下一个键(尚未完成输入),都会触发一次@input导致错误这里进行判断处理
// #ifdef MP-TOUTIAO
if (this.$tn.string.trim(value) === this.lastValue) return
this.lastValue = value
// #endif
// 发送当前的值到form-item进行校验
this.dispatch('tn-form-item','on-form-change', value)
}, 40)
},this.blockTime),
/** /**
* blur事件 * blur事件
*/ */
@@ -407,7 +386,35 @@
inputClick() { inputClick() {
this.$emit('click') this.$emit('click')
} }
} },
mounted() {
let that = this;
that.handleInput = debounceFun(function(event){
let value = event.detail.value
// 是否需要去掉空格
try {
if (that.trim) value = that.$tn.string.trim(value)
}catch (e){
}
// 原生事件
that.$emit('input', value)
// model赋值
that.defaultValue = value
// 过一个生命周期再发送事件给tn-form-item否则this.$emit('input')更新了父组件的值,但是微信小程序上
// 尚未更新到tn-form-item导致获取的值为空从而校验混论
// 这里不能延时时间太短或者使用this.$nextTick否则在头条上会造成混乱
setTimeout(() => {
// 头条小程序由于自身bug导致中文下每按下一个键(尚未完成输入),都会触发一次@input导致错误这里进行判断处理
// #ifdef MP-TOUTIAO
if (that.$tn.string.trim(value) === that.lastValue) return
that.lastValue = value
// #endif
// 发送当前的值到form-item进行校验
that.dispatch('tn-form-item','on-form-change', value)
}, 40)
},that.blockTime);
},
} }
</script> </script>
@@ -418,6 +425,10 @@
position: relative; position: relative;
flex: 1; flex: 1;
&__placeholder{
color: $tn-font-sub-color;
}
&__input { &__input {
font-size: 28rpx; font-size: 28rpx;
color: $tn-font-color; color: $tn-font-color;

View File

@@ -2,7 +2,7 @@
<view <view
class="tn-switch-class tn-switch" class="tn-switch-class tn-switch"
:class="[ :class="[
value ? 'tn-switch--on' : '', switchState ? 'tn-switch--on' : '',
disabled ? 'tn-switch--disabled' : '', disabled ? 'tn-switch--disabled' : '',
`tn-switch--${shape}` `tn-switch--${shape}`
]" ]"
@@ -22,7 +22,7 @@
class="tn-switch__icon tn-switch__icon--left" class="tn-switch__icon tn-switch__icon--left"
:class="[ :class="[
`tn-icon-${leftIcon}`, `tn-icon-${leftIcon}`,
value ? 'tn-switch__icon--show' : '' switchState ? 'tn-switch__icon--show' : ''
]" ]"
:style="[iconStyle]"></view> :style="[iconStyle]"></view>
<!-- 右图标 --> <!-- 右图标 -->
@@ -31,7 +31,7 @@
class="tn-switch__icon tn-switch__icon--right" class="tn-switch__icon tn-switch__icon--right"
:class="[ :class="[
`tn-icon-${rightIcon}`, `tn-icon-${rightIcon}`,
!value ? 'tn-switch__icon--show' : '' !switchState ? 'tn-switch__icon--show' : ''
]" ]"
:style="[iconStyle]"></view> :style="[iconStyle]"></view>
</view> </view>
@@ -42,7 +42,7 @@
name: 'tn-switch', name: 'tn-switch',
props: { props: {
value: { value: {
type: Boolean, type: [Number, String, Boolean],
default: false default: false
}, },
// 按钮的样式 // 按钮的样式
@@ -106,7 +106,7 @@
switchStyle() { switchStyle() {
let style = {} let style = {}
style.fontSize = this.$tn.string.getLengthUnitValue(this.size) style.fontSize = this.$tn.string.getLengthUnitValue(this.size)
style.backgroundColor = this.value ? style.backgroundColor = this.switchState ?
this.activeColor ? this.activeColor : '#01BEFF' : this.activeColor ? this.activeColor : '#01BEFF' :
this.inactiveColor ? this.inactiveColor : '#AAAAAA' this.inactiveColor ? this.inactiveColor : '#AAAAAA'
return style return style
@@ -124,22 +124,33 @@
return style return style
}, },
loadingColor() { loadingColor() {
return this.value ? this.activeColor : '' return this.switchState ? this.activeColor : ''
}
},
watch:{
value:{
handler(newVal,oldVal){
this.switchState = (this.value == this.activeValue);
}
} }
}, },
data() { data() {
return { return {
switchState:false
} }
}, },
mounted() {
this.switchState = (this.value == this.activeValue);
},
methods: { methods: {
click() { click() {
this.switchState = !this.switchState;
if (!this.disabled && !this.loading) { if (!this.disabled && !this.loading) {
if (this.vibrateShort) uni.vibrateShort() if (this.vibrateShort) uni.vibrateShort()
this.$emit('input', !this.value) this.$emit('input', this.switchState ? this.activeValue : this.inactiveValue)
// 放到下一个生命周期因为双向绑定的value修改父组件状态需要时间且是异步的 // 放到下一个生命周期因为双向绑定的value修改父组件状态需要时间且是异步的
this.$nextTick(() => { this.$nextTick(() => {
this.$emit('change', this.value ? this.activeValue : this.inactiveValue); this.$emit('change', this.switchState ? this.activeValue : this.inactiveValue);
}) })
} }
} }