新增企业广场
This commit is contained in:
唐明明
18
uni_modules/uni-rate/changelog.md
Normal file
18
uni_modules/uni-rate/changelog.md
Normal file
@@ -0,0 +1,18 @@
|
||||
## 1.2.1（2021-07-30）
|
||||
- 优化 vue3下事件警告的问题
|
||||
## 1.2.0（2021-07-13）
|
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.1.2（2021-05-12）
|
||||
- 新增 组件示例地址
|
||||
## 1.1.1（2021-04-21）
|
||||
- 修复 布局变化后 uni-rate 星星计算不准确的 bug
|
||||
- 优化 添加依赖 uni-icons, 导入 uni-rate 自动下载依赖
|
||||
## 1.1.0（2021-04-16）
|
||||
- 修复 uni-rate 属性 margin 值为 string 组件失效的 bug
|
||||
|
||||
## 1.0.9（2021-02-05）
|
||||
- 优化 组件引用关系，通过uni_modules引用组件
|
||||
|
||||
## 1.0.8（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
- 支持 pc 端
|
||||
393
uni_modules/uni-rate/components/uni-rate/uni-rate.vue
Normal file
393
uni_modules/uni-rate/components/uni-rate/uni-rate.vue
Normal file
@@ -0,0 +1,393 @@
|
||||
<template>
|
||||
<view>
|
||||
<view
|
||||
ref="uni-rate"
|
||||
class="uni-rate"
|
||||
>
|
||||
<view
|
||||
class="uni-rate__icon"
|
||||
:class="{'uni-cursor-not-allowed': disabled}"
|
||||
:style="{ 'margin-right': marginNumber + 'px' }"
|
||||
v-for="(star, index) in stars"
|
||||
:key="index"
|
||||
@touchstart.stop="touchstart"
|
||||
@touchmove.stop="touchmove"
|
||||
@mousedown.stop="mousedown"
|
||||
@mousemove.stop="mousemove"
|
||||
@mouseleave="mouseleave"
|
||||
>
|
||||
<uni-icons
|
||||
:color="color"
|
||||
:size="size"
|
||||
:type="isFill ? 'star-filled' : 'star'"
|
||||
/>
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<view
|
||||
:style="{ width: star.activeWitch.replace('%','')*size/100+'px'}"
|
||||
class="uni-rate__icon-on"
|
||||
>
|
||||
<uni-icons
|
||||
style="text-align: left;"
|
||||
:color="disabled?'#ccc':activeColor"
|
||||
:size="size"
|
||||
type="star-filled"
|
||||
/>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view
|
||||
:style="{ width: star.activeWitch}"
|
||||
class="uni-rate__icon-on"
|
||||
>
|
||||
<uni-icons
|
||||
:color="disabled?disabledColor:activeColor"
|
||||
:size="size"
|
||||
type="star-filled"
|
||||
/>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-NVUE
|
||||
const dom = uni.requireNativePlugin('dom');
|
||||
// #endif
|
||||
/**
|
||||
* Rate 评分
|
||||
* @description 评分组件
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=33
|
||||
* @property {Boolean} isFill = [true|false] 星星的类型，是否为实心类型, 默认为实心
|
||||
* @property {String} color 未选中状态的星星颜色，默认为 "#ececec"
|
||||
* @property {String} activeColor 选中状态的星星颜色，默认为 "#ffca3e"
|
||||
* @property {String} disabledColor 禁用状态的星星颜色，默认为 "#c0c0c0"
|
||||
* @property {Number} size 星星的大小
|
||||
* @property {Number} value/v-model 当前评分
|
||||
* @property {Number} max 最大评分评分数量，目前一分一颗星
|
||||
* @property {Number} margin 星星的间距，单位 px
|
||||
* @property {Boolean} disabled = [true|false] 是否为禁用状态，默认为 false
|
||||
* @property {Boolean} readonly = [true|false] 是否为只读状态，默认为 false
|
||||
* @property {Boolean} allowHalf = [true|false] 是否实现半星，默认为 false
|
||||
* @property {Boolean} touchable = [true|false] 是否支持滑动手势，默认为 true
|
||||
* @event {Function} change uniRate 的 value 改变时触发事件，e={value:Number}
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: "UniRate",
|
||||
props: {
|
||||
isFill: {
|
||||
// 星星的类型，是否镂空
|
||||
type: [Boolean, String],
|
||||
default: true
|
||||
},
|
||||
color: {
|
||||
// 星星未选中的颜色
|
||||
type: String,
|
||||
default: "#ececec"
|
||||
},
|
||||
activeColor: {
|
||||
// 星星选中状态颜色
|
||||
type: String,
|
||||
default: "#ffca3e"
|
||||
},
|
||||
disabledColor: {
|
||||
// 星星禁用状态颜色
|
||||
type: String,
|
||||
default: "#c0c0c0"
|
||||
},
|
||||
size: {
|
||||
// 星星的大小
|
||||
type: [Number, String],
|
||||
default: 24
|
||||
},
|
||||
value: {
|
||||
// 当前评分
|
||||
type: [Number, String],
|
||||
default: 1
|
||||
},
|
||||
modelValue: {
|
||||
// 当前评分
|
||||
type: [Number, String],
|
||||
default: 1
|
||||
},
|
||||
max: {
|
||||
// 最大评分
|
||||
type: [Number, String],
|
||||
default: 5
|
||||
},
|
||||
margin: {
|
||||
// 星星的间距
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
disabled: {
|
||||
// 是否可点击
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
readonly: {
|
||||
// 是否只读
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
allowHalf: {
|
||||
// 是否显示半星
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
touchable: {
|
||||
// 是否支持滑动手势
|
||||
type: [Boolean, String],
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
valueSync: "",
|
||||
userMouseFristMove: true,
|
||||
userRated: false,
|
||||
userLastRate: 1
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(newVal) {
|
||||
this.valueSync = Number(newVal);
|
||||
},
|
||||
modelValue(newVal) {
|
||||
this.valueSync = Number(newVal);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
stars() {
|
||||
const value = this.valueSync ? this.valueSync : 0;
|
||||
const starList = [];
|
||||
const floorValue = Math.floor(value);
|
||||
const ceilValue = Math.ceil(value);
|
||||
for (let i = 0; i < this.max; i++) {
|
||||
if (floorValue > i) {
|
||||
starList.push({
|
||||
activeWitch: "100%"
|
||||
});
|
||||
} else if (ceilValue - 1 === i) {
|
||||
starList.push({
|
||||
activeWitch: (value - floorValue) * 100 + "%"
|
||||
});
|
||||
} else {
|
||||
starList.push({
|
||||
activeWitch: "0"
|
||||
});
|
||||
}
|
||||
}
|
||||
return starList;
|
||||
},
|
||||
|
||||
marginNumber() {
|
||||
return Number(this.margin)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.valueSync = Number(this.value||this.modelValue);
|
||||
this._rateBoxLeft = 0
|
||||
this._oldValue = null
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this._getSize()
|
||||
}, 100)
|
||||
// #ifdef H5
|
||||
this.PC = this.IsPC()
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
touchstart(e) {
|
||||
// #ifdef H5
|
||||
if( this.IsPC() ) return
|
||||
// #endif
|
||||
if (this.readonly || this.disabled) return
|
||||
const {
|
||||
clientX,
|
||||
screenX
|
||||
} = e.changedTouches[0]
|
||||
// TODO 做一下兼容，只有 Nvue 下才有 screenX，其他平台式 clientX
|
||||
this._getRateCount(clientX || screenX)
|
||||
},
|
||||
touchmove(e) {
|
||||
// #ifdef H5
|
||||
if( this.IsPC() ) return
|
||||
// #endif
|
||||
if (this.readonly || this.disabled || !this.touchable) return
|
||||
const {
|
||||
clientX,
|
||||
screenX
|
||||
} = e.changedTouches[0]
|
||||
this._getRateCount(clientX || screenX)
|
||||
},
|
||||
|
||||
/**
|
||||
* 兼容 PC @tian
|
||||
*/
|
||||
|
||||
mousedown(e) {
|
||||
// #ifdef H5
|
||||
if( !this.IsPC() ) return
|
||||
if (this.readonly || this.disabled) return
|
||||
const {
|
||||
clientX,
|
||||
} = e
|
||||
this.userLastRate = this.valueSync
|
||||
this._getRateCount(clientX)
|
||||
this.userRated = true
|
||||
// #endif
|
||||
},
|
||||
mousemove(e) {
|
||||
// #ifdef H5
|
||||
if( !this.IsPC() ) return
|
||||
if( this.userRated ) return
|
||||
if( this.userMouseFristMove ) {
|
||||
console.log('---mousemove----', this.valueSync);
|
||||
this.userLastRate = this.valueSync
|
||||
this.userMouseFristMove = false
|
||||
}
|
||||
if (this.readonly || this.disabled || !this.touchable) return
|
||||
const {
|
||||
clientX,
|
||||
} = e
|
||||
this._getRateCount(clientX)
|
||||
// #endif
|
||||
},
|
||||
mouseleave(e) {
|
||||
// #ifdef H5
|
||||
if( !this.IsPC() ) return
|
||||
if (this.readonly || this.disabled || !this.touchable) return
|
||||
if( this.userRated ) {
|
||||
this.userRated = false
|
||||
return
|
||||
}
|
||||
this.valueSync = this.userLastRate
|
||||
// #endif
|
||||
},
|
||||
// #ifdef H5
|
||||
IsPC() {
|
||||
var userAgentInfo = navigator.userAgent;
|
||||
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
|
||||
var flag = true;
|
||||
for (let v = 0; v < Agents.length - 1; v++) {
|
||||
if (userAgentInfo.indexOf(Agents[v]) > 0) {
|
||||
flag = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return flag;
|
||||
},
|
||||
// #endif
|
||||
|
||||
/**
|
||||
* 获取星星个数
|
||||
*/
|
||||
_getRateCount(clientX) {
|
||||
this._getSize()
|
||||
const size = Number(this.size)
|
||||
if(size === NaN){
|
||||
return new Error('size 属性只能设置为数字')
|
||||
}
|
||||
const rateMoveRange = clientX - this._rateBoxLeft
|
||||
let index = parseInt(rateMoveRange / (size + this.marginNumber))
|
||||
index = index < 0 ? 0 : index;
|
||||
index = index > this.max ? this.max : index;
|
||||
const range = parseInt(rateMoveRange - (size + this.marginNumber) * index);
|
||||
let value = 0;
|
||||
if (this._oldValue === index && !this.PC) return;
|
||||
this._oldValue = index;
|
||||
if (this.allowHalf) {
|
||||
if (range > (size / 2)) {
|
||||
value = index + 1
|
||||
} else {
|
||||
value = index + 0.5
|
||||
}
|
||||
} else {
|
||||
value = index + 1
|
||||
}
|
||||
|
||||
value = Math.max(0.5, Math.min(value, this.max))
|
||||
this.valueSync = value
|
||||
this._onChange()
|
||||
},
|
||||
|
||||
/**
|
||||
* 触发动态修改
|
||||
*/
|
||||
_onChange() {
|
||||
|
||||
this.$emit("input", this.valueSync);
|
||||
this.$emit("update:modelValue", this.valueSync);
|
||||
this.$emit("change", {
|
||||
value: this.valueSync
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 获取星星距离屏幕左侧距离
|
||||
*/
|
||||
_getSize() {
|
||||
// #ifndef APP-NVUE
|
||||
uni.createSelectorQuery()
|
||||
.in(this)
|
||||
.select('.uni-rate')
|
||||
.boundingClientRect()
|
||||
.exec(ret => {
|
||||
if (ret) {
|
||||
this._rateBoxLeft = ret[0].left
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
dom.getComponentRect(this.$refs['uni-rate'], (ret) => {
|
||||
const size = ret.size
|
||||
if (size) {
|
||||
this._rateBoxLeft = size.left
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style
|
||||
lang="scss"
|
||||
scoped
|
||||
>
|
||||
.uni-rate {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
line-height: 1;
|
||||
font-size: 0;
|
||||
flex-direction: row;
|
||||
/* #ifdef H5 */
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-rate__icon {
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.uni-rate__icon-on {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
line-height: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.uni-cursor-not-allowed {
|
||||
/* #ifdef H5 */
|
||||
cursor: not-allowed !important;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
83
uni_modules/uni-rate/package.json
Normal file
83
uni_modules/uni-rate/package.json
Normal file
@@ -0,0 +1,83 @@
|
||||
{
|
||||
"id": "uni-rate",
|
||||
"displayName": "uni-rate 评分",
|
||||
"version": "1.2.1",
|
||||
"description": "Rate 评分组件，可自定义评分星星图标的大小、间隔、评分数。",
|
||||
"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-icons"
|
||||
],
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
107
uni_modules/uni-rate/readme.md
Normal file
107
uni_modules/uni-rate/readme.md
Normal file
@@ -0,0 +1,107 @@
|
||||
|
||||
|
||||
## Rate 评分
|
||||
> **组件名：uni-rate**
|
||||
> 代码块： `uRate`
|
||||
> 关联组件：`uni-icons`
|
||||
|
||||
|
||||
评分组件，多用于购买商品后，对商品进行评价等场景
|
||||
|
||||
> **注意事项**
|
||||
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的使用说明，可以帮你避免一些错误。
|
||||
> - 暂时不支持零星选择
|
||||
> - 当前版本暂不支持修改图标，后续版本会继续优化
|
||||
> - 绑定值推荐使用 `v-model` 的方式
|
||||
> - 如需设置一个星星表示多分，如：显示5个星星，最高分10分。这种情况请在 change 事件监听中自行处理，获取到的值乘以你的基数就可以，默认组件是一星一分
|
||||
|
||||
|
||||
### 安装方式
|
||||
|
||||
本组件符合[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)
|
||||
|
||||
|
||||
## 基本用法
|
||||
|
||||
```html
|
||||
<!-- 基本用法 -->
|
||||
<!-- 需要在 script 中绑定 value 变量 -->
|
||||
<uni-rate v-model="value" @change="onChange"/>
|
||||
|
||||
<!-- 不支持滑动手势选择评分 -->
|
||||
<uni-rate :touchable="false" :value="5"/>
|
||||
<!-- 设置尺寸大小 -->
|
||||
<uni-rate :size="18" :value="5"/>
|
||||
|
||||
<!-- 设置评分数 -->
|
||||
<uni-rate :max="10" :value="5" />
|
||||
|
||||
<!-- 设置星星间隔 -->
|
||||
<uni-rate :value="4" :margin="20" />
|
||||
|
||||
<!-- 设置颜色 -->
|
||||
<uni-rate :value="3" color="#bbb" active-color="red" />
|
||||
|
||||
<!-- 选择半星 -->
|
||||
<uni-rate allow-half :value="3.5" />
|
||||
|
||||
<!-- 只读状态 -->
|
||||
<uni-rate :readonly="true" :value="2" />
|
||||
|
||||
<!-- 禁用状态 -->
|
||||
<uni-rate :disabled="true" disabledColor="#ccc" :value="3" />
|
||||
|
||||
<!-- 未选中的星星为镂空状态 -->
|
||||
<uni-rate :value="3" :is-fill="false" />
|
||||
|
||||
|
||||
```
|
||||
|
||||
```javascript
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
value: 2
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(e) {
|
||||
console.log('rate发生改变:' + JSON.stringify(e))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
## API
|
||||
### Rate Props
|
||||
|
||||
属性名 | 类型 | 默认值 | 说明
|
||||
:-: | :-: | :-: | :-:
|
||||
value/v-model | Number | 1 | 当前评分
|
||||
color | String | #ececec | 未选中状态的星星颜色
|
||||
activeColor | String | #ffca3e | 选中状态的星星颜色
|
||||
disabledColor | String | #c0c0c0 | 禁用状态的星星颜色
|
||||
size | Number | 24 | 星星的大小
|
||||
max | Number | 5 | 最大评分评分数量，目前一分一颗星
|
||||
margin | Number | 0 | 星星的间距，单位 px
|
||||
isFill | Boolean | true | 星星的类型，是否为实心类型
|
||||
disabled | Boolean | false | 是否为禁用状态 (之前版本为已读状态，现更正为禁用状态)
|
||||
readonly | Boolean | false | 是否为只读状态
|
||||
allowHalf | Boolean | false | 是否展示半星
|
||||
touchable | Boolean | true | 是否支持滑动手势
|
||||
|
||||
### Rate Events
|
||||
|
||||
事件称名 | 说明 | 返回参数
|
||||
:-: | :-: | :-:
|
||||
@change | 改变 value 的值返回 | e = { value:number }
|
||||
|
||||
|
||||
## 组件示例
|
||||
|
||||
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/rate/rate](https://hellouniapp.dcloud.net.cn/pages/extUI/rate/rate)
|
||||
Reference in New Issue
Block a user