Commit b443a0a4 authored by wlxuqu's avatar wlxuqu

重构cell组件

parent 5c9923ce
common/
components/
node_modules/
pages/
static/
store/
unpackage/
.gitignore
App.vue
LICENSE.txt
main.js
manifext.json
pages.json
vue.config.js
package-lock.json
.editorconfig
uni.scss
template.h5.html
......@@ -2,14 +2,14 @@
"easycom": {
"^u-(.*)": "@/uview/components/u-$1/u-$1.vue"
},
// "condition": { //模式配置,仅开发期间生效
// "current": 0, //当前激活的模式(list 的索引项)
// "list": [{
// "name": "test", //模式名称
// "path": "pages/componentsA/slider/index", //启动页面,必选
// "query": "id=1&name=2" //启动参数,在页面的-+onLoad函数里面得到
// }]
// },
"condition": { //模式配置,仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [{
"name": "test", //模式名称
"path": "pages/componentsC/cell/index", //启动页面,必选
"query": "id=1&name=2" //启动参数,在页面的-+onLoad函数里面得到
}]
},
"pages": [
// 演示-组件
{
......
<template>
</template>
<script>
</script>
<style>
</style>
......@@ -22,7 +22,7 @@
</u-upload>
<u-button :custom-style="{marginTop: '20rpx'}" @click="upload">上传</u-button>
<u-button :custom-style="{marginTop: '40rpx'}" @click="clear">清空列表</u-button>
<u-button :custom-style="{marginTop: '40rpx'}" @click="reUpload">重新上传</u-button>
<!-- <u-button :custom-style="{marginTop: '40rpx'}" @click="reUpload">重新上传</u-button> -->
</view>
</view>
<view class="u-config-wrap">
......
......@@ -4,13 +4,18 @@
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-cell-group title="读万卷书">
<u-cell-item index="index" @click="click" :hover="hover" :label="label" :arrow="arrow" :value="rightSlot == 'text' ? '蒹葭苍苍' : ''" :title="title">
<u-icon slot="icon" size="34" :name="icon"></u-icon>
<u-badge :absolute="false" v-if="rightSlot == 'badge'" count="105" slot="right"></u-badge>
<u-switch v-if="rightSlot == 'switch'" slot="right" v-model="checked"></u-switch>
<u-cell-item center :is-link="true" :label="label" value="铁马冰河入梦来" i
ndex="index" @click="click" :hover-class="hoverClass"
:arrow="arrow" :title="title"
:icon="icon"
>
<u-badge :absolute="false" v-if="rightSlot == 'badge'" count="105" slot="right-icon"></u-badge>
<u-switch v-if="rightSlot == 'switch'" slot="right-icon" v-model="checked"></u-switch>
</u-cell-item>
<u-cell-item title="铁马冰河入梦来" value="行万里路">
<u-icon slot="icon" size="34" name="calendar"></u-icon>
<u-cell-item value="" title="铁马冰河入梦来" value="行万里路" :arrow="false">
<u-icon slot="icon" size="34" name="calendar" style="margin-right: 5px;"></u-icon>
<u-icon slot="right-icon" size="34" name="calendar"></u-icon>
<u-field slot="value"></u-field>
</u-cell-item>
</u-cell-group>
</view>
......@@ -56,9 +61,9 @@ export default {
}
},
computed: {
hover() {
hoverClass() {
// 如果右侧是switch步进器组件的话,去掉cell的点击反馈,因为这个时候点击的反馈应该在switch上
return this.rightSlot != 'switch';
return this.rightSlot == 'switch' ? 'none' : 'u-cell-hover';
}
},
methods: {
......@@ -76,6 +81,8 @@ export default {
},
rightSlotChange(index) {
this.rightSlot = index == 0 ? 'text' : index == 1 ? 'switch' : 'badge'
if(index == 0) this.arrow = true;
else this.arrow = false;
},
click(index) {
// console.log(index);
......
<template>
<view @tap="click" class="u-cell-item-box" :class="{'u-cell-border': itemIndex > 0 }" hover-stay-time="150"
:hover-class="hover ? 'u-hover-class' : ''" :style="{
backgroundColor: bgColor
}">
<view class="u-cell-content">
<view class="u-icon-wrap" v-if="icon">
<u-icon size="32" :name="icon" class="u-icon"></u-icon>
</view>
<view class="u-icon-wrap">
<slot name="icon"></slot>
</view>
<view class="u-cell-title" :style="[titleStyle]">
<text class="u-title-text" v-if="title">{{title}}</text>
<slot name="left"></slot>
</view>
<view class="u-cell-value" v-if="value">
<text class="u-value-text" :style="[valueStyle]" v-if="value">{{value}}</text>
</view>
<view v-else class="u-slot-wrap">
<slot name="right"></slot>
</view>
<view :style="[arrowStyle]" class="u-icon-wrap">
<u-icon v-if="arrow" size="26" class="u-arror-right" color="#969799" name="arrow-right"></u-icon>
<view
@tap="click"
class="u-cell"
:class="{ 'u-cell-border': itemIndex > 0 && borderBottom, 'u-col-center': center, 'u-border-gap': borderGap, 'u-cell--required': required }"
hover-stay-time="150"
:hover-class="hoverClass"
:style="{
backgroundColor: bgColor
}"
>
<u-icon :size="iconSize" :name="icon" v-if="icon" class="u-cell__left-icon-wrap"></u-icon>
<view class="u-flex" v-else>
<slot name="icon"></slot>
</view>
<view
class="u-cell_title"
:style="[
{
width: titleWidth ? titleWidth + 'rpx' : 'auto'
},
titleStyle
]"
>
<block v-if="title">{{ title }}</block>
<slot name="title" v-else></slot>
<view class="u-cell__label" v-if="label || $slots.label" :style="[labelStyle]">
<block v-if="label">{{ label }}</block>
<slot name="label" v-else></slot>
</view>
</view>
<view class="u-cell-label" v-if="label" :style="[labelStyle]">
{{label}}
<view class="u-cell__value" :style="[valueStyle]">
<block class="u-cell__value" v-if="value">{{ value }}</block>
<slot v-else></slot>
</view>
<u-icon v-if="arrow" name="arrow-right" :style="[arrowStyle]" class="u-icon-wrap u-cell__right-icon-wrap"></u-icon>
<view class="u-flex" v-else>
<slot name="right-icon"></slot>
</view>
</view>
</template>
<script>
/**
* cellItem 单元格Item
* @description cell单元格一般用于一组列表的情况,比如个人中心页,设置页等。搭配u-cell-group使用
* @tutorial https://www.uviewui.com/components/cell.html
* @property {String} title 左侧标题
* @property {String} icon 左侧图标名,只支持uView内置图标,见Icon 图标
* @property {String} value 右侧内容
* @property {String} label 标题下方的描述信息
* @property {Boolean} border 是否显示每个cell的下边框(默认true)
* @property {Boolean} hover 是否开启点击反馈,hover-class形式,如果右侧通过slot传递switch进去的话,可以将此值设置为false(默认true)
* @property {Boolean} arrow 是否显示右侧箭头(默认true)
* @property {Boolean} arrow-direction 箭头方向,可选值(默认right)
* @property {Object} title-style 标题样式,对象形式
* @property {Object} value-style 右侧内容样式,对象形式
* @property {Object} label-style 标题下方描述信息的样式,对象形式
* @property {String} bg-color 背景颜色(默认#ffffff)
* @property {String Number} index 用于在click事件回调中返回,标识当前是第几个Item
* @example <u-cell-item icon="integral-fill" title="会员等级" value="新版本"></u-cell-item>
*/
export default {
name: "u-cell-item",
props: {
// 左侧图标名称(只能uView内置图标),或者图标src
icon: {
type: String,
default: ''
},
// 左侧标题
title: {
type: String,
default: ''
},
// 右侧内容
value: {
type: String,
default: ''
},
// 标题下方的描述信息
label: {
type: String,
default: ''
},
// 是否显示内边框
border: {
type: Boolean,
default: true
},
// 是否开启点击反馈,即点击是cell背景为灰色
hover: {
type: Boolean,
default: true
},
// 是否显示右侧箭头
arrow: {
type: Boolean,
default: true
},
// 右侧箭头方向,可选值:right|up|down,默认为right
arrowDirection: {
type: String,
default: 'right'
},
// 控制标题的样式
titleStyle: {
type: Object,
default () {
return {};
}
},
// 右侧显示内容的样式
valueStyle: {
type: Object,
default () {
return {};
}
},
// 描述信息的样式
labelStyle: {
type: Object,
default () {
return {};
}
},
// 背景颜色
bgColor: {
type: String,
default: '#ffffff'
},
// 用于识别被点击的是第几个cell
index: {
type: [String, Number],
default: ''
}
/**
* cellItem 单元格Item
* @description cell单元格一般用于一组列表的情况,比如个人中心页,设置页等。搭配u-cell-group使用
* @tutorial https://www.uviewui.com/components/cell.html
* @property {String} title 左侧标题
* @property {String} icon 左侧图标名,只支持uView内置图标,见Icon 图标
* @property {String} value 右侧内容
* @property {String} label 标题下方的描述信息
* @property {Boolean} border-bottom 是否显示每个cell的下边框(默认true)
* @property {String} hover-class 是否开启点击反馈,none为无效果(默认true)
* @property {Boolean} border-gap border-bottom为true时,Cell列表中间的条目的下边框是否与左边有一个间隔(默认true)
* @property {Boolean} arrow 是否显示右侧箭头(默认true)
* @property {Boolean} required 箭头方向,可选值(默认right)
* @property {Boolean} arrow-direction 是否显示左边表示必填的星号(默认false)
* @property {Object} title-style 标题样式,对象形式
* @property {Object} value-style 右侧内容样式,对象形式
* @property {Object} label-style 标题下方描述信息的样式,对象形式
* @property {String} bg-color 背景颜色(默认transparent)
* @property {String Number} index 用于在click事件回调中返回,标识当前是第几个Item
* @property {String Number} title-width 标题的宽度,单位rpx
* @example <u-cell-item icon="integral-fill" title="会员等级" value="新版本"></u-cell-item>
*/
export default {
name: 'u-cell-item',
props: {
// 左侧图标名称(只能uView内置图标),或者图标src
icon: {
type: String,
default: ''
},
inject: ['uCellGroup'],
data() {
return {
itemIndex: 0,
}
// 左侧标题
title: {
type: String,
default: ''
},
// 右侧内容
value: {
type: String,
default: ''
},
// 标题下方的描述信息
label: {
type: String,
default: ''
},
// 是否显示内边框
borderBottom: {
type: Boolean,
default: true
},
// 多个cell中,中间的cell显示下划线时,下划线是否给一个到左边的距离
borderGap: {
type: Boolean,
default: true
},
// 是否开启点击反馈,即点击时cell背景为灰色,none为无效果
hoverClass: {
type: String,
default: 'u-cell-hover'
},
// 是否显示右侧箭头
arrow: {
type: Boolean,
default: true
},
// 内容是否垂直居中
center: {
type: Boolean,
default: false
},
// 是否显示左边表示必填的星号
required: {
type: Boolean,
default: false
},
// 标题的宽度,单位rpx
titleWidth: {
type: [Number, String],
default: ''
},
created() {
this.itemIndex = this.uCellGroup.index++;
// 右侧箭头方向,可选值:right|up|down,默认为right
arrowDirection: {
type: String,
default: 'right'
},
computed: {
arrowStyle() {
let style = {};
if (this.arrowDirection == 'top') style.transform = 'rotate(-90deg)';
else if (this.arrowDirection == 'bottom') style.transform = 'rotate(90deg)';
else style.transform = 'rotate(0deg)';
return style;
// 控制标题的样式
titleStyle: {
type: Object,
default() {
return {};
}
},
methods: {
click() {
this.$emit('click', this.index);
// 右侧显示内容的样式
valueStyle: {
type: Object,
default() {
return {};
}
},
// 描述信息的样式
labelStyle: {
type: Object,
default() {
return {};
}
},
// 背景颜色
bgColor: {
type: String,
default: 'transparent'
},
// 用于识别被点击的是第几个cell
index: {
type: [String, Number],
default: ''
},
// 是否使用lable插槽
useLabelSlot: {
type: Boolean,
default: false
},
// 左边图标的大小,单位rpx,只对传入icon字段时有效
iconSize: {
type: [Number, String],
default: 34
}
},
inject: ['uCellGroup'],
data() {
return {
itemIndex: 0
};
},
created() {
this.itemIndex = this.uCellGroup.index++;
},
computed: {
arrowStyle() {
let style = {};
if (this.arrowDirection == 'up') style.transform = 'rotate(-90deg)';
else if (this.arrowDirection == 'down') style.transform = 'rotate(90deg)';
else style.transform = 'rotate(0deg)';
return style;
}
},
methods: {
click() {
this.$emit('click', this.index);
}
}
};
</script>
<style lang="scss" scoped>
.u-cell-item-box {
padding: 28rpx 32rpx;
position: relative;
}
.u-cell {
position: relative;
display: flex;
box-sizing: border-box;
width: 100%;
padding: 20rpx 32rpx;
font-size: 28rpx;
line-height: 48rpx;
color: $u-content-color;
background-color: #fff;
text-align: left;
}
.u-cell-border:after {
left: 32rpx !important;
position: absolute;
box-sizing: border-box;
content: ' ';
pointer-events: none;
right: 0;
top: 0;
border-bottom: 1px solid $u-border-color;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.u-cell_title {
font-size: 28rpx;
}
.u-cell-content {
display: flex;
align-items: center;
}
.u-cell__left-icon-wrap {
margin-right: 10rpx;
font-size: 32rpx;
}
.u-cell-title {
color: #323233;
font-size: 30rpx;
flex: 1;
margin-left: 6rpx;
text-align: left;
}
.u-cell__right-icon-wrap {
margin-left: 10rpx;
color: #969799;
font-size: 28rpx;
}
.u-cell-value {
flex: 1;
font-size: 26rpx;
color: #969799;
text-align: right;
}
.u-cell__left-icon-wrap,
.u-cell__right-icon-wrap {
display: flex;
align-items: center;
height: 48rpx;
}
.u-cell-label {
color: #969799;
font-size: 26rpx;
margin-top: 10rpx;
text-align: left;
}
.u-cell-border:after {
position: absolute;
box-sizing: border-box;
content: ' ';
pointer-events: none;
right: 0;
left: 0;
top: 0;
border-bottom: 1px solid $u-border-color;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.u-slot-wrap {
display: flex;
align-items: center;
}
.u-cell-border {
position: relative;
}
// 微信小程序需要额外处理可能通过slot传入badge和switch的问题
// 否则无法垂直居中
/* #ifdef MP-WEIXIN */
.u-slot-wrap /deep/ u-badge,
.u-slot-wrap /deep/ u-switch {
display: flex;
align-items: center;
}
.u-border-gap:after {
left: 32rpx !important;
}
/* #endif */
.u-cell__label {
margin-top: 6rpx;
font-size: 26rpx;
line-height: 36rpx;
color: $u-tips-color;
}
.u-icon {
margin-right: 6rpx;
}
.u-cell__value {
overflow: hidden;
text-align: right;
vertical-align: middle;
color: $u-tips-color;
font-size: 26rpx;
}
.u-value-text {
margin-right: 10rpx;
}
.u-cell__title,
.u-cell__value {
flex: 1;
}
.u-title-text {
margin-right: 10rpx;
}
.u-cell--required {
overflow: visible;
display: flex;
align-items: center;
}
.u-cell--required:before {
position: absolute;
content: '*';
left: 8px;
margin-top: 4rpx;
font-size: 14px;
color: $u-type-error;
}
</style>
<template>
<view class="u-form-item">
<slot />
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
<template>
<view class="u-form">
<slot />
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
<template>
<text class="uicon" :class="customClass" :style="{
color: color,
fontSize: size + 'rpx',
fontWeight: bold ? 'bold' : 'normal',
}"
@tap="click" :hover-class="hoverClass" @touchstart="touchstart">
</text>
<text class="uicon" :class="customClass" :style="[iconStyle]" @tap="click" :hover-class="hoverClass" @touchstart="touchstart"></text>
</template>
<script>
/**
* icon 图标
* @description 基于字体的图标集,包含了大多数常见场景的图标。
* @tutorial https://www.uviewui.com/components/icon.html
* @property {String} name 图标名称,见示例图标集
* @property {String} color 图标颜色(默认inherit)
* @property {String Number} size 图标字体大小,单位rpx(默认32)
* @property {String} index 一个用于区分多个图标的值,点击图标时通过click事件传出
* @property {String} hover-class 图标按下去的样式类,用法同uni的view组件的hover-class参数,详情见官网
* @event {Function} click 点击图标时触发
* @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
*/
export default {
name: "u-icon",
props: {
// 图标类名
name: {
type: String,
default: ''
},
// 图标颜色
color: {
type: String,
default: 'inherit'
},
// 字体大小,单位rpx
size: {
type: [Number, String],
default: 'inherit'
},
// 是否显示粗体
bold: {
type: Boolean,
default: false
},
// 点击图标的时候传递事件出去的index(用于区分点击了哪一个)
index: {
type: [Number, String],
default: ''
},
// 触摸图标时的类名
hoverClass: {
type: String,
default: ''
},
// 自定义扩展前缀,方便用户扩展自己的图标库
customPrefix: {
type: String,
default: 'uicon'
}
/**
* icon 图标
* @description 基于字体的图标集,包含了大多数常见场景的图标。
* @tutorial https://www.uviewui.com/components/icon.html
* @property {String} name 图标名称,见示例图标集
* @property {String} color 图标颜色(默认inherit)
* @property {String Number} size 图标字体大小,单位rpx(默认32)
* @property {String} index 一个用于区分多个图标的值,点击图标时通过click事件传出
* @property {String} hover-class 图标按下去的样式类,用法同uni的view组件的hover-class参数,详情见官网
* @event {Function} click 点击图标时触发
* @example <u-icon name="photo" color="#2979ff" size="28"></u-icon>
*/
export default {
name: 'u-icon',
props: {
// 图标类名
name: {
type: String,
default: ''
},
data() {
return {
}
// 图标颜色
color: {
type: String,
default: ''
},
// 字体大小,单位rpx
size: {
type: [Number, String],
default: 'inherit'
},
// 是否显示粗体
bold: {
type: Boolean,
default: false
},
// 点击图标的时候传递事件出去的index(用于区分点击了哪一个)
index: {
type: [Number, String],
default: ''
},
computed: {
customClass() {
let classes = [];
classes.push(this.customPrefix + '-' + this.name);
// uView的自定义图标类名为u-iconfont
if (this.customPrefix == 'uicon') classes.push('u-iconfont');
else classes.push(this.customPrefix);
return classes;
}
// 触摸图标时的类名
hoverClass: {
type: String,
default: ''
},
methods: {
click() {
this.$emit('click', this.index);
},
touchstart() {
this.$emit('touchstart', this.index);
}
// 自定义扩展前缀,方便用户扩展自己的图标库
customPrefix: {
type: String,
default: 'uicon'
}
},
data() {
return {};
},
computed: {
customClass() {
let classes = [];
classes.push(this.customPrefix + '-' + this.name);
// uView的自定义图标类名为u-iconfont
if (this.customPrefix == 'uicon') classes.push('u-iconfont');
else classes.push(this.customPrefix);
return classes;
},
iconStyle() {
let style = {};
style = {
fontSize: this.size + 'rpx',
fontWeight: this.bold ? 'bold' : 'normal'
};
if(this.color) style.color = this.color;
return style;
}
},
methods: {
click() {
this.$emit('click', this.index);
},
touchstart() {
this.$emit('touchstart', this.index);
}
}
};
</script>
<style scoped lang="scss">
@import '../../../uview/iconfont.css';
@import '../../../uview/iconfont.css';
.uicon {
display: inline-flex;
align-items: center;
}
.uicon {
display: inline-flex;
align-items: center;
}
</style>
......@@ -198,7 +198,7 @@
this.lists.push({url: value.url, error: false, progress: 100});
})
}
}
},
},
methods: {
// 清除列表
......@@ -369,6 +369,14 @@
}
});
},
// 用户通过ref手动的形式,移除一张图片
remove(index) {
// 判断索引的合法范围
if(index >= 0 && index < this.lists.length) {
this.lists.splice(index, 1);
this.$emit('on-list-change', this.lists);
}
},
// 预览图片
doPreviewImage(url, index) {
if (!this.previewFullImage)
......
This diff is collapsed.
......@@ -58,12 +58,16 @@ u-icon {
}
/* end-iPhoneX底部安全区定义--end */
/* start--hover-class-start */
/* start--各种hover点击反馈相关的类名-start */
.u-hover-class {
// background-color: #f7f8f9!important;
opacity: 0.6;
}
/* end--hover-class--end */
.u-cell-hover {
background-color: #f7f8f9!important;
}
/* end--各种hover点击反馈相关的类名--end */
/* start--文本行数限制--start */
.u-line-1 {
......
class Request {
config = {
const Request = {
config: {
baseUrl: '', // 请求的根域名
// 默认的请求头
header: {
......@@ -16,28 +16,28 @@ class Request {
timer: null, // 定时器
originalData: false, // 是否在拦截器中返回服务端的原始数据,见文档说明
loadingMask: true, // 展示loading的时候,是否给一个透明的蒙层,防止触摸穿透
}
},
// 判断是否http|https开头的URL
static isHttp(url) {
isHttp: (url) => {
return /(http|https):\/\/([\w.]+\/?)\S*/.test(url)
}
},
// 拦截器
interceptor = {
interceptor: {
// 请求前的拦截
request: null,
// 请求后的拦截
response: null
}
},
// 设置全局默认配置
setConfig(customConfig) {
setConfig: (customConfig) => {
this.config = Object.assign(this.config, customConfig);
}
},
// 主要请求部分
async request(options = {}) {
request: (options = {}) => {
// 检查请求拦截
if (this.interceptor.request && typeof this.interceptor.request === 'function') {
let tmpConfig = {};
......@@ -119,41 +119,40 @@ class Request {
}
uni.request(options);
})
}
},
constructor() {
// get请求
this.get = (url, data = {}, header = {}) => {
get: (url, data = {}, header = {}) => {
return this.request({
method: 'GET',
url,
header,
data
})
}
},
// post请求
this.post = (url, data = {}, header = {}) => {
post: (url, data = {}, header = {}) => {
return this.request({
url,
method: 'POST',
header,
data
})
}
},
// put请求,不支持支付宝小程序(HX2.6.15)
this.put = (url, data = {}, header = {}) => {
put: (url, data = {}, header = {}) => {
return this.request({
url,
method: 'PUT',
header,
data
})
}
},
// delete请求,不支持支付宝和头条小程序(HX2.6.15)
this.delete = (url, data = {}, header = {}) => {
delete: (url, data = {}, header = {}) => {
return this.request({
url,
method: 'DELETE',
......@@ -161,6 +160,5 @@ class Request {
data
})
}
}
}
export default new Request
export default Request
{
"name": "uview",
"version": "1.1.6",
"description": "uView UI,是uni-app生态优秀的UI框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水",
"main": "uview/index.js",
"keyword": ["uview", "uView", "uni-app", "uniapp", "uviewui", "uview ui", "uviewUI", "uViewui", "uViewUI", "uView UI", "uni ui", "uni UI", "uniapp ui", "ui", "UI框架", "uniapp ui框架", "uniapp UI"],
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": ""
},
"files": ["uview"],
"author": "uView",
"license": "MIT"
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment