修改文件访问权限验证
This commit is contained in:
parent
49ef3c7314
commit
3168a1e913
|
|
@ -45,6 +45,7 @@ const install = (Vue, vm) => {
|
||||||
let upInspectDept = (id, params)=>vm.$u.put(`/quality/inspectdept/${id}/up/`, params);//提交记录
|
let upInspectDept = (id, params)=>vm.$u.put(`/quality/inspectdept/${id}/up/`, params);//提交记录
|
||||||
|
|
||||||
let appointChecker = (params) => vm.$u.post('/quality/inspectrecord/appoint/', params);//检查指派
|
let appointChecker = (params) => vm.$u.post('/quality/inspectrecord/appoint/', params);//检查指派
|
||||||
|
let getDocument = (params={})=>vm.$u.get('/quality/document/', params);//文档
|
||||||
vm.$u.api = {getUserInfo,
|
vm.$u.api = {getUserInfo,
|
||||||
getCode,
|
getCode,
|
||||||
codeLogin,
|
codeLogin,
|
||||||
|
|
@ -61,7 +62,8 @@ const install = (Vue, vm) => {
|
||||||
checkInspectRecord,
|
checkInspectRecord,
|
||||||
upInspectDept,
|
upInspectDept,
|
||||||
appointChecker,
|
appointChecker,
|
||||||
startInspectDept
|
startInspectDept,
|
||||||
|
getDocument
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,65 @@
|
||||||
<template>
|
<template>
|
||||||
<view>
|
<uni-list>
|
||||||
|
<uni-list-item :title="item.name" :note="item.description" :thumb="getThumb(item.file_.mime)" thumb-size="lg"
|
||||||
</view>
|
rightText="点击下载" v-for="item in dataList" :key="item.id" @click="down(item.file_.file)" link></uni-list-item>
|
||||||
|
</uni-list>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
dataList: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
onLoad() {
|
||||||
|
this.$u.api.getDocument({
|
||||||
|
pageoff: true
|
||||||
|
}).then(res => {
|
||||||
|
this.dataList = res.data
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getThumb(name) {
|
||||||
|
if (name.indexOf('word') != -1) {
|
||||||
|
return '/static/common/word.svg'
|
||||||
|
} else if (name.indexOf('pdf') != -1) {
|
||||||
|
return '/static/common/pdf.svg'
|
||||||
|
} else if (name.indexOf('sheet') != -1) {
|
||||||
|
return '/static/common/excel.svg'
|
||||||
|
} else if (name.indexOf('ppt') != -1) {
|
||||||
|
return '/static/common/ppt.svg'
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
down(file) {
|
||||||
|
// console.log(file)
|
||||||
|
uni.showLoading({
|
||||||
|
title: '下载中'
|
||||||
|
})
|
||||||
|
uni.downloadFile({
|
||||||
|
url: file + '?token=' + this.vuex_token, //仅为示例，并非真实的资源
|
||||||
|
success: (res) => {
|
||||||
|
uni.showLoading({
|
||||||
|
title:'正在打开'
|
||||||
|
})
|
||||||
|
var filePath = res.tempFilePath;
|
||||||
|
uni.openDocument({
|
||||||
|
filePath: filePath,
|
||||||
|
success: function (res) {
|
||||||
|
uni.hideLoading()
|
||||||
|
},
|
||||||
|
fail() {
|
||||||
|
uni.hideLoading()
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail() {
|
||||||
|
uni.hideLoading()
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
## 1.1.3（2021-06-24）
|
||||||
|
- 优化 示例项目
|
||||||
|
## 1.1.1（2021-05-12）
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 1.1.0（2021-05-12）
|
||||||
|
- 新增 uni-badge 的 absolute 属性，支持定位
|
||||||
|
- 新增 uni-badge 的 offset 属性，支持定位偏移
|
||||||
|
- 新增 uni-badge 的 is-dot 属性，支持仅显示有一个小点
|
||||||
|
- 新增 uni-badge 的 max-num 属性，支持自定义封顶的数字值，超过 99 显示99+
|
||||||
|
- 优化 uni-badge 属性 custom-style， 支持以对象形式自定义样式
|
||||||
|
## 1.0.7（2021-05-07）
|
||||||
|
- 修复 uni-badge 在 App 端，数字小于10时不是圆形的bug
|
||||||
|
- 修复 uni-badge 在父元素不是 flex 布局时，宽度缩小的bug
|
||||||
|
- 新增 uni-badge 属性 custom-style， 支持自定义样式
|
||||||
|
## 1.0.6（2021-02-04）
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
|
|
@ -0,0 +1,252 @@
|
||||||
|
<template>
|
||||||
|
<view class="uni-badge--x">
|
||||||
|
<slot />
|
||||||
|
<text v-if="text" :class="classNames" :style="[badgeWidth, positionStyle, customStyle, dotStyle]"
|
||||||
|
class="uni-badge"
|
||||||
|
@click="onClick()">{{displayValue}}</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* Badge 数字角标
|
||||||
|
* @description 数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=21
|
||||||
|
* @property {String} text 角标内容
|
||||||
|
* @property {String} type = [default|primary|success|warning|error] 颜色类型
|
||||||
|
* @value default 灰色
|
||||||
|
* @value primary 蓝色
|
||||||
|
* @value success 绿色
|
||||||
|
* @value warning 黄色
|
||||||
|
* @value error 红色
|
||||||
|
* @property {String} size = [normal|small] Badge 大小
|
||||||
|
* @value normal 一般尺寸
|
||||||
|
* @value small 小尺寸
|
||||||
|
* @property {String} inverted = [true|false] 是否无需背景颜色
|
||||||
|
* @event {Function} click 点击 Badge 触发事件
|
||||||
|
* @example <uni-badge text="1"></uni-badge>
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'UniBadge',
|
||||||
|
props: {
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'default'
|
||||||
|
},
|
||||||
|
inverted: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
isDot: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
maxNum: {
|
||||||
|
type: Number,
|
||||||
|
default: 99
|
||||||
|
},
|
||||||
|
absolute: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
offset: {
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return [0, 0]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: String,
|
||||||
|
default: 'normal'
|
||||||
|
},
|
||||||
|
customStyle: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
width() {
|
||||||
|
return String(this.text).length * 8 + 12
|
||||||
|
},
|
||||||
|
classNames() {
|
||||||
|
const {
|
||||||
|
inverted,
|
||||||
|
type,
|
||||||
|
size,
|
||||||
|
absolute
|
||||||
|
} = this
|
||||||
|
return [
|
||||||
|
inverted ? 'uni-badge--' + type + '-inverted' : '',
|
||||||
|
'uni-badge--' + type,
|
||||||
|
'uni-badge--' + size,
|
||||||
|
absolute ? 'uni-badge--absolute' : ''
|
||||||
|
]
|
||||||
|
},
|
||||||
|
positionStyle() {
|
||||||
|
if (!this.absolute) return {}
|
||||||
|
let w = this.width / 2,
|
||||||
|
h = 10
|
||||||
|
if (this.isDot) {
|
||||||
|
w = 5
|
||||||
|
h = 5
|
||||||
|
}
|
||||||
|
const x = `${- w + this.offset[0]}px`
|
||||||
|
const y = `${- h + this.offset[1]}px`
|
||||||
|
|
||||||
|
const whiteList = {
|
||||||
|
rightTop: {
|
||||||
|
right: x,
|
||||||
|
top: y
|
||||||
|
},
|
||||||
|
rightBottom: {
|
||||||
|
right: x,
|
||||||
|
bottom: y
|
||||||
|
},
|
||||||
|
leftBottom: {
|
||||||
|
left: x,
|
||||||
|
bottom: y
|
||||||
|
},
|
||||||
|
leftTop: {
|
||||||
|
left: x,
|
||||||
|
top: y
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const match = whiteList[this.absolute]
|
||||||
|
return match ? match : whiteList['rightTop']
|
||||||
|
},
|
||||||
|
badgeWidth() {
|
||||||
|
return {
|
||||||
|
width: `${this.width}px`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
dotStyle() {
|
||||||
|
if (!this.isDot) return {}
|
||||||
|
return {
|
||||||
|
width: '10px',
|
||||||
|
height: '10px',
|
||||||
|
borderRadius: '10px'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
displayValue() {
|
||||||
|
const { isDot, text, maxNum } = this
|
||||||
|
return isDot ? '' : (Number(text) > maxNum ? `${maxNum}+` : text)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onClick() {
|
||||||
|
this.$emit('click');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$bage-size: 12px;
|
||||||
|
$bage-small: scale(0.8);
|
||||||
|
$bage-height: 20px;
|
||||||
|
|
||||||
|
.uni-badge--x {
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
align-self: flex-start;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: inline-block;
|
||||||
|
/* #endif */
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-badge--absolute {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-badge {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* #endif */
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: row;
|
||||||
|
height: $bage-height;
|
||||||
|
line-height: $bage-height;
|
||||||
|
color: $uni-text-color;
|
||||||
|
border-radius: 100px;
|
||||||
|
background-color: $uni-bg-color-hover;
|
||||||
|
background-color: transparent;
|
||||||
|
text-align: center;
|
||||||
|
font-family: 'Helvetica Neue', Helvetica, sans-serif;
|
||||||
|
font-size: $bage-size;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: pointer;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-badge--inverted {
|
||||||
|
padding: 0 5px 0 0;
|
||||||
|
color: $uni-bg-color-hover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-badge--default {
|
||||||
|
color: $uni-text-color;
|
||||||
|
background-color: $uni-bg-color-hover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-badge--default-inverted {
|
||||||
|
color: $uni-text-color-grey;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-badge--primary {
|
||||||
|
color: $uni-text-color-inverse;
|
||||||
|
background-color: $uni-color-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-badge--primary-inverted {
|
||||||
|
color: $uni-color-primary;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-badge--success {
|
||||||
|
color: $uni-text-color-inverse;
|
||||||
|
background-color: $uni-color-success;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-badge--success-inverted {
|
||||||
|
color: $uni-color-success;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-badge--warning {
|
||||||
|
color: $uni-text-color-inverse;
|
||||||
|
background-color: $uni-color-warning;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-badge--warning-inverted {
|
||||||
|
color: $uni-color-warning;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-badge--error {
|
||||||
|
color: $uni-text-color-inverse;
|
||||||
|
background-color: $uni-color-error;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-badge--error-inverted {
|
||||||
|
color: $uni-color-error;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-badge--small {
|
||||||
|
transform: $bage-small;
|
||||||
|
transform-origin: center center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,84 @@
|
||||||
|
{
|
||||||
|
"id": "uni-badge",
|
||||||
|
"displayName": "uni-badge 数字角标",
|
||||||
|
"version": "1.1.3",
|
||||||
|
"description": "数字角标（徽章）组件，在元素周围展示消息提醒，一般用于列表、九宫格、按钮等地方。",
|
||||||
|
"keywords": [
|
||||||
|
"",
|
||||||
|
"badge",
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"数字角标",
|
||||||
|
"徽章"
|
||||||
|
],
|
||||||
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": ""
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"example": "../../temps/example"
|
||||||
|
},
|
||||||
|
"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"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "y",
|
||||||
|
"联盟": "y"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
|
||||||
|
|
||||||
|
## Badge 数字角标
|
||||||
|
> **组件名：uni-badge**
|
||||||
|
> 代码块： `uBadge`
|
||||||
|
|
||||||
|
|
||||||
|
数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景，
|
||||||
|
|
||||||
|
### 安装方式
|
||||||
|
|
||||||
|
本组件符合[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-badge size="small" :text="100" absolute="rightBottom" type="primary">
|
||||||
|
<button type="default">右上</button>
|
||||||
|
</uni-badge>
|
||||||
|
<uni-badge text="1"></uni-badge>
|
||||||
|
<uni-badge text="2" type="purple" @click="bindClick"></uni-badge>
|
||||||
|
<uni-badge text="3" type="primary" :inverted="true"></uni-badge>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### Badge Props
|
||||||
|
|
||||||
|
|属性名 |类型 |默认值 |说明 |
|
||||||
|
|:-: |:-: |:-: |:-: |
|
||||||
|
|text |String |- |角标内容 |
|
||||||
|
|type |String |default|颜色类型，可选值：default（灰色）、primary（蓝色）、success（绿色）、warning(黄色)、error(红色)|
|
||||||
|
|size |String |normal |Badge 大小，可取值：normal、small |
|
||||||
|
|is-dot |Boolean|false |不展示数字，只有一个小点 |
|
||||||
|
|max-num |String/Numbuer|99 |展示封顶的数字值，超过 99 显示99+ |
|
||||||
|
|custom-style |Object | {} |自定义 Badge 样式, 样式对象语法 |
|
||||||
|
|inverted |Boolean|false |是否无需背景颜色，为 true 时，背景颜色将变为文字的字体颜色 |
|
||||||
|
|absolute |String| rightTop|开启绝对定位, 角标将定位到其包裹的标签的四个角上，可选值： rightTop(右上角)、rightBottom（右下角）、leftBottom（左下角） 、leftTop（左上角） |
|
||||||
|
|offset |Array[number]| [0, 0]|距定位角中心点的偏移量，[-10, -10] 表示向 absolute 指定的方向偏移 10px，[10, 10] 表示向 absolute 指定的反方向偏移 10px，只有存在 absolute 属性时有效，与absolute 的值一一对应（例如：值为rightTop， 对应 offset 为 [right, Top]）|
|
||||||
|
|
||||||
|
### Badge Events
|
||||||
|
|
||||||
|
|事件名 |事件说明 |返回参数 |
|
||||||
|
|:-: |:-: |:-: |
|
||||||
|
|@click |点击 Badge 触发事件| - |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 组件示例
|
||||||
|
|
||||||
|
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge](https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge)
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
## 1.1.5（2021-05-12）
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 1.1.4（2021-02-05）
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
|
|
@ -0,0 +1,132 @@
|
||||||
|
export default {
|
||||||
|
"pulldown": "\ue588",
|
||||||
|
"refreshempty": "\ue461",
|
||||||
|
"back": "\ue471",
|
||||||
|
"forward": "\ue470",
|
||||||
|
"more": "\ue507",
|
||||||
|
"more-filled": "\ue537",
|
||||||
|
"scan": "\ue612",
|
||||||
|
"qq": "\ue264",
|
||||||
|
"weibo": "\ue260",
|
||||||
|
"weixin": "\ue261",
|
||||||
|
"pengyouquan": "\ue262",
|
||||||
|
"loop": "\ue565",
|
||||||
|
"refresh": "\ue407",
|
||||||
|
"refresh-filled": "\ue437",
|
||||||
|
"arrowthindown": "\ue585",
|
||||||
|
"arrowthinleft": "\ue586",
|
||||||
|
"arrowthinright": "\ue587",
|
||||||
|
"arrowthinup": "\ue584",
|
||||||
|
"undo-filled": "\ue7d6",
|
||||||
|
"undo": "\ue406",
|
||||||
|
"redo": "\ue405",
|
||||||
|
"redo-filled": "\ue7d9",
|
||||||
|
"bars": "\ue563",
|
||||||
|
"chatboxes": "\ue203",
|
||||||
|
"camera": "\ue301",
|
||||||
|
"chatboxes-filled": "\ue233",
|
||||||
|
"camera-filled": "\ue7ef",
|
||||||
|
"cart-filled": "\ue7f4",
|
||||||
|
"cart": "\ue7f5",
|
||||||
|
"checkbox-filled": "\ue442",
|
||||||
|
"checkbox": "\ue7fa",
|
||||||
|
"arrowleft": "\ue582",
|
||||||
|
"arrowdown": "\ue581",
|
||||||
|
"arrowright": "\ue583",
|
||||||
|
"smallcircle-filled": "\ue801",
|
||||||
|
"arrowup": "\ue580",
|
||||||
|
"circle": "\ue411",
|
||||||
|
"eye-filled": "\ue568",
|
||||||
|
"eye-slash-filled": "\ue822",
|
||||||
|
"eye-slash": "\ue823",
|
||||||
|
"eye": "\ue824",
|
||||||
|
"flag-filled": "\ue825",
|
||||||
|
"flag": "\ue508",
|
||||||
|
"gear-filled": "\ue532",
|
||||||
|
"reload": "\ue462",
|
||||||
|
"gear": "\ue502",
|
||||||
|
"hand-thumbsdown-filled": "\ue83b",
|
||||||
|
"hand-thumbsdown": "\ue83c",
|
||||||
|
"hand-thumbsup-filled": "\ue83d",
|
||||||
|
"heart-filled": "\ue83e",
|
||||||
|
"hand-thumbsup": "\ue83f",
|
||||||
|
"heart": "\ue840",
|
||||||
|
"home": "\ue500",
|
||||||
|
"info": "\ue504",
|
||||||
|
"home-filled": "\ue530",
|
||||||
|
"info-filled": "\ue534",
|
||||||
|
"circle-filled": "\ue441",
|
||||||
|
"chat-filled": "\ue847",
|
||||||
|
"chat": "\ue263",
|
||||||
|
"mail-open-filled": "\ue84d",
|
||||||
|
"email-filled": "\ue231",
|
||||||
|
"mail-open": "\ue84e",
|
||||||
|
"email": "\ue201",
|
||||||
|
"checkmarkempty": "\ue472",
|
||||||
|
"list": "\ue562",
|
||||||
|
"locked-filled": "\ue856",
|
||||||
|
"locked": "\ue506",
|
||||||
|
"map-filled": "\ue85c",
|
||||||
|
"map-pin": "\ue85e",
|
||||||
|
"map-pin-ellipse": "\ue864",
|
||||||
|
"map": "\ue364",
|
||||||
|
"minus-filled": "\ue440",
|
||||||
|
"mic-filled": "\ue332",
|
||||||
|
"minus": "\ue410",
|
||||||
|
"micoff": "\ue360",
|
||||||
|
"mic": "\ue302",
|
||||||
|
"clear": "\ue434",
|
||||||
|
"smallcircle": "\ue868",
|
||||||
|
"close": "\ue404",
|
||||||
|
"closeempty": "\ue460",
|
||||||
|
"paperclip": "\ue567",
|
||||||
|
"paperplane": "\ue503",
|
||||||
|
"paperplane-filled": "\ue86e",
|
||||||
|
"person-filled": "\ue131",
|
||||||
|
"contact-filled": "\ue130",
|
||||||
|
"person": "\ue101",
|
||||||
|
"contact": "\ue100",
|
||||||
|
"images-filled": "\ue87a",
|
||||||
|
"phone": "\ue200",
|
||||||
|
"images": "\ue87b",
|
||||||
|
"image": "\ue363",
|
||||||
|
"image-filled": "\ue877",
|
||||||
|
"location-filled": "\ue333",
|
||||||
|
"location": "\ue303",
|
||||||
|
"plus-filled": "\ue439",
|
||||||
|
"plus": "\ue409",
|
||||||
|
"plusempty": "\ue468",
|
||||||
|
"help-filled": "\ue535",
|
||||||
|
"help": "\ue505",
|
||||||
|
"navigate-filled": "\ue884",
|
||||||
|
"navigate": "\ue501",
|
||||||
|
"mic-slash-filled": "\ue892",
|
||||||
|
"search": "\ue466",
|
||||||
|
"settings": "\ue560",
|
||||||
|
"sound": "\ue590",
|
||||||
|
"sound-filled": "\ue8a1",
|
||||||
|
"spinner-cycle": "\ue465",
|
||||||
|
"download-filled": "\ue8a4",
|
||||||
|
"personadd-filled": "\ue132",
|
||||||
|
"videocam-filled": "\ue8af",
|
||||||
|
"personadd": "\ue102",
|
||||||
|
"upload": "\ue402",
|
||||||
|
"upload-filled": "\ue8b1",
|
||||||
|
"starhalf": "\ue463",
|
||||||
|
"star-filled": "\ue438",
|
||||||
|
"star": "\ue408",
|
||||||
|
"trash": "\ue401",
|
||||||
|
"phone-filled": "\ue230",
|
||||||
|
"compose": "\ue400",
|
||||||
|
"videocam": "\ue300",
|
||||||
|
"trash-filled": "\ue8dc",
|
||||||
|
"download": "\ue403",
|
||||||
|
"chatbubble-filled": "\ue232",
|
||||||
|
"chatbubble": "\ue202",
|
||||||
|
"cloud-download": "\ue8e4",
|
||||||
|
"cloud-upload-filled": "\ue8e5",
|
||||||
|
"cloud-upload": "\ue8e6",
|
||||||
|
"cloud-download-filled": "\ue8e9",
|
||||||
|
"headphones":"\ue8bf",
|
||||||
|
"shop":"\ue609"
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
|
@ -0,0 +1,82 @@
|
||||||
|
{
|
||||||
|
"id": "uni-icons",
|
||||||
|
"displayName": "uni-icons 图标",
|
||||||
|
"version": "1.1.5",
|
||||||
|
"description": "图标组件，用于展示移动端常见的图标，可自定义颜色、大小。",
|
||||||
|
"keywords": [
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"icon",
|
||||||
|
"图标"
|
||||||
|
],
|
||||||
|
"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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
|
||||||
|
|
||||||
|
## Icons 图标
|
||||||
|
> **组件名：uni-icons**
|
||||||
|
> 代码块： `uIcons`
|
||||||
|
|
||||||
|
|
||||||
|
用于展示 icons 图标 。
|
||||||
|
|
||||||
|
### 安装方式
|
||||||
|
|
||||||
|
本组件符合[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-icons type="contact" size="30"></uni-icons>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### Icons Props
|
||||||
|
|
||||||
|
|属性名 |类型 |默认值 |说明 |
|
||||||
|
|:-: |:-: |:-: |:-: |
|
||||||
|
|size |Number |24 |图标大小 |
|
||||||
|
|type |String |- |图标图案，参考示例 |
|
||||||
|
|color |String |- |图标颜色 |
|
||||||
|
|
||||||
|
|
||||||
|
### Icons Events
|
||||||
|
|事件名 |说明 |返回值|
|
||||||
|
|:-: |:-: |:-: |
|
||||||
|
|@click|点击 Icon 触发事件|- |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 组件示例
|
||||||
|
|
||||||
|
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons](https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons)
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
## 1.0.17（2021-05-12）
|
||||||
|
- 新增 组件示例地址
|
||||||
|
## 1.0.16（2021-02-05）
|
||||||
|
- 优化 组件引用关系，通过uni_modules引用组件
|
||||||
|
## 1.0.15（2021-02-05）
|
||||||
|
- 调整为uni_modules目录规范
|
||||||
|
- 修复 uni-list-chat 角标显示不正常的问题
|
||||||
|
|
@ -0,0 +1,107 @@
|
||||||
|
<template>
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<cell>
|
||||||
|
<!-- #endif -->
|
||||||
|
<view class="uni-list-ad">
|
||||||
|
<view v-if="borderShow" :class="{'uni-list--border':border,'uni-list-item--first':isFirstChild}"></view>
|
||||||
|
<ad style="width: 200px;height: 300px;border-width: 1px;border-color: red;border-style: solid;" adpid="1111111111"
|
||||||
|
unit-id="" appid="" apid="" type="feed" @error="aderror" @close="closeAd"></ad>
|
||||||
|
</view>
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
</cell>
|
||||||
|
<!-- #endif -->
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
const dom = uni.requireNativePlugin('dom');
|
||||||
|
// #endif
|
||||||
|
export default {
|
||||||
|
name: 'UniListAd',
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// inject: ['list'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isFirstChild: false,
|
||||||
|
border: false,
|
||||||
|
borderShow: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.list = this.getForm()
|
||||||
|
if (this.list) {
|
||||||
|
if (!this.list.firstChildAppend) {
|
||||||
|
this.list.firstChildAppend = true
|
||||||
|
this.isFirstChild = true
|
||||||
|
}
|
||||||
|
this.border = this.list.border
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 获取父元素实例
|
||||||
|
*/
|
||||||
|
getForm(name = 'uniList') {
|
||||||
|
let parent = this.$parent;
|
||||||
|
let parentName = parent.$options.name;
|
||||||
|
while (parentName !== name) {
|
||||||
|
parent = parent.$parent;
|
||||||
|
if (!parent) return false
|
||||||
|
parentName = parent.$options.name;
|
||||||
|
}
|
||||||
|
return parent;
|
||||||
|
},
|
||||||
|
aderror(e) {
|
||||||
|
console.log("aderror: " + JSON.stringify(e.detail));
|
||||||
|
},
|
||||||
|
closeAd(e) {
|
||||||
|
this.borderShow = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.uni-list-ad {
|
||||||
|
position: relative;
|
||||||
|
border: 1px red solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list--border {
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
/* #ifdef APP-PLUS */
|
||||||
|
border-top-color: $uni-border-color;
|
||||||
|
border-top-style: solid;
|
||||||
|
border-top-width: 0.5px;
|
||||||
|
/* #endif */
|
||||||
|
margin-left: $uni-spacing-row-lg;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
.uni-list--border:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 1px;
|
||||||
|
content: '';
|
||||||
|
-webkit-transform: scaleY(.5);
|
||||||
|
transform: scaleY(.5);
|
||||||
|
background-color: $uni-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-item--first:after {
|
||||||
|
height: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #endif */
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
/**
|
||||||
|
* 这里是 uni-list 组件内置的常用样式变量
|
||||||
|
* 如果需要覆盖样式，这里提供了基本的组件样式变量，您可以尝试修改这里的变量，去完成样式替换，而不用去修改源码
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
// 背景色
|
||||||
|
$background-color : #fff;
|
||||||
|
// 分割线颜色
|
||||||
|
$divide-line-color : #e5e5e5;
|
||||||
|
|
||||||
|
// 默认头像大小，如需要修改此值，注意同步修改 js 中的值 const avatarWidth = xx ，目前只支持方形头像
|
||||||
|
// nvue 页面不支持修改头像大小
|
||||||
|
$avatar-width : 45px ;
|
||||||
|
|
||||||
|
// 头像边框
|
||||||
|
$avatar-border-radius: 5px;
|
||||||
|
$avatar-border-color: #eee;
|
||||||
|
$avatar-border-width: 1px;
|
||||||
|
|
||||||
|
// 标题文字样式
|
||||||
|
$title-size : 16px;
|
||||||
|
$title-color : #3b4144;
|
||||||
|
$title-weight : normal;
|
||||||
|
|
||||||
|
// 描述文字样式
|
||||||
|
$note-size : 12px;
|
||||||
|
$note-color : #999;
|
||||||
|
$note-weight : normal;
|
||||||
|
|
||||||
|
// 右侧额外内容默认样式
|
||||||
|
$right-text-size : 12px;
|
||||||
|
$right-text-color : #999;
|
||||||
|
$right-text-weight : normal;
|
||||||
|
|
||||||
|
// 角标样式
|
||||||
|
// nvue 页面不支持修改圆点位置以及大小
|
||||||
|
// 角标在左侧时，角标的位置，默认为 0 ，负数左/下移动，正数右/上移动
|
||||||
|
$badge-left: 0px;
|
||||||
|
$badge-top: 0px;
|
||||||
|
|
||||||
|
// 显示圆点时，圆点大小
|
||||||
|
$dot-width: 10px;
|
||||||
|
$dot-height: 10px;
|
||||||
|
|
||||||
|
// 显示角标时，角标大小和字体大小
|
||||||
|
$badge-size : 18px;
|
||||||
|
$badge-font : 12px;
|
||||||
|
// 显示角标时，角标前景色
|
||||||
|
$badge-color : #fff;
|
||||||
|
// 显示角标时，角标背景色
|
||||||
|
$badge-background-color : #ff5a5f;
|
||||||
|
// 显示角标时，角标左右间距
|
||||||
|
$badge-space : 6px;
|
||||||
|
|
||||||
|
// 状态样式
|
||||||
|
// 选中颜色
|
||||||
|
$hover : #f5f5f5;
|
||||||
|
|
@ -0,0 +1,533 @@
|
||||||
|
<template>
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<cell>
|
||||||
|
<!-- #endif -->
|
||||||
|
<view :hover-class="!clickable && !link ? '' : 'uni-list-chat--hover'" class="uni-list-chat" @click.stop="onClick">
|
||||||
|
<view :class="{ 'uni-list--border': border, 'uni-list-chat--first': isFirstChild }"></view>
|
||||||
|
<view class="uni-list-chat__container">
|
||||||
|
<view class="uni-list-chat__header-warp">
|
||||||
|
<view v-if="avatarCircle || avatarList.length === 0" class="uni-list-chat__header" :class="{ 'header--circle': avatarCircle }">
|
||||||
|
<image class="uni-list-chat__header-image" :src="avatar" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<!-- 头像组 -->
|
||||||
|
<view v-else class="uni-list-chat__header">
|
||||||
|
<view v-for="(item, index) in avatarList" :key="index" class="uni-list-chat__header-box" :class="computedAvatar"
|
||||||
|
:style="{ width: imageWidth + 'px', height: imageWidth + 'px' }">
|
||||||
|
<image class="uni-list-chat__header-image" :style="{ width: imageWidth + 'px', height: imageWidth + 'px' }" :src="item.url"
|
||||||
|
mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="badgeText && badgePositon === 'left'" class="uni-list-chat__badge uni-list-chat__badge-pos" :class="[isSingle]">
|
||||||
|
<text class="uni-list-chat__badge-text">{{ badgeText === 'dot' ? '' : badgeText }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="uni-list-chat__content">
|
||||||
|
<view class="uni-list-chat__content-main">
|
||||||
|
<text class="uni-list-chat__content-title uni-ellipsis">{{ title }}</text>
|
||||||
|
<text class="uni-list-chat__content-note uni-ellipsis">{{ note }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="uni-list-chat__content-extra">
|
||||||
|
<slot>
|
||||||
|
<text class="uni-list-chat__content-extra-text">{{ time }}</text>
|
||||||
|
<view v-if="badgeText && badgePositon === 'right'" class="uni-list-chat__badge" :class="[isSingle, badgePositon === 'right' ? 'uni-list-chat--right' : '']">
|
||||||
|
<text class="uni-list-chat__badge-text">{{ badgeText === 'dot' ? '' : badgeText }}</text>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
</cell>
|
||||||
|
<!-- #endif -->
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 头像大小
|
||||||
|
const avatarWidth = 45;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ListChat 聊天列表
|
||||||
|
* @description 聊天列表,用于创建聊天类列表
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=24
|
||||||
|
* @property {String} title 标题
|
||||||
|
* @property {String} note 描述
|
||||||
|
* @property {Boolean} clickable = [true|false] 是否开启点击反馈，默认为false
|
||||||
|
* @property {String} badgeText 数字角标内容
|
||||||
|
* @property {String} badgePositon = [left|right] 角标位置，默认为 right
|
||||||
|
* @property {String} link = [false｜navigateTo|redirectTo|reLaunch|switchTab] 是否展示右侧箭头并开启点击反馈，默认为false
|
||||||
|
* @value false 不开启
|
||||||
|
* @value navigateTo 同 uni.navigateTo()
|
||||||
|
* @value redirectTo 同 uni.redirectTo()
|
||||||
|
* @value reLaunch 同 uni.reLaunch()
|
||||||
|
* @value switchTab 同 uni.switchTab()
|
||||||
|
* @property {String | PageURIString} to 跳转目标页面
|
||||||
|
* @property {String} time 右侧时间显示
|
||||||
|
* @property {Boolean} avatarCircle = [true|false] 是否显示圆形头像，默认为false
|
||||||
|
* @property {String} avatar 头像地址，avatarCircle 不填时生效
|
||||||
|
* @property {Array} avatarList 头像组，格式为 [{url:''}]
|
||||||
|
* @event {Function} click 点击 uniListChat 触发事件
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'UniListChat',
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
note: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
clickable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
link: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
to: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
badgeText: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
badgePositon: {
|
||||||
|
type: String,
|
||||||
|
default: 'right'
|
||||||
|
},
|
||||||
|
time: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
avatarCircle: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
avatar: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
avatarList: {
|
||||||
|
type: Array,
|
||||||
|
default () {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// inject: ['list'],
|
||||||
|
computed: {
|
||||||
|
isSingle() {
|
||||||
|
if (this.badgeText === 'dot') {
|
||||||
|
return 'uni-badge--dot';
|
||||||
|
} else {
|
||||||
|
const badgeText = this.badgeText.toString();
|
||||||
|
if (badgeText.length > 1) {
|
||||||
|
return 'uni-badge--complex';
|
||||||
|
} else {
|
||||||
|
return 'uni-badge--single';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computedAvatar() {
|
||||||
|
if (this.avatarList.length > 4) {
|
||||||
|
this.imageWidth = avatarWidth * 0.31;
|
||||||
|
return 'avatarItem--3';
|
||||||
|
} else if (this.avatarList.length > 1) {
|
||||||
|
this.imageWidth = avatarWidth * 0.47;
|
||||||
|
return 'avatarItem--2';
|
||||||
|
} else {
|
||||||
|
this.imageWidth = avatarWidth;
|
||||||
|
return 'avatarItem--1';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isFirstChild: false,
|
||||||
|
border: true,
|
||||||
|
// avatarList: 3,
|
||||||
|
imageWidth: 50
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.list = this.getForm()
|
||||||
|
if (this.list) {
|
||||||
|
if (!this.list.firstChildAppend) {
|
||||||
|
this.list.firstChildAppend = true;
|
||||||
|
this.isFirstChild = true;
|
||||||
|
}
|
||||||
|
this.border = this.list.border;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 获取父元素实例
|
||||||
|
*/
|
||||||
|
getForm(name = 'uniList') {
|
||||||
|
let parent = this.$parent;
|
||||||
|
let parentName = parent.$options.name;
|
||||||
|
while (parentName !== name) {
|
||||||
|
parent = parent.$parent;
|
||||||
|
if (!parent) return false
|
||||||
|
parentName = parent.$options.name;
|
||||||
|
}
|
||||||
|
return parent;
|
||||||
|
},
|
||||||
|
onClick() {
|
||||||
|
if (this.to !== '') {
|
||||||
|
this.openPage();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.clickable || this.link) {
|
||||||
|
this.$emit('click', {
|
||||||
|
data: {}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
openPage() {
|
||||||
|
if (['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].indexOf(this.link) !== -1) {
|
||||||
|
this.pageApi(this.link);
|
||||||
|
} else {
|
||||||
|
this.pageApi('navigateTo');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pageApi(api) {
|
||||||
|
uni[api]({
|
||||||
|
url: this.to,
|
||||||
|
success: res => {
|
||||||
|
this.$emit('click', {
|
||||||
|
data: res
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail: err => {
|
||||||
|
this.$emit('click', {
|
||||||
|
data: err
|
||||||
|
});
|
||||||
|
console.error(err.errMsg);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$background-color: #fff;
|
||||||
|
$divide-line-color: #e5e5e5;
|
||||||
|
$avatar-width: 45px;
|
||||||
|
$avatar-border-radius: 5px;
|
||||||
|
$avatar-border-color: #eee;
|
||||||
|
$avatar-border-width: 1px;
|
||||||
|
$title-size: 16px;
|
||||||
|
$title-color: #3b4144;
|
||||||
|
$title-weight: normal;
|
||||||
|
$note-size: 12px;
|
||||||
|
$note-color: #999;
|
||||||
|
$note-weight: normal;
|
||||||
|
$right-text-size: 12px;
|
||||||
|
$right-text-color: #999;
|
||||||
|
$right-text-weight: normal;
|
||||||
|
$badge-left: 0px;
|
||||||
|
$badge-top: 0px;
|
||||||
|
$dot-width: 10px;
|
||||||
|
$dot-height: 10px;
|
||||||
|
$badge-size: 18px;
|
||||||
|
$badge-font: 12px;
|
||||||
|
$badge-color: #fff;
|
||||||
|
$badge-background-color: #ff5a5f;
|
||||||
|
$badge-space: 6px;
|
||||||
|
$hover: #f5f5f5;
|
||||||
|
|
||||||
|
.uni-list-chat {
|
||||||
|
font-size: $uni-font-size-lg;
|
||||||
|
position: relative;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: $background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .uni-list-chat--disabled {
|
||||||
|
// opacity: 0.3;
|
||||||
|
// }
|
||||||
|
|
||||||
|
.uni-list-chat--hover {
|
||||||
|
background-color: $hover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list--border {
|
||||||
|
position: relative;
|
||||||
|
margin-left: $uni-spacing-row-lg;
|
||||||
|
/* #ifdef APP-PLUS */
|
||||||
|
border-top-color: $divide-line-color;
|
||||||
|
border-top-style: solid;
|
||||||
|
border-top-width: 0.5px;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
.uni-list--border:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 1px;
|
||||||
|
content: '';
|
||||||
|
-webkit-transform: scaleY(0.5);
|
||||||
|
transform: scaleY(0.5);
|
||||||
|
background-color: $divide-line-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-item--first:after {
|
||||||
|
height: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
.uni-list-chat--first {
|
||||||
|
border-top-width: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-ellipsis {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
lines: 1;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-ellipsis-2 {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
lines: 2;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-chat__container {
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
flex: 1;
|
||||||
|
padding: $uni-spacing-row-base $uni-spacing-row-lg;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-chat__header-warp {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-chat__header {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
align-content: center;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap-reverse;
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
width: $avatar-width;
|
||||||
|
height: $avatar-width;
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
border-radius: $avatar-border-radius;
|
||||||
|
border-color: $avatar-border-color;
|
||||||
|
border-width: $avatar-border-width;
|
||||||
|
border-style: solid;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-chat__header-box {
|
||||||
|
/* #ifndef APP-PLUS */
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
width: $avatar-width;
|
||||||
|
height: $avatar-width;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
/* #endif */
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-chat__header-image {
|
||||||
|
margin: 1px;
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
width: $avatar-width;
|
||||||
|
height: $avatar-width;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
.uni-list-chat__header-image {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatarItem--1 {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatarItem--2 {
|
||||||
|
width: 47%;
|
||||||
|
height: 47%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatarItem--3 {
|
||||||
|
width: 32%;
|
||||||
|
height: 32%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #endif */
|
||||||
|
.header--circle {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-chat__content {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-chat__content-main {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-left: $uni-spacing-row-base;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-chat__content-title {
|
||||||
|
font-size: $title-size;
|
||||||
|
color: $title-color;
|
||||||
|
font-weight: $title-weight;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-chat__content-note {
|
||||||
|
margin-top: 3px;
|
||||||
|
color: $note-color;
|
||||||
|
font-size: $note-size;
|
||||||
|
font-weight: $title-weight;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-chat__content-extra {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-chat__content-extra-text {
|
||||||
|
color: $right-text-color;
|
||||||
|
font-size: $right-text-size;
|
||||||
|
font-weight: $right-text-weight;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-chat__badge-pos {
|
||||||
|
position: absolute;
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
left: 55px;
|
||||||
|
top: 3px;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
left: calc(#{$avatar-width} + 10px - #{$badge-space} + #{$badge-left});
|
||||||
|
top: calc(#{$uni-spacing-row-base}/ 2 + 1px + #{$badge-top});
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-chat__badge {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 100px;
|
||||||
|
background-color: $badge-background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-chat__badge-text {
|
||||||
|
color: $badge-color;
|
||||||
|
font-size: $badge-font;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-badge--single {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
// left: calc(#{$avatar-width} + 7px + #{$badge-left});
|
||||||
|
/* #endif */
|
||||||
|
width: $badge-size;
|
||||||
|
height: $badge-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-badge--complex {
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
left: 50px;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
width: auto;
|
||||||
|
/* #endif */
|
||||||
|
height: $badge-size;
|
||||||
|
padding: 0 $badge-space;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-badge--dot {
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
left: 60px;
|
||||||
|
top: 6px;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
left: calc(#{$avatar-width} + 15px - #{$dot-width}/ 2 + 1px + #{$badge-left});
|
||||||
|
/* #endif */
|
||||||
|
width: $dot-width;
|
||||||
|
height: $dot-height;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-chat--right {
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
left: 0;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,438 @@
|
||||||
|
<template>
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<cell>
|
||||||
|
<!-- #endif -->
|
||||||
|
|
||||||
|
<view
|
||||||
|
:class="{ 'uni-list-item--disabled': disabled }"
|
||||||
|
:hover-class="(!clickable && !link) || disabled || showSwitch ? '' : 'uni-list-item--hover'"
|
||||||
|
class="uni-list-item"
|
||||||
|
@click.stop="onClick"
|
||||||
|
>
|
||||||
|
<view v-if="!isFirstChild" class="border--left" :class="{ 'uni-list--border': border }"></view>
|
||||||
|
<view class="uni-list-item__container" :class="{ 'container--right': showArrow || link, 'flex--direction': direction === 'column' }">
|
||||||
|
<slot name="header">
|
||||||
|
<view class="uni-list-item__header">
|
||||||
|
<view v-if="thumb" class="uni-list-item__icon"><image :src="thumb" class="uni-list-item__icon-img" :class="['uni-list--' + thumbSize]" /></view>
|
||||||
|
<view v-else-if="showExtraIcon" class="uni-list-item__icon"><uni-icons :color="extraIcon.color" :size="extraIcon.size" :type="extraIcon.type" /></view>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
<slot name="body">
|
||||||
|
<view class="uni-list-item__content" :class="{ 'uni-list-item__content--center': thumb || showExtraIcon || showBadge || showSwitch }">
|
||||||
|
<text v-if="title" class="uni-list-item__content-title" :class="[ellipsis !== 0 && ellipsis <= 2 ? 'uni-ellipsis-' + ellipsis : '']">{{ title }}</text>
|
||||||
|
<text v-if="note" class="uni-list-item__content-note">{{ note }}</text>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
<slot name="footer">
|
||||||
|
<view v-if="rightText || showBadge || showSwitch" class="uni-list-item__extra" :class="{ 'flex--justify': direction === 'column' }">
|
||||||
|
<text v-if="rightText" class="uni-list-item__extra-text">{{ rightText }}</text>
|
||||||
|
<uni-badge v-if="showBadge" :type="badgeType" :text="badgeText" />
|
||||||
|
<switch v-if="showSwitch" :disabled="disabled" :checked="switchChecked" @change="onSwitchChange" />
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
<uni-icons v-if="showArrow || link" :size="16" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
|
||||||
|
</view>
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
</cell>
|
||||||
|
<!-- #endif -->
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* ListItem 列表子组件
|
||||||
|
* @description 列表子组件
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=24
|
||||||
|
* @property {String} title 标题
|
||||||
|
* @property {String} note 描述
|
||||||
|
* @property {String} thumb 左侧缩略图，若thumb有值，则不会显示扩展图标
|
||||||
|
* @property {String} thumbSize = [lg|base|sm] 略缩图大小
|
||||||
|
* @value lg 大图
|
||||||
|
* @value base 一般
|
||||||
|
* @value sm 小图
|
||||||
|
* @property {String} badgeText 数字角标内容
|
||||||
|
* @property {String} badgeType 数字角标类型，参考[uni-icons](https://ext.dcloud.net.cn/plugin?id=21)
|
||||||
|
* @property {String} rightText 右侧文字内容
|
||||||
|
* @property {Boolean} disabled = [true|false] 是否禁用
|
||||||
|
* @property {Boolean} clickable = [true|false] 是否开启点击反馈
|
||||||
|
* @property {String} link = [navigateTo|redirectTo|reLaunch|switchTab] 是否展示右侧箭头并开启点击反馈
|
||||||
|
* @value navigateTo 同 uni.navigateTo()
|
||||||
|
* @value redirectTo 同 uni.redirectTo()
|
||||||
|
* @value reLaunch 同 uni.reLaunch()
|
||||||
|
* @value switchTab 同 uni.switchTab()
|
||||||
|
* @property {String | PageURIString} to 跳转目标页面
|
||||||
|
* @property {Boolean} showBadge = [true|false] 是否显示数字角标
|
||||||
|
* @property {Boolean} showSwitch = [true|false] 是否显示Switch
|
||||||
|
* @property {Boolean} switchChecked = [true|false] Switch是否被选中
|
||||||
|
* @property {Boolean} showExtraIcon = [true|false] 左侧是否显示扩展图标
|
||||||
|
* @property {Object} extraIcon 扩展图标参数，格式为 {color: '#4cd964',size: '22',type: 'spinner'}
|
||||||
|
* @property {String} direction = [row|column] 排版方向
|
||||||
|
* @value row 水平排列
|
||||||
|
* @value column 垂直排列
|
||||||
|
* @event {Function} click 点击 uniListItem 触发事件
|
||||||
|
* @event {Function} switchChange 点击切换 Switch 时触发
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'UniListItem',
|
||||||
|
props: {
|
||||||
|
direction: {
|
||||||
|
type: String,
|
||||||
|
default: 'row'
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
note: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
ellipsis: {
|
||||||
|
type: [Number],
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
clickable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
showArrow: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
link: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
to: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
showBadge: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
showSwitch: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
switchChecked: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
badgeText: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
badgeType: {
|
||||||
|
type: String,
|
||||||
|
default: 'success'
|
||||||
|
},
|
||||||
|
rightText: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
thumb: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
thumbSize: {
|
||||||
|
type: String,
|
||||||
|
default: 'base'
|
||||||
|
},
|
||||||
|
showExtraIcon: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
extraIcon: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {
|
||||||
|
type: 'contact',
|
||||||
|
color: '#000000',
|
||||||
|
size: 20
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
border: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// inject: ['list'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isFirstChild: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.list = this.getForm()
|
||||||
|
// 判断是否存在 uni-list 组件
|
||||||
|
if(this.list){
|
||||||
|
if (!this.list.firstChildAppend) {
|
||||||
|
this.list.firstChildAppend = true;
|
||||||
|
this.isFirstChild = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 获取父元素实例
|
||||||
|
*/
|
||||||
|
getForm(name = 'uniList') {
|
||||||
|
let parent = this.$parent;
|
||||||
|
let parentName = parent.$options.name;
|
||||||
|
while (parentName !== name) {
|
||||||
|
parent = parent.$parent;
|
||||||
|
if (!parent) return false
|
||||||
|
parentName = parent.$options.name;
|
||||||
|
}
|
||||||
|
return parent;
|
||||||
|
},
|
||||||
|
onClick() {
|
||||||
|
if (this.to !== '') {
|
||||||
|
this.openPage();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this.clickable || this.link) {
|
||||||
|
this.$emit('click', {
|
||||||
|
data: {}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onSwitchChange(e) {
|
||||||
|
this.$emit('switchChange', e.detail);
|
||||||
|
},
|
||||||
|
openPage() {
|
||||||
|
if (['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].indexOf(this.link) !== -1) {
|
||||||
|
this.pageApi(this.link);
|
||||||
|
} else {
|
||||||
|
this.pageApi('navigateTo');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pageApi(api) {
|
||||||
|
uni[api]({
|
||||||
|
url: this.to,
|
||||||
|
success: res => {
|
||||||
|
this.$emit('click', {
|
||||||
|
data: res
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail: err => {
|
||||||
|
this.$emit('click', {
|
||||||
|
data: err
|
||||||
|
});
|
||||||
|
console.error(err.errMsg);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
$list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg;
|
||||||
|
|
||||||
|
.uni-list-item {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
font-size: $uni-font-size-lg;
|
||||||
|
position: relative;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #fff;
|
||||||
|
flex-direction: row;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
cursor: pointer;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-item--disabled {
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-item--hover {
|
||||||
|
background-color: $uni-bg-color-hover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-item__container {
|
||||||
|
position: relative;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
padding: $list-item-pd;
|
||||||
|
padding-left: $uni-spacing-row-lg;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
// align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container--right {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .border--left {
|
||||||
|
// margin-left: $uni-spacing-row-lg;
|
||||||
|
// }
|
||||||
|
|
||||||
|
.uni-list--border {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
border-top-color: $uni-border-color;
|
||||||
|
border-top-style: solid;
|
||||||
|
border-top-width: 0.5px;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
.uni-list--border:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 1px;
|
||||||
|
content: '';
|
||||||
|
-webkit-transform: scaleY(0.5);
|
||||||
|
transform: scaleY(0.5);
|
||||||
|
background-color: $uni-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
.uni-list-item__content {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
padding-right: 8px;
|
||||||
|
flex: 1;
|
||||||
|
color: #3b4144;
|
||||||
|
// overflow: hidden;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-item__content--center {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-item__content-title {
|
||||||
|
font-size: $uni-font-size-base;
|
||||||
|
color: #3b4144;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-item__content-note {
|
||||||
|
margin-top: 6rpx;
|
||||||
|
color: $uni-text-color-grey;
|
||||||
|
font-size: $uni-font-size-sm;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-item__extra {
|
||||||
|
// width: 25%;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-item__header {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-item__icon {
|
||||||
|
margin-right: 18rpx;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-item__icon-img {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: block;
|
||||||
|
/* #endif */
|
||||||
|
height: $uni-img-size-base;
|
||||||
|
width: $uni-img-size-base;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-icon-wrapper {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex--direction {
|
||||||
|
flex-direction: column;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
align-items: initial;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex--justify {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
justify-content: initial;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list--lg {
|
||||||
|
height: $uni-img-size-lg;
|
||||||
|
width: $uni-img-size-lg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list--base {
|
||||||
|
height: $uni-img-size-base;
|
||||||
|
width: $uni-img-size-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list--sm {
|
||||||
|
height: $uni-img-size-sm;
|
||||||
|
width: $uni-img-size-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list-item__extra-text {
|
||||||
|
color: $uni-text-color-grey;
|
||||||
|
font-size: $uni-font-size-sm;
|
||||||
|
}
|
||||||
|
.uni-ellipsis-1 {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
/* #endif */
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
lines: 1;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-ellipsis-2 {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
lines: 2;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,106 @@
|
||||||
|
<template>
|
||||||
|
<!-- #ifndef APP-NVUE -->
|
||||||
|
<view class="uni-list uni-border-top-bottom">
|
||||||
|
<view v-if="border" class="uni-list--border-top"></view>
|
||||||
|
<slot />
|
||||||
|
<view v-if="border" class="uni-list--border-bottom"></view>
|
||||||
|
</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<list class="uni-list" :class="{ 'uni-list--border': border }" :enableBackToTop="enableBackToTop" loadmoreoffset="15"><slot /></list>
|
||||||
|
<!-- #endif -->
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* List 列表
|
||||||
|
* @description 列表组件
|
||||||
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=24
|
||||||
|
* @property {String} border = [true|false] 标题
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'uniList',
|
||||||
|
'mp-weixin': {
|
||||||
|
options: {
|
||||||
|
multipleSlots: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
enableBackToTop: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
scrollY: {
|
||||||
|
type: [Boolean, String],
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
border: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// provide() {
|
||||||
|
// return {
|
||||||
|
// list: this
|
||||||
|
// };
|
||||||
|
// },
|
||||||
|
created() {
|
||||||
|
this.firstChildAppend = false;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
loadMore(e) {
|
||||||
|
this.$emit('scrolltolower');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.uni-list {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
background-color: $uni-bg-color;
|
||||||
|
position: relative;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list--border {
|
||||||
|
position: relative;
|
||||||
|
/* #ifdef APP-NVUE */
|
||||||
|
border-top-color: $uni-border-color;
|
||||||
|
border-top-style: solid;
|
||||||
|
border-top-width: 0.5px;
|
||||||
|
border-bottom-color: $uni-border-color;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
border-bottom-width: 0.5px;
|
||||||
|
/* #endif */
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
|
||||||
|
.uni-list--border-top {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 1px;
|
||||||
|
-webkit-transform: scaleY(0.5);
|
||||||
|
transform: scaleY(0.5);
|
||||||
|
background-color: $uni-border-color;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-list--border-bottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 1px;
|
||||||
|
-webkit-transform: scaleY(0.5);
|
||||||
|
transform: scaleY(0.5);
|
||||||
|
background-color: $uni-border-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* #endif */
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
<template>
|
||||||
|
<!-- #ifdef APP-NVUE -->
|
||||||
|
<refresh :display="display" @refresh="onrefresh" @pullingdown="onpullingdown">
|
||||||
|
<slot />
|
||||||
|
</refresh>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifndef APP-NVUE -->
|
||||||
|
<view ref="uni-refresh" class="uni-refresh" v-show="isShow">
|
||||||
|
<slot />
|
||||||
|
</view>
|
||||||
|
<!-- #endif -->
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'UniRefresh',
|
||||||
|
props: {
|
||||||
|
display: {
|
||||||
|
type: [String],
|
||||||
|
default: "hide"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pulling: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
isShow() {
|
||||||
|
if (this.display === "show" || this.pulling === true) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
methods: {
|
||||||
|
onchange(value) {
|
||||||
|
this.pulling = value;
|
||||||
|
},
|
||||||
|
onrefresh(e) {
|
||||||
|
this.$emit("refresh", e);
|
||||||
|
},
|
||||||
|
onpullingdown(e) {
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
this.$emit("pullingdown", e);
|
||||||
|
// #endif
|
||||||
|
// #ifndef APP-NVUE
|
||||||
|
var detail = {
|
||||||
|
viewHeight: 90,
|
||||||
|
pullingDistance: e.height
|
||||||
|
}
|
||||||
|
this.$emit("pullingdown", detail);
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.uni-refresh {
|
||||||
|
height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,87 @@
|
||||||
|
var pullDown = {
|
||||||
|
threshold: 95,
|
||||||
|
maxHeight: 200,
|
||||||
|
callRefresh: 'onrefresh',
|
||||||
|
callPullingDown: 'onpullingdown',
|
||||||
|
refreshSelector: '.uni-refresh'
|
||||||
|
};
|
||||||
|
|
||||||
|
function ready(newValue, oldValue, ownerInstance, instance) {
|
||||||
|
var state = instance.getState()
|
||||||
|
state.canPullDown = newValue;
|
||||||
|
// console.log(newValue);
|
||||||
|
}
|
||||||
|
|
||||||
|
function touchStart(e, instance) {
|
||||||
|
var state = instance.getState();
|
||||||
|
state.refreshInstance = instance.selectComponent(pullDown.refreshSelector);
|
||||||
|
state.canPullDown = (state.refreshInstance != null && state.refreshInstance != undefined);
|
||||||
|
if (!state.canPullDown) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// console.log("touchStart");
|
||||||
|
|
||||||
|
state.height = 0;
|
||||||
|
state.touchStartY = e.touches[0].pageY || e.changedTouches[0].pageY;
|
||||||
|
state.refreshInstance.setStyle({
|
||||||
|
'height': 0
|
||||||
|
});
|
||||||
|
state.refreshInstance.callMethod("onchange", true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function touchMove(e, ownerInstance) {
|
||||||
|
var instance = e.instance;
|
||||||
|
var state = instance.getState();
|
||||||
|
if (!state.canPullDown) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
var oldHeight = state.height;
|
||||||
|
var endY = e.touches[0].pageY || e.changedTouches[0].pageY;
|
||||||
|
var height = endY - state.touchStartY;
|
||||||
|
if (height > pullDown.maxHeight) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var refreshInstance = state.refreshInstance;
|
||||||
|
refreshInstance.setStyle({
|
||||||
|
'height': height + 'px'
|
||||||
|
});
|
||||||
|
|
||||||
|
height = height < pullDown.maxHeight ? height : pullDown.maxHeight;
|
||||||
|
state.height = height;
|
||||||
|
refreshInstance.callMethod(pullDown.callPullingDown, {
|
||||||
|
height: height
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function touchEnd(e, ownerInstance) {
|
||||||
|
var state = e.instance.getState();
|
||||||
|
if (!state.canPullDown) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
state.refreshInstance.callMethod("onchange", false);
|
||||||
|
|
||||||
|
var refreshInstance = state.refreshInstance;
|
||||||
|
if (state.height > pullDown.threshold) {
|
||||||
|
refreshInstance.callMethod(pullDown.callRefresh);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
refreshInstance.setStyle({
|
||||||
|
'height': 0
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function propObserver(newValue, oldValue, instance) {
|
||||||
|
pullDown = newValue;
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
touchmove: touchMove,
|
||||||
|
touchstart: touchStart,
|
||||||
|
touchend: touchEnd,
|
||||||
|
propObserver: propObserver
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,87 @@
|
||||||
|
{
|
||||||
|
"id": "uni-list",
|
||||||
|
"displayName": "uni-list 列表",
|
||||||
|
"version": "1.0.17",
|
||||||
|
"description": "List 组件 ，帮助使用者快速构建列表。",
|
||||||
|
"keywords": [
|
||||||
|
"",
|
||||||
|
"uni-ui",
|
||||||
|
"uniui",
|
||||||
|
"列表",
|
||||||
|
"",
|
||||||
|
"list"
|
||||||
|
],
|
||||||
|
"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-badge",
|
||||||
|
"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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,347 @@
|
||||||
|
|
||||||
|
|
||||||
|
## List 列表
|
||||||
|
> **组件名：uni-list**
|
||||||
|
> 代码块： `uList`、`uListItem`
|
||||||
|
> 关联组件：`uni-list-item`、`uni-badge`、`uni-icons`、`uni-list-chat`、`uni-list-ad`
|
||||||
|
|
||||||
|
|
||||||
|
List 列表组件，包含基本列表样式、可扩展插槽机制、长列表性能优化、多端兼容。
|
||||||
|
|
||||||
|
在vue页面里，它默认使用页面级滚动。在app-nvue页面里，它默认使用原生list组件滚动。这样的长列表，在滚动出屏幕外后，系统会回收不可见区域的渲染内存资源，不会造成滚动越长手机越卡的问题。
|
||||||
|
|
||||||
|
uni-list组件是父容器，里面的核心是uni-list-item子组件，它代表列表中的一个可重复行，子组件可以无限循环。
|
||||||
|
|
||||||
|
uni-list-item有很多风格，uni-list-item组件通过内置的属性，满足一些常用的场景。当内置属性不满足需求时，可以通过扩展插槽来自定义列表内容。
|
||||||
|
|
||||||
|
内置属性可以覆盖的场景包括：导航列表、设置列表、小图标列表、通信录列表、聊天记录列表。
|
||||||
|
|
||||||
|
涉及很多大图或丰富内容的列表，比如类今日头条的新闻列表、类淘宝的电商列表，需要通过扩展插槽实现。
|
||||||
|
|
||||||
|
下文均有样例给出。
|
||||||
|
|
||||||
|
uni-list不包含下拉刷新和上拉翻页。上拉翻页另见组件：[uni-load-more](https://ext.dcloud.net.cn/plugin?id=29)
|
||||||
|
|
||||||
|
|
||||||
|
### 安装方式
|
||||||
|
|
||||||
|
本组件符合[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)
|
||||||
|
|
||||||
|
> **注意事项**
|
||||||
|
> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
|
||||||
|
> - 组件需要依赖 `sass` 插件 ，请自行手动安装
|
||||||
|
> - 组件内部依赖 `'uni-icons'` 、`uni-badge` 组件
|
||||||
|
> - `uni-list` 和 `uni-list-item` 需要配套使用，暂不支持单独使用 `uni-list-item`
|
||||||
|
> - 只有开启点击反馈后，会有点击选中效果
|
||||||
|
> - 使用插槽时，可以完全自定义内容
|
||||||
|
> - note 、rightText 属性暂时没做限制，不支持文字溢出隐藏，使用时应该控制长度显示或通过默认插槽自行扩展
|
||||||
|
> - 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式，开启方式： 详情 --> 项目配置 --> 启用 component2 编译
|
||||||
|
> - 如果需要修改 `switch`、`badge` 样式，请使用插槽自定义
|
||||||
|
> - 在 `HBuilderX` 低版本中，可能会出现组件显示 `undefined` 的问题，请升级最新的 `HBuilderX` 或者 `cli`
|
||||||
|
> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||||
|
|
||||||
|
|
||||||
|
### 基本用法
|
||||||
|
|
||||||
|
- 设置 `title` 属性，可以显示列表标题
|
||||||
|
- 设置 `disabled` 属性，可以禁用当前项
|
||||||
|
|
||||||
|
```html
|
||||||
|
<uni-list>
|
||||||
|
<uni-list-item title="列表文字" ></uni-list-item>
|
||||||
|
<uni-list-item :disabled="true" title="列表禁用状态" ></uni-list-item>
|
||||||
|
</uni-list>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### 多行内容显示
|
||||||
|
|
||||||
|
- 设置 `note` 属性 ，可以在第二行显示描述文本信息
|
||||||
|
|
||||||
|
```html
|
||||||
|
<uni-list>
|
||||||
|
<uni-list-item title="列表文字" note="列表描述信息"></uni-list-item>
|
||||||
|
<uni-list-item :disabled="true" title="列表文字" note="列表禁用状态"></uni-list-item>
|
||||||
|
</uni-list>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### 右侧显示角标、switch
|
||||||
|
|
||||||
|
- 设置 `show-badge` 属性 ，可以显示角标内容
|
||||||
|
- 设置 `show-switch` 属性，可以显示 switch 开关
|
||||||
|
|
||||||
|
```html
|
||||||
|
<uni-list>
|
||||||
|
<uni-list-item title="列表右侧显示角标" :show-badge="true" badge-text="12" ></uni-list-item>
|
||||||
|
<uni-list-item title="列表右侧显示 switch" :show-switch="true" @switchChange="switchChange" ></uni-list-item>
|
||||||
|
</uni-list>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### 左侧显示略缩图、图标
|
||||||
|
|
||||||
|
- 设置 `thumb` 属性 ，可以在列表左侧显示略缩图
|
||||||
|
- 设置 `show-extra-icon` 属性，并指定 `extra-icon` 可以在左侧显示图标
|
||||||
|
|
||||||
|
```html
|
||||||
|
<uni-list>
|
||||||
|
<uni-list-item title="列表左侧带略缩图" note="列表描述信息" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
|
||||||
|
thumb-size="lg" rightText="右侧文字"></uni-list-item>
|
||||||
|
<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" title="列表左侧带扩展图标" ></uni-list-item>
|
||||||
|
</uni-list>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 开启点击反馈和右侧箭头
|
||||||
|
- 设置 `clickable` 为 `true` ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 `click` 事件
|
||||||
|
- 设置 `link` 属性，会自动开启点击反馈，并给列表右侧添加一个箭头
|
||||||
|
- 设置 `to` 属性，可以跳转页面，`link` 的值表示跳转方式，如果不指定，默认为 `navigateTo`
|
||||||
|
|
||||||
|
```html
|
||||||
|
|
||||||
|
<uni-list>
|
||||||
|
<uni-list-item title="开启点击反馈" clickable @click="onClick" ></uni-list-item>
|
||||||
|
<uni-list-item title="默认 navigateTo 方式跳转页面" link to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
|
||||||
|
<uni-list-item title="reLaunch 方式跳转页面" link="reLaunch" to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
|
||||||
|
</uni-list>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
### 聊天列表示例
|
||||||
|
- 设置 `clickable` 为 `true` ，则表示这是一个可点击的列表，会默认给一个点击效果，并可以监听 `click` 事件
|
||||||
|
- 设置 `link` 属性，会自动开启点击反馈，`link` 的值表示跳转方式，如果不指定，默认为 `navigateTo`
|
||||||
|
- 设置 `to` 属性，可以跳转页面
|
||||||
|
- `time` 属性，通常会设置成时间显示，但是这个属性不仅仅可以设置时间，你可以传入任何文本，注意文本长度可能会影响显示
|
||||||
|
- `avatar` 和 `avatarList` 属性同时只会有一个生效，同时设置的话，`avatarList` 属性的长度大于1 ，`avatar` 属性将失效
|
||||||
|
- 可以通过默认插槽自定义列表右侧内容
|
||||||
|
|
||||||
|
```html
|
||||||
|
|
||||||
|
<uni-list>
|
||||||
|
<uni-list :border="true">
|
||||||
|
<!-- 显示圆形头像 -->
|
||||||
|
<uni-list-chat :avatar-circle="true" title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" ></uni-list-chat>
|
||||||
|
<!-- 右侧带角标 -->
|
||||||
|
<uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-text="12"></uni-list-chat>
|
||||||
|
<!-- 头像显示圆点 -->
|
||||||
|
<uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
|
||||||
|
<!-- 头像显示角标 -->
|
||||||
|
<uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="99"></uni-list-chat>
|
||||||
|
<!-- 显示多头像 -->
|
||||||
|
<uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
|
||||||
|
<!-- 自定义右侧内容 -->
|
||||||
|
<uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot">
|
||||||
|
<view class="chat-custom-right">
|
||||||
|
<text class="chat-custom-text">刚刚</text>
|
||||||
|
<!-- 需要使用 uni-icons 请自行引入 -->
|
||||||
|
<uni-icons type="star-filled" color="#999" size="18"></uni-icons>
|
||||||
|
</view>
|
||||||
|
</uni-list-chat>
|
||||||
|
</uni-list>
|
||||||
|
</uni-list>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
avatarList: [{
|
||||||
|
url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
|
||||||
|
}, {
|
||||||
|
url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
|
||||||
|
}, {
|
||||||
|
url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
```css
|
||||||
|
|
||||||
|
.chat-custom-right {
|
||||||
|
flex: 1;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-custom-text {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### List Props
|
||||||
|
|
||||||
|
属性名 |类型 |默认值 | 说明
|
||||||
|
:-: |:-: |:-: | :-:
|
||||||
|
border |Boolean |true | 是否显示边框
|
||||||
|
|
||||||
|
|
||||||
|
### ListItem Props
|
||||||
|
|
||||||
|
属性名 |类型 |默认值 | 说明
|
||||||
|
:-: |:-: |:-: | :-:
|
||||||
|
title |String |- | 标题
|
||||||
|
note |String |- | 描述
|
||||||
|
ellipsis |Number |0 | title 是否溢出隐藏，可选值，0:默认; 1:显示一行; 2:显示两行;【nvue 暂不支持】
|
||||||
|
thumb |String |- | 左侧缩略图，若thumb有值，则不会显示扩展图标
|
||||||
|
thumbSize |String |medium | 略缩图尺寸，可选值，lg:大图; medium:一般; sm:小图;
|
||||||
|
showBadge |Boolean |false | 是否显示数字角标
|
||||||
|
badgeText |String |- | 数字角标内容
|
||||||
|
badgeType |String |- | 数字角标类型，参考[uni-icons](https://ext.dcloud.net.cn/plugin?id=21)
|
||||||
|
rightText |String |- | 右侧文字内容
|
||||||
|
disabled |Boolean |false | 是否禁用
|
||||||
|
showArrow |Boolean |true | 是否显示箭头图标
|
||||||
|
link |String |navigateTo | 新页面跳转方式，可选值见下表
|
||||||
|
to |String |- | 新页面跳转地址，如填写此属性，click 会返回页面是否跳转成功
|
||||||
|
clickable |Boolean |false | 是否开启点击反馈
|
||||||
|
showSwitch |Boolean |false | 是否显示Switch
|
||||||
|
switchChecked |Boolean |false | Switch是否被选中
|
||||||
|
showExtraIcon |Boolean |false | 左侧是否显示扩展图标
|
||||||
|
extraIcon |Object |- | 扩展图标参数，格式为 ``{color: '#4cd964',size: '22',type: 'spinner'}``，参考 [uni-icons](https://ext.dcloud.net.cn/plugin?id=28)
|
||||||
|
direction | String |row | 排版方向，可选值，row:水平排列; column:垂直排列; 3个插槽是水平排还是垂直排，也受此属性控制
|
||||||
|
|
||||||
|
|
||||||
|
#### Link Options
|
||||||
|
|
||||||
|
属性名 | 说明
|
||||||
|
:-: | :-:
|
||||||
|
navigateTo | 同 uni.navigateTo()
|
||||||
|
redirectTo | 同 uni.reLaunch()
|
||||||
|
reLaunch | 同 uni.reLaunch()
|
||||||
|
switchTab | 同 uni.switchTab()
|
||||||
|
|
||||||
|
### ListItem Events
|
||||||
|
|
||||||
|
事件称名 |说明 |返回参数
|
||||||
|
:-: |:-: |:-:
|
||||||
|
click |点击 uniListItem 触发事件，需开启点击反馈 |-
|
||||||
|
switchChange |点击切换 Switch 时触发，需显示 switch |e={value:checked}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### ListItem Slots
|
||||||
|
|
||||||
|
名称 | 说明
|
||||||
|
:-: | :-:
|
||||||
|
header | 左/上内容插槽，可完全自定义默认显示
|
||||||
|
body | 中间内容插槽，可完全自定义中间内容
|
||||||
|
footer | 右/下内容插槽，可完全自定义右侧内容
|
||||||
|
|
||||||
|
|
||||||
|
> **通过插槽扩展**
|
||||||
|
> 需要注意的是当使用插槽时，内置样式将会失效，只保留排版样式，此时的样式需要开发者自己实现
|
||||||
|
> 如果 `uni-list-item` 组件内置属性样式无法满足需求，可以使用插槽来自定义uni-list-item里的内容。
|
||||||
|
> uni-list-item提供了3个可扩展的插槽：`header`、`body`、`footer`
|
||||||
|
> - 当 `direction` 属性为 `row` 时表示水平排列，此时 `header` 表示列表的左边部分，`body` 表示列表的中间部分，`footer` 表示列表的右边部分
|
||||||
|
> - 当 `direction` 属性为 `column` 时表示垂直排列，此时 `header` 表示列表的上边部分，`body` 表示列表的中间部分，`footer` 表示列表的下边部分
|
||||||
|
> 开发者可以只用1个插槽，也可以3个一起使用。在插槽中可自主编写view标签，实现自己所需的效果。
|
||||||
|
|
||||||
|
|
||||||
|
**示例**
|
||||||
|
|
||||||
|
```html
|
||||||
|
<uni-list>
|
||||||
|
<uni-list-item title="自定义右侧插槽" note="列表描述信息" link>
|
||||||
|
<template slot="header">
|
||||||
|
<image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
|
||||||
|
</template>
|
||||||
|
</uni-list-item>
|
||||||
|
<uni-list-item>
|
||||||
|
<!-- 自定义 header -->
|
||||||
|
<view slot="header" class="slot-box"><image class="slot-image" src="/static/logo.png" mode="widthFix"></image></view>
|
||||||
|
<!-- 自定义 body -->
|
||||||
|
<text slot="body" class="slot-box slot-text">自定义插槽</text>
|
||||||
|
<!-- 自定义 footer-->
|
||||||
|
<template slot="footer">
|
||||||
|
<image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
|
||||||
|
</template>
|
||||||
|
</uni-list-item>
|
||||||
|
</uni-list>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### ListItemChat Props
|
||||||
|
|
||||||
|
属性名 |类型 |默认值 | 说明
|
||||||
|
:-: |:-: |:-: | :-:
|
||||||
|
title |String |- | 标题
|
||||||
|
note |String |- | 描述
|
||||||
|
clickable |Boolean |false | 是否开启点击反馈
|
||||||
|
badgeText |String |- | 数字角标内容，设置为 `dot` 将显示圆点
|
||||||
|
badgePositon |String |right | 角标位置
|
||||||
|
link |String |navigateTo | 是否展示右侧箭头并开启点击反馈，可选值见下表
|
||||||
|
clickable |Boolean |false | 是否开启点击反馈
|
||||||
|
to |String |- | 跳转页面地址，如填写此属性，click 会返回页面是否跳转成功
|
||||||
|
time |String |- | 右侧时间显示
|
||||||
|
avatarCircle |Boolean |false | 是否显示圆形头像
|
||||||
|
avatar |String |- | 头像地址，avatarCircle 不填时生效
|
||||||
|
avatarList |Array |- | 头像组，格式为 [{url:''}]
|
||||||
|
|
||||||
|
#### Link Options
|
||||||
|
|
||||||
|
属性名 | 说明
|
||||||
|
:-: | :-:
|
||||||
|
navigateTo | 同 uni.navigateTo()
|
||||||
|
redirectTo | 同 uni.reLaunch()
|
||||||
|
reLaunch | 同 uni.reLaunch()
|
||||||
|
switchTab | 同 uni.switchTab()
|
||||||
|
|
||||||
|
### ListItemChat Slots
|
||||||
|
|
||||||
|
名称 | 说明
|
||||||
|
:- | :-
|
||||||
|
default | 自定义列表右侧内容（包括时间和角标显示）
|
||||||
|
|
||||||
|
### ListItemChat Events
|
||||||
|
事件称名 | 说明 | 返回参数
|
||||||
|
:-: | :-: | :-:
|
||||||
|
@click | 点击 uniListChat 触发事件 | {data:{}} ，如有 to 属性，会返回页面跳转信息
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 基于uni-list扩展的页面模板
|
||||||
|
|
||||||
|
通过扩展插槽，可实现多种常见样式的列表
|
||||||
|
|
||||||
|
**新闻列表类**
|
||||||
|
|
||||||
|
1. 云端一体混合布局：[https://ext.dcloud.net.cn/plugin?id=2546](https://ext.dcloud.net.cn/plugin?id=2546)
|
||||||
|
2. 云端一体垂直布局，大图模式：[https://ext.dcloud.net.cn/plugin?id=2583](https://ext.dcloud.net.cn/plugin?id=2583)
|
||||||
|
3. 云端一体垂直布局，多行图文混排：[https://ext.dcloud.net.cn/plugin?id=2584](https://ext.dcloud.net.cn/plugin?id=2584)
|
||||||
|
4. 云端一体垂直布局，多图模式：[https://ext.dcloud.net.cn/plugin?id=2585](https://ext.dcloud.net.cn/plugin?id=2585)
|
||||||
|
5. 云端一体水平布局，左图右文：[https://ext.dcloud.net.cn/plugin?id=2586](https://ext.dcloud.net.cn/plugin?id=2586)
|
||||||
|
6. 云端一体水平布局，左文右图：[https://ext.dcloud.net.cn/plugin?id=2587](https://ext.dcloud.net.cn/plugin?id=2587)
|
||||||
|
7. 云端一体垂直布局，无图模式，主标题+副标题：[https://ext.dcloud.net.cn/plugin?id=2588](https://ext.dcloud.net.cn/plugin?id=2588)
|
||||||
|
|
||||||
|
**商品列表类**
|
||||||
|
|
||||||
|
1. 云端一体列表/宫格视图互切：[https://ext.dcloud.net.cn/plugin?id=2651](https://ext.dcloud.net.cn/plugin?id=2651)
|
||||||
|
2. 云端一体列表（宫格模式）：[https://ext.dcloud.net.cn/plugin?id=2671](https://ext.dcloud.net.cn/plugin?id=2671)
|
||||||
|
3. 云端一体列表（列表模式）：[https://ext.dcloud.net.cn/plugin?id=2672](https://ext.dcloud.net.cn/plugin?id=2672)
|
||||||
|
|
||||||
|
## 组件示例
|
||||||
|
|
||||||
|
点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/list/list](https://hellouniapp.dcloud.net.cn/pages/extUI/list/list)
|
||||||
|
|
@ -426,7 +426,7 @@ def mediaauth(request):
|
||||||
token = request.COOKIES.get('token', None)
|
token = request.COOKIES.get('token', None)
|
||||||
if not token:
|
if not token:
|
||||||
try:
|
try:
|
||||||
token = request.META.get("HTTP_OURL", None)[-208:]
|
token = request.META.get("HTTP_OURL", None).split('=')[-1]
|
||||||
except:
|
except:
|
||||||
pass
|
pass
|
||||||
if token:
|
if token:
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue