Skip to content

U
uview-ui
Commit 31a991ae authored by wlxuqu's avatar wlxuqu
Browse files
Options

Merge branch 'dev' into yiruiwen

parents ef176027 df1303d6
Show whitespace changes
Inline Side-by-side
Showing with 206 additions and 67 deletions
pages/componentsB/rate/index.vue
View file @ 31a991ae
......@@ -6,7 +6,7 @@
<u-rate v-model="value" :count="count" @change="change"
:active-color="activeColor" :inaction-color="inactiveColor"
:active-icon="activeIcon" :inactive-icon="inactiveIcon"
:disabled="disabled"></u-rate>
:disabled="disabled" :colors="colors" :icons="icons"></u-rate>
</view>
</view>
<view class="u-config-wrap">
......@@ -29,6 +29,10 @@
<view class="u-item-title">自定义图标</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="iconChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">是否分层</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="decimalChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">是否禁用</view>
<u-subsection vibrateShort current="1" :list="['是', '否']" @change="disabledChange"></u-subsection>
......@@ -53,7 +57,9 @@
count: 5,
customIcon: false,
plain: false,
value: 0
value: 0,
colors: [],
icons: []
}
},
watch: {
......@@ -93,6 +99,15 @@
this.inactiveColor = '#b2b2b2';
}
},
decimalChange(index) {
if(index == 0) {
this.colors = ['#ffc454', '#ffb409', '#ff9500'];
this.icons = ['thumb-down-fill', 'thumb-down-fill', 'thumb-up-fill', 'thumb-up-fill'];
} else {
this.colors = [];
this.icons = [];
}
},
iconChange(index) {
this.customIcon = !index;
},
......
uview-ui/components/u-icon/u-icon.vue
View file @ 31a991ae
<template>
<view :style="[customStyle]" class="u-icon" @tap="click" :class="['u-icon--' + labelPos]">
<image class="u-icon__img" v-if="isImg" :src="name" :mode="imgMode" :style="[imgStyle]"></image>
<text v-else class="u-icon__icon" :class="customClass" :style="[iconStyle]" :hover-class="hoverClass" @touchstart="touchstart"></text>
<text v-else class="u-icon__icon" :class="customClass" :style="[iconStyle]" :hover-class="hoverClass"
@touchstart="touchstart">
<text v-if="showDecimalIcon" :style="[decimalIconStyle]" :class="decimalIconClass" :hover-class="hoverClass"
class="u-icon__decimal">
</text>
</text>
<!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
<text v-if="label !== ''" class="u-icon__label" :style="{
color: labelColor,
......@@ -10,7 +15,8 @@
marginTop: labelPos == 'bottom' ? $u.addUnit(marginTop) : 0,
marginRight: labelPos == 'left' ? $u.addUnit(marginRight) : 0,
marginBottom: labelPos == 'top' ? $u.addUnit(marginBottom) : 0,
}">{{label}}</text>
}">{{ label }}
</text>
</view>
</template>
......@@ -38,6 +44,11 @@
* @property {String} width 显示图片小图标时的宽度
* @property {String} height 显示图片小图标时的高度
* @property {String} top 图标在垂直方向上的定位
* @property {String} top 图标在垂直方向上的定位
* @property {String} top 图标在垂直方向上的定位
* @property {Boolean} show-decimal-icon 是否为DecimalIcon
* @property {String} inactive-color 背景颜色，可接受主题色，仅Decimal时有效
* @property {String | Number} percent 显示的百分比，仅Decimal时有效
* @event {Function} click 点击图标时触发
* @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
*/
......@@ -145,71 +156,120 @@ export default {
top: {
type: [String, Number],
default: 0
},
// 是否为DecimalIcon
showDecimalIcon: {
type: Boolean,
default: false
},
// 背景颜色，可接受主题色，仅Decimal时有效
inactiveColor: {
type: String,
default: '#ececec'
},
// 显示的百分比，仅Decimal时有效
percent: {
type: [Number, String],
default: '50'
}
},
computed: {
customClass() {
let classes = [];
classes.push(this.customPrefix + '-' + this.name);
let classes = []
classes.push(this.customPrefix + '-' + this.name)
// uView的自定义图标类名为u-iconfont
if (this.customPrefix == 'uicon') classes.push('u-iconfont');
else classes.push(this.customPrefix);
if (this.customPrefix == 'uicon') {
classes.push('u-iconfont')
} else {
classes.push(this.customPrefix)
}
// 主题色，通过类配置
if (this.color && this.$u.config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color);
if (this.showDecimalIcon && this.inactiveColor && this.$u.config.type.includes(this.inactiveColor)) {
classes.push('u-icon__icon--' + this.inactiveColor)
} else if (this.color && this.$u.config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
classes = classes.join(' ');
classes = classes.join(' ')
//#endif
return classes;
return classes
},
iconStyle() {
let style = {};
let style = {}
style = {
fontSize: this.size == 'inherit' ? 'inherit' : this.$u.addUnit(this.size),
fontWeight: this.bold ? 'bold' : 'normal',
// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
top: this.$u.addUnit(this.top)
};
}
// 非主题色值时，才当作颜色值
if (this.color && !this.$u.config.type.includes(this.color)) style.color = this.color;
return style;
if (this.showDecimalIcon && this.inactiveColor && !this.$u.config.type.includes(this.inactiveColor)) {
style.color = this.inactiveColor
} else if (this.color && !this.$u.config.type.includes(this.color)) style.color = this.color
return style
},
// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
isImg() {
return this.name.indexOf('/') !== -1;
return this.name.indexOf('/') !== -1
},
imgStyle() {
let style = {};
let style = {}
// 如果设置width和height属性，则优先使用，否则使用size属性
style.width = this.width ? this.$u.addUnit(this.width) : this.$u.addUnit(this.size);
style.height = this.height ? this.$u.addUnit(this.height) : this.$u.addUnit(this.size);
return style;
style.width = this.width ? this.$u.addUnit(this.width) : this.$u.addUnit(this.size)
style.height = this.height ? this.$u.addUnit(this.height) : this.$u.addUnit(this.size)
return style
},
decimalIconStyle() {
let style = {}
style = {
fontSize: this.size == 'inherit' ? 'inherit' : this.$u.addUnit(this.size),
fontWeight: this.bold ? 'bold' : 'normal',
// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
top: this.$u.addUnit(this.top),
width: this.percent + '%'
}
// 非主题色值时，才当作颜色值
if (this.color && !this.$u.config.type.includes(this.color)) style.color = this.color
return style
},
decimalIconClass() {
let classes = []
classes.push(this.customPrefix + '-' + this.name)
// uView的自定义图标类名为u-iconfont
if (this.customPrefix == 'uicon') {
classes.push('u-iconfont')
} else {
classes.push(this.customPrefix)
}
// 主题色，通过类配置
if (this.color && this.$u.config.type.includes(this.color)) classes.push('u-icon__icon--' + this.color)
else classes.push('u-icon__icon--primary')
// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
classes = classes.join(' ')
//#endif
return classes
}
},
methods: {
click() {
this.$emit('click', this.index);
this.$emit('click', this.index)
},
touchstart() {
this.$emit('touchstart', this.index);
this.$emit('touchstart', this.index)
}
}
};
}
</script>
<style scoped lang="scss">
@import "../../libs/css/style.components.scss";
/* #ifndef APP-NVUE */
// 目前由于nvue对定义字体时的content属性报错，所以nvue先不引入
@import '../../iconfont.css';
/* #endif */
.u-icon {
/* #ifndef APP-NVUE */
display: inline-flex;
/* #endif */
flex-direction: row;
align-items: center;
&--left {
......@@ -256,11 +316,17 @@ export default {
}
}
&__decimal {
position: absolute;
top: 0;
left: 0;
display: inline-block;
overflow: hidden;
}
&__img {
/* #ifndef APP-PLUS */
height: auto;
will-change: transform;
/* #endif */
}
&__label {
......
uview-ui/components/u-rate/u-rate.vue
View file @ 31a991ae
......@@ -2,20 +2,22 @@
<view class="u-rate" :id="elId" @touchmove.stop.prevent="touchMove">
<view class="u-star-wrap" v-for="(item, index) in count" :key="index" :class="[elClass]">
<u-icon
:name="activeIndex > index ? activeIcon : inactiveIcon"
:name="activeIndex > index ? elActiveIcon : inactiveIcon"
@click="click(index + 1, $event)"
:color="activeIndex > index ? activeColor : inactiveColor"
:color="activeIndex > index ? elActiveColor : inactiveColor"
:custom-style="{
fontSize: size + 'rpx',
padding: `0 ${gutter / 2 + 'rpx'}`
}"
:custom-prefix="customPrefix"
:show-decimal-icon="showDecimalIcon(index)"
:percent="decimal"
></u-icon>
</view>
</view>
</template>
<script>
/**
<script>/**
* rate 评分
* @description 该组件一般用于满意度调查，星型评分的场景
* @tutorial https://www.uviewui.com/components/rate.html
......@@ -33,6 +35,7 @@
* @event {Function} change 选中的星星发生变化时触发
* @example <u-rate :count="count" :current="2"></u-rate>
*/
export default {
name: 'u-rate',
props: {
......@@ -97,6 +100,23 @@ export default {
inactiveIcon: {
type: String,
default: 'star'
},
// 自定义扩展前缀，方便用户扩展自己的图标库
customPrefix: {
type: String,
default: 'uicon'
},
colors: {
type: Array,
default() {
return []
}
},
icons: {
type: Array,
default() {
return []
}
}
},
data() {
......@@ -109,94 +129,127 @@ export default {
activeIndex: this.value != -1 ? this.value : this.current,
starWidth: 0, // 每个星星的宽度
starWidthArr: [] //每个星星最右边到组件盒子最左边的距离
};
}
},
watch: {
current(val) {
this.activeIndex = val;
this.activeIndex = val
},
value(val) {
this.activeIndex = val;
this.activeIndex = val
}
},
computed: {
decimal() {
if (this.disabled) {
return this.activeIndex * 100 % 100
} else if (this.allowHalf) {
return 50
}
},
elActiveIcon() {
const len = this.icons.length
if (len && len <= this.count) {
const step = Math.round(this.activeIndex / Math.round(this.count / len))
if (step < 1) return this.icons[0]
if (step > len) return this.icons[len - 1]
return this.icons[step - 1]
}
return this.activeIcon
},
elActiveColor() {
const len = this.colors.length
if (len && len <= this.count) {
const step = Math.round(this.activeIndex / Math.round(this.count / len))
if (step < 1) return this.colors[0]
if (step > len) return this.colors[len - 1]
return this.colors[step - 1]
}
return this.activeColor
}
},
methods: {
// 获取评分组件盒子的布局信息
getElRectById() {
// uView封装的获取节点的方法，详见文档
this.$uGetRect('#' + this.elId).then(res => {
this.starBoxLeft = res.left;
this.$u.getRect('#' + this.elId).then(res => {
this.starBoxLeft = res.left
})
},
// 获取单个星星的尺寸
getElRectByClass() {
// uView封装的获取节点的方法，详见文档
this.$uGetRect('.' + this.elClass).then(res => {
this.starWidth = res.width;
this.$u.getRect('.' + this.elClass).then(res => {
this.starWidth = res.width
// 把每个星星右边到组件盒子左边的距离放入数组中
for (let i = 0; i < this.count; i++) {
this.starWidthArr[i] = (i + 1) * this.starWidth;
this.starWidthArr[i] = (i + 1) * this.starWidth
}
})
},
// 手指滑动
touchMove(e) {
if (this.disabled) {
return;
return
}
if (!e.changedTouches[0]) {
return;
return
}
const movePageX = e.changedTouches[0].pageX;
const movePageX = e.changedTouches[0].pageX
// 滑动点相对于评分盒子左边的距离
const distance = movePageX - this.starBoxLeft;
const distance = movePageX - this.starBoxLeft
// 如果滑动到了评分盒子的左边界，就设置为0星
if (distance <= 0) {
this.activeIndex = 0;
this.activeIndex = 0
}
// 滑动的距离，相当于多少颗星星
let index = Math.ceil(distance / this.starWidth);
this.activeIndex = index > this.count ? this.count : index;
let index = Math.ceil(distance / this.starWidth)
this.activeIndex = index > this.count ? this.count : index
// 对最少颗星星的限制
if (this.activeIndex < this.minCount) this.activeIndex = this.minCount;
this.emitEvent();
if (this.activeIndex < this.minCount) this.activeIndex = this.minCount
this.emitEvent()
},
// 通过点击，直接选中
click(index, e) {
if (this.disabled) {
return;
return
}
// 半星选择，尚未实现
if (this.allowHalf) {
}
// 对第一个星星特殊处理，只有一个的时候，点击可以取消，否则无法作0星评价
if (index == 1) {
if (this.activeIndex == 1) this.activeIndex = 0;
else this.activeIndex = 1;
if (this.activeIndex == 1) {
this.activeIndex = 0
} else {
this.activeIndex = 1
}
} else {
this.activeIndex = index;
this.activeIndex = index
}
// 对最少颗星星的限制
if (this.activeIndex < this.minCount) this.activeIndex = this.minCount;
this.emitEvent();
if (this.activeIndex < this.minCount) this.activeIndex = this.minCount
this.emitEvent()
},
// 发出事件
emitEvent() {
// 发出change事件
this.$emit('change', this.activeIndex);
this.$emit('change', this.activeIndex)
// 同时修改双向绑定的value的值
if(this.value != -1) {
this.$emit('input', this.activeIndex);
if (this.value != -1) {
this.$emit('input', this.activeIndex)
}
},
showDecimalIcon(index) {
return this.disabled && parseInt(this.activeIndex) === index
}
},
mounted() {
setTimeout(() => {
this.getElRectById();
this.getElRectByClass();
}, 100)
this.getElRectById()
this.getElRectByClass()
}
};
}
</script>
<style scoped lang="scss">
......
uview-ui/libs/mixin/mpShare.js
View file @ 31a991ae
......@@ -9,5 +9,10 @@ module.exports = {
},
onShareAppMessage() {
return this.$u.mpShare
},
// #ifdef MP-WEIXIN
onShareTimeline() {
return this.$u.mpShare
}
// #endif
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment