1
This commit is contained in:
houjunxiang
@@ -1,3 +1,29 @@
|
||||
## 1.2.14（2023-04-14）
|
||||
- 优化 uni-list-chat 具名插槽`header` 非app端套一层元素，方便使用时通过外层元素定位实现样式修改
|
||||
## 1.2.13（2023-03-03）
|
||||
- uni-list-chat 新增 支持具名插槽`header`
|
||||
## 1.2.12（2023-02-01）
|
||||
- 新增 列表图标新增 customPrefix 属性 ，用法 [详见](https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html#icons-props)
|
||||
## 1.2.11（2023-01-31）
|
||||
- 修复 无反馈效果呈现的bug
|
||||
## 1.2.9（2022-11-22）
|
||||
- 修复 uni-list-chat 在vue3下跳转报错的bug
|
||||
## 1.2.8（2022-11-21）
|
||||
- 修复 uni-list-chat avatar属性 值为本地路径时错误的问题
|
||||
## 1.2.7（2022-11-21）
|
||||
- 修复 uni-list-chat avatar属性 在腾讯云版uniCloud下错误的问题
|
||||
## 1.2.6（2022-11-18）
|
||||
- 修复 uni-list-chat note属性 支持：“草稿”字样功能 文本少1位的问题
|
||||
## 1.2.5（2022-11-15）
|
||||
- 修复 uni-list-item 的 customStyle 属性 padding值在 H5端 无效的bug
|
||||
## 1.2.4（2022-11-15）
|
||||
- 修复 uni-list-item 的 customStyle 属性 padding值在nvue（vue2）下无效的bug
|
||||
## 1.2.3（2022-11-14）
|
||||
- uni-list-chat 新增 avatar 支持 fileId
|
||||
## 1.2.2（2022-11-11）
|
||||
- uni-list 新增属性 render-reverse 详情参考：[https://uniapp.dcloud.net.cn/component/list.html](https://uniapp.dcloud.net.cn/component/list.html)
|
||||
- uni-list-chat note属性 支持：“草稿”字样 加红显示 详情参考uni-im：[https://ext.dcloud.net.cn/plugin?name=uni-im](https://ext.dcloud.net.cn/plugin?name=uni-im)
|
||||
- uni-list-item 新增属性 customStyle 支持设置padding、backgroundColor
|
||||
## 1.2.1（2022-03-30）
|
||||
- 删除无用文件
|
||||
## 1.2.0（2021-11-23）
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<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" :class="{ 'header--circle': avatarCircle }" :src="avatar" mode="aspectFill"></image>
|
||||
<image class="uni-list-chat__header-image" :class="{ 'header--circle': avatarCircle }" :src="avatarUrl" mode="aspectFill"></image>
|
||||
</view>
|
||||
<!-- 头像组 -->
|
||||
<view v-else class="uni-list-chat__header">
|
||||
@@ -18,13 +18,23 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #ifndef APP -->
|
||||
<view class="slot-header">
|
||||
<!-- #endif -->
|
||||
<slot name="header"></slot>
|
||||
<!-- #ifndef APP -->
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<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 style="flex-direction: row;">
|
||||
<text class="draft" v-if="isDraft">[草稿]</text>
|
||||
<text class="uni-list-chat__content-note uni-ellipsis">{{isDraft?note.slice(14):note}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-list-chat__content-extra">
|
||||
<slot>
|
||||
@@ -121,6 +131,9 @@
|
||||
},
|
||||
// inject: ['list'],
|
||||
computed: {
|
||||
isDraft(){
|
||||
return this.note.slice(0,14) == '[uni-im-draft]'
|
||||
},
|
||||
isSingle() {
|
||||
if (this.badgeText === 'dot') {
|
||||
return 'uni-badge--dot';
|
||||
@@ -146,12 +159,32 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
avatar:{
|
||||
handler(avatar) {
|
||||
if(avatar.substr(0,8) == 'cloud://'){
|
||||
uniCloud.getTempFileURL({
|
||||
fileList: [avatar]
|
||||
}).then(res=>{
|
||||
// console.log(res);
|
||||
// 兼容uniCloud私有化部署
|
||||
let fileList = res.fileList || res.result.fileList
|
||||
this.avatarUrl = fileList[0].tempFileURL
|
||||
})
|
||||
}else{
|
||||
this.avatarUrl = avatar
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isFirstChild: false,
|
||||
border: true,
|
||||
// avatarList: 3,
|
||||
imageWidth: 50
|
||||
imageWidth: 50,
|
||||
avatarUrl:''
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@@ -198,7 +231,7 @@
|
||||
}
|
||||
},
|
||||
pageApi(api) {
|
||||
uni[api]({
|
||||
let callback = {
|
||||
url: this.to,
|
||||
success: res => {
|
||||
this.$emit('click', {
|
||||
@@ -209,9 +242,24 @@
|
||||
this.$emit('click', {
|
||||
data: err
|
||||
});
|
||||
console.error(err.errMsg);
|
||||
}
|
||||
});
|
||||
}
|
||||
switch (api) {
|
||||
case 'navigateTo':
|
||||
uni.navigateTo(callback)
|
||||
break
|
||||
case 'redirectTo':
|
||||
uni.redirectTo(callback)
|
||||
break
|
||||
case 'reLaunch':
|
||||
uni.reLaunch(callback)
|
||||
break
|
||||
case 'switchTab':
|
||||
uni.switchTab(callback)
|
||||
break
|
||||
default:
|
||||
uni.navigateTo(callback)
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -445,13 +493,20 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.uni-list-chat__content-note {
|
||||
.draft ,.uni-list-chat__content-note {
|
||||
margin-top: 3px;
|
||||
color: $note-color;
|
||||
font-size: $note-size;
|
||||
font-weight: $title-weight;
|
||||
overflow: hidden;
|
||||
}
|
||||
.draft{
|
||||
color: #eb3a41;
|
||||
/* #ifndef APP-NVUE */
|
||||
flex-shrink: 0;
|
||||
/* #endif */
|
||||
padding-right: 3px;
|
||||
}
|
||||
|
||||
.uni-list-chat__content-extra {
|
||||
/* #ifndef APP-NVUE */
|
||||
|
||||
@@ -1,58 +1,39 @@
|
||||
<template>
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<cell>
|
||||
<cell :keep-scroll-position="keepScrollPosition">
|
||||
<!-- #endif -->
|
||||
|
||||
<view
|
||||
:class="{ 'uni-list-item--disabled': disabled }"
|
||||
<view :class="{ 'uni-list-item--disabled': disabled }" :style="{'background-color':customStyle.backgroundColor}"
|
||||
:hover-class="(!clickable && !link) || disabled || showSwitch ? '' : 'uni-list-item--hover'"
|
||||
class="uni-list-item"
|
||||
@click="onClick"
|
||||
>
|
||||
class="uni-list-item" @click="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' }"
|
||||
>
|
||||
<view class="uni-list-item__container"
|
||||
:class="{ 'container--right': showArrow || link, 'flex--direction': direction === 'column'}"
|
||||
:style="{paddingTop:padding.top,paddingLeft:padding.left,paddingRight:padding.right,paddingBottom:padding.bottom}">
|
||||
<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" />
|
||||
<uni-icons :customPrefix="extraIcon.customPrefix" :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>
|
||||
<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' }"
|
||||
>
|
||||
<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" :custom-style="badgeStyle" />
|
||||
<switch
|
||||
v-if="showSwitch"
|
||||
:disabled="disabled"
|
||||
:checked="switchChecked"
|
||||
@change="onSwitchChange"
|
||||
/>
|
||||
<switch v-if="showSwitch" :disabled="disabled" :checked="switchChecked"
|
||||
@change="onSwitchChange" />
|
||||
</view>
|
||||
</slot>
|
||||
</view>
|
||||
@@ -64,410 +45,490 @@
|
||||
</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 {Object} badgeStyle 数字角标样式
|
||||
* @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',
|
||||
emits: ['click', 'switchChange'],
|
||||
props: {
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'row'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
note: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
ellipsis: {
|
||||
type: [Number, String],
|
||||
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'
|
||||
},
|
||||
badgeStyle: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {};
|
||||
/**
|
||||
* 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 {Object} badgeStyle 数字角标样式
|
||||
* @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',
|
||||
emits: ['click', 'switchChange'],
|
||||
props: {
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'row'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
note: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
ellipsis: {
|
||||
type: [Number, String],
|
||||
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'
|
||||
},
|
||||
badgeStyle: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
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: '',
|
||||
color: '#000000',
|
||||
size: 20,
|
||||
customPrefix: ''
|
||||
};
|
||||
}
|
||||
},
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
customStyle: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
padding: '',
|
||||
backgroundColor: '#FFFFFF'
|
||||
}
|
||||
}
|
||||
},
|
||||
keepScrollPosition: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
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: '',
|
||||
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) {
|
||||
let callback = {
|
||||
url: this.to,
|
||||
success: res => {
|
||||
this.$emit('click', {
|
||||
data: res
|
||||
});
|
||||
watch: {
|
||||
'customStyle.padding': {
|
||||
handler(padding) {
|
||||
if(typeof padding == 'number'){
|
||||
padding += ''
|
||||
}
|
||||
let paddingArr = padding.split(' ')
|
||||
if (paddingArr.length === 1) {
|
||||
const allPadding = paddingArr[0]
|
||||
this.padding = {
|
||||
"top": allPadding,
|
||||
"right": allPadding,
|
||||
"bottom": allPadding,
|
||||
"left": allPadding
|
||||
}
|
||||
} else if (paddingArr.length === 2) {
|
||||
const [verticalPadding, horizontalPadding] = paddingArr;
|
||||
this.padding = {
|
||||
"top": verticalPadding,
|
||||
"right": horizontalPadding,
|
||||
"bottom": verticalPadding,
|
||||
"left": horizontalPadding
|
||||
}
|
||||
} else if (paddingArr.length === 4) {
|
||||
const [topPadding, rightPadding, bottomPadding, leftPadding] = paddingArr;
|
||||
this.padding = {
|
||||
"top": topPadding,
|
||||
"right": rightPadding,
|
||||
"bottom": bottomPadding,
|
||||
"left": leftPadding
|
||||
}
|
||||
}
|
||||
},
|
||||
fail: err => {
|
||||
this.$emit('click', {
|
||||
data: err
|
||||
});
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
// inject: ['list'],
|
||||
data() {
|
||||
return {
|
||||
isFirstChild: false,
|
||||
padding: {
|
||||
top: "",
|
||||
right: "",
|
||||
bottom: "",
|
||||
left: ""
|
||||
}
|
||||
};
|
||||
switch (api) {
|
||||
case 'navigateTo':
|
||||
uni.navigateTo(callback);
|
||||
break;
|
||||
case 'redirectTo':
|
||||
uni.redirectTo(callback);
|
||||
break;
|
||||
case 'reLaunch':
|
||||
uni.reLaunch(callback);
|
||||
break;
|
||||
case 'switchTab':
|
||||
uni.switchTab(callback);
|
||||
break;
|
||||
default:
|
||||
uni.navigateTo(callback);
|
||||
},
|
||||
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) {
|
||||
let callback = {
|
||||
url: this.to,
|
||||
success: res => {
|
||||
this.$emit('click', {
|
||||
data: res
|
||||
});
|
||||
},
|
||||
fail: err => {
|
||||
this.$emit('click', {
|
||||
data: err
|
||||
});
|
||||
}
|
||||
}
|
||||
switch (api) {
|
||||
case 'navigateTo':
|
||||
uni.navigateTo(callback)
|
||||
break
|
||||
case 'redirectTo':
|
||||
uni.redirectTo(callback)
|
||||
break
|
||||
case 'reLaunch':
|
||||
uni.reLaunch(callback)
|
||||
break
|
||||
case 'switchTab':
|
||||
uni.switchTab(callback)
|
||||
break
|
||||
default:
|
||||
uni.navigateTo(callback)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$uni-font-size-sm: 12px;
|
||||
$uni-font-size-base: 14px;
|
||||
$uni-font-size-lg: 16px;
|
||||
$uni-spacing-col-lg: 12px;
|
||||
$uni-spacing-row-lg: 15px;
|
||||
$uni-img-size-sm: 20px;
|
||||
$uni-img-size-base: 26px;
|
||||
$uni-img-size-lg: 40px;
|
||||
$uni-border-color: #e5e5e5;
|
||||
$uni-bg-color-hover: #f1f1f1;
|
||||
$uni-text-color-grey: #999;
|
||||
$list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg;
|
||||
.uni-list-item {
|
||||
$uni-font-size-sm:12px;
|
||||
$uni-font-size-base:14px;
|
||||
$uni-font-size-lg:16px;
|
||||
$uni-spacing-col-lg: 12px;
|
||||
$uni-spacing-row-lg: 15px;
|
||||
$uni-img-size-sm:20px;
|
||||
$uni-img-size-base:26px;
|
||||
$uni-img-size-lg:40px;
|
||||
$uni-border-color:#e5e5e5;
|
||||
$uni-bg-color-hover:#f1f1f1;
|
||||
$uni-text-color-grey:#999;
|
||||
$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 !important;
|
||||
}
|
||||
|
||||
.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 */
|
||||
display: flex;
|
||||
.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 */
|
||||
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;
|
||||
text-overflow: ellipsis;
|
||||
/* #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;
|
||||
text-overflow: ellipsis;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
.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;
|
||||
text-overflow: ellipsis;
|
||||
/* #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;
|
||||
text-overflow: ellipsis;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
@@ -7,102 +7,117 @@
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<list class="uni-list" :class="{ 'uni-list--border': border }" :enableBackToTop="enableBackToTop" loadmoreoffset="15"><slot /></list>
|
||||
<list :bounce="false" :scrollable="true" show-scrollbar :render-reverse="renderReverse" @scroll="scroll" 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
|
||||
/**
|
||||
* 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
|
||||
}
|
||||
},
|
||||
scrollY: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
props: {
|
||||
stackFromEnd:{
|
||||
type: Boolean,
|
||||
default:false
|
||||
},
|
||||
enableBackToTop: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
scrollY: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
},
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
renderReverse:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
// provide() {
|
||||
// return {
|
||||
// list: this
|
||||
// };
|
||||
// },
|
||||
created() {
|
||||
this.firstChildAppend = false;
|
||||
},
|
||||
methods: {
|
||||
loadMore(e) {
|
||||
this.$emit('scrolltolower');
|
||||
},
|
||||
scroll(e) {
|
||||
this.$emit('scroll', e);
|
||||
}
|
||||
}
|
||||
},
|
||||
// provide() {
|
||||
// return {
|
||||
// list: this
|
||||
// };
|
||||
// },
|
||||
created() {
|
||||
this.firstChildAppend = false;
|
||||
},
|
||||
methods: {
|
||||
loadMore(e) {
|
||||
this.$emit('scrolltolower');
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" >
|
||||
$uni-bg-color:#ffffff;
|
||||
$uni-border-color:#e5e5e5;
|
||||
.uni-list {
|
||||
<style lang="scss">
|
||||
$uni-bg-color:#ffffff;
|
||||
$uni-border-color:#e5e5e5;
|
||||
|
||||
.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 */
|
||||
display: flex;
|
||||
|
||||
.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 */
|
||||
// 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>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"id": "uni-list",
|
||||
"displayName": "uni-list 列表",
|
||||
"version": "1.2.1",
|
||||
"version": "1.2.14",
|
||||
"description": "List 组件 ，帮助使用者快速构建列表。",
|
||||
"keywords": [
|
||||
"",
|
||||
@@ -18,11 +18,7 @@
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
@@ -39,7 +35,8 @@
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
|
||||
Reference in New Issue
Block a user