cxc/yshop-pro-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

v1.0

Browse Source
This commit is contained in:
hupeng
2023-10-11 11:27:47 +08:00
commit d0b337c596
659 changed files with 67106 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
uni_modules/uv-cell/changelog.md Normal file
View File

@ -0,0 +1,9 @@
## 1.0.3（2023-07-03）
去除插槽判断，避免某些平台不显示的BUG
## 1.0.2（2023-06-21）
1. 优化
## 1.0.1（2023-05-16）
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
2. 优化部分功能
## 1.0.0（2023-05-10）
uv-cell 单元格

15
uni_modules/uv-cell/components/uv-cell-group/props.js Normal file
View File

@ -0,0 +1,15 @@
export default {
props: {
// 分组标题
title: {
type: String,
default: ''
},
// 是否显示外边框
border: {
type: Boolean,
default: true
},
...uni.$uv?.props?.cellGroup
}
}

63
uni_modules/uv-cell/components/uv-cell-group/uv-cell-group.vue Normal file
View File

@ -0,0 +1,63 @@
<template>
<view :style="[$uv.addStyle(customStyle)]" :class="[customClass]" class="uv-cell-group">
<view v-if="title" class="uv-cell-group__title">
<slot name="title">
<text class="uv-cell-group__title__text">{{ title }}</text>
</slot>
</view>
<view class="uv-cell-group__wrapper">
<uv-line v-if="border"></uv-line>
<slot />
</view>
</view>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';
/**
* cellGroup 单元格
* @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。
* @tutorial https://www.uvui.cn/components/cell.html
*
* @property {String} title 分组标题
* @property {Boolean} border 是否显示外边框 (默认 true )
* @property {Object} customStyle 定义需要用到的外部样式
*
* @event {Function} click 点击cell列表时触发
* @example <uv-cell-group title="设置喜好">
*/
export default {
name: 'uv-cell-group',
mixins: [mpMixin, mixin, props]
}
</script>
<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
$uv-cell-group-title-padding: 16px 16px 8px !default;
$uv-cell-group-title-font-size: 15px !default;
$uv-cell-group-title-line-height: 16px !default;
$uv-cell-group-title-color: $uv-main-color !default;
.uv-cell-group {
flex: 1;
&__title {
padding: $uv-cell-group-title-padding;
&__text {
font-size: $uv-cell-group-title-font-size;
line-height: $uv-cell-group-title-line-height;
color: $uv-cell-group-title-color;
}
}
&__wrapper {
position: relative;
}
}
</style>

111
uni_modules/uv-cell/components/uv-cell/props.js Normal file
View File

@ -0,0 +1,111 @@
export default {
props: {
// 标题
title: {
type: [String, Number],
default: ''
},
// 标题下方的描述信息
label: {
type: [String, Number],
default: ''
},
// 右侧的内容
value: {
type: [String, Number],
default: ''
},
// 左侧图标名称，或者图片链接(本地文件建议使用绝对地址)
icon: {
type: String,
default: ''
},
// 是否禁用cell
disabled: {
type: Boolean,
default: false
},
// 是否显示下边框
border: {
type: Boolean,
default: true
},
// 内容是否垂直居中(主要是针对右侧的value部分)
center: {
type: Boolean,
default: true
},
// 点击后跳转的URL地址
url: {
type: String,
default: ''
},
// 链接跳转的方式，内部使用的是uvui封装的route方法，可能会进行拦截操作
linkType: {
type: String,
default: 'navigateTo'
},
// 是否开启点击反馈(表现为点击时加上灰色背景)
clickable: {
type: Boolean,
default: false
},
// 是否展示右侧箭头并开启点击反馈
isLink: {
type: Boolean,
default: false
},
// 是否显示表单状态下的必填星号(此组件可能会内嵌入input组件)
required: {
type: Boolean,
default: false
},
// 右侧的图标箭头
rightIcon: {
type: String,
default: 'arrow-right'
},
// 右侧箭头的方向，可选值为：left，up，down
arrowDirection: {
type: String,
default: ''
},
// 左侧图标样式
iconStyle: {
type: [Object, String],
default: () => {
return {}
}
},
// 右侧箭头图标的样式
rightIconStyle: {
type: [Object, String],
default: () => {
return {}
}
},
// 标题的样式
titleStyle: {
type: [Object, String],
default: () => {
return {}
}
},
// 单位元的大小，可选值为large
size: {
type: String,
default: ''
},
// 点击cell是否阻止事件传播
stop: {
type: Boolean,
default: true
},
// 标识符，cell被点击时返回
name: {
type: [Number, String],
default: ''
},
...uni.$uv?.props?.cell
}
}

205
uni_modules/uv-cell/components/uv-cell/uv-cell.vue Normal file
View File

@ -0,0 +1,205 @@
<template>
<view class="uv-cell" :class="[customClass]" :style="[$uv.addStyle(customStyle)]"
:hover-class="(!disabled && (clickable || isLink)) ? 'uv-cell--clickable' : ''" :hover-stay-time="250"
@click="clickHandler">
<view class="uv-cell__body" :class="[ center && 'uv-cell--center', size === 'large' && 'uv-cell__body--large']">
<view class="uv-cell__body__content">
<view class="uv-cell__left-icon-wrap">
<slot name="icon">
<uv-icon v-if="icon" :name="icon" :custom-style="iconStyle" :size="size === 'large' ? 22 : 18"></uv-icon>
</slot>
</view>
<view class="uv-cell__title">
<slot name="title">
<text v-if="title" class="uv-cell__title-text" :style="[titleTextStyle]"
:class="[disabled && 'uv-cell--disabled', size === 'large' && 'uv-cell__title-text--large']">{{ title }}</text>
</slot>
<slot name="label">
<text class="uv-cell__label" v-if="label"
:class="[disabled && 'uv-cell--disabled', size === 'large' && 'uv-cell__label--large']">{{ label }}</text>
</slot>
</view>
</view>
<slot name="value">
<text class="uv-cell__value"
:class="[disabled && 'uv-cell--disabled', size === 'large' && 'uv-cell__value--large']"
v-if="!$uv.test.empty(value)">{{ value }}</text>
</slot>
<view class="uv-cell__right-icon-wrap" v-if="$slots['right-icon'] || isLink"
:class="[`uv-cell__right-icon-wrap--${arrowDirection}`]">
<slot name="right-icon" v-if="$slots['right-icon']">
</slot>
<uv-icon v-else :name="rightIcon" :custom-style="rightIconStyle" :color="disabled ? '#c8c9cc' : 'info'"
:size="size === 'large' ? 18 : 16"></uv-icon>
</view>
</view>
<uv-line v-if="border"></uv-line>
</view>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';
/**
* cell 单元格
* @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。
* @tutorial https://www.uvui.cn/components/cell.html
* @property {String | Number} title 标题
* @property {String | Number} label 标题下方的描述信息
* @property {String | Number} value 右侧的内容
* @property {String} icon 左侧图标名称，或者图片链接(本地文件建议使用绝对地址)
* @property {Boolean} disabled 是否禁用cell
* @property {Boolean} border 是否显示下边框 (默认 true )
* @property {Boolean} center 内容是否垂直居中(主要是针对右侧的value部分) (默认 false )
* @property {String} url 点击后跳转的URL地址
* @property {String} linkType 链接跳转的方式，内部使用的是uvui封装的route方法，可能会进行拦截操作 (默认 'navigateTo' )
* @property {Boolean} clickable 是否开启点击反馈(表现为点击时加上灰色背景) （默认 false ）
* @property {Boolean} isLink 是否展示右侧箭头并开启点击反馈 （默认 false ）
* @property {Boolean} required 是否显示表单状态下的必填星号(此组件可能会内嵌入input组件) （默认 false ）
* @property {String} rightIcon 右侧的图标箭头 （默认 'arrow-right'）
* @property {String} arrowDirection 右侧箭头的方向，可选值为：left，up，down
* @property {Object | String} rightIconStyle 右侧箭头图标的样式
* @property {Object | String} titleStyle 标题的样式
* @property {Object | String} iconStyle 左侧图标样式
* @property {String} size 单位元的大小，可选值为 large，normal，mini
* @property {Boolean} stop 点击cell是否阻止事件传播 (默认 true )
* @property {Object} customStyle 定义需要用到的外部样式
*
* @event {Function} click 点击cell列表时触发
* @example 该组件需要搭配cell-group组件使用，见官方文档示例
*/
export default {
name: 'uv-cell',
emits: ['click'],
mixins: [mpMixin, mixin, props],
computed: {
titleTextStyle() {
return this.$uv.addStyle(this.titleStyle)
}
},
methods: {
// 点击cell
clickHandler(e) {
if (this.disabled) return
this.$emit('click', {
name: this.name
})
// 如果配置了url(此props参数通过mixin引入)参数，跳转页面
this.openPage()
// 是否阻止事件传播
this.stop && this.preventEvent(e)
},
}
}
</script>
<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
$uv-cell-padding: 10px 15px !default;
$uv-cell-font-size: 15px !default;
$uv-cell-line-height: 24px !default;
$uv-cell-color: $uv-main-color !default;
$uv-cell-icon-size: 16px !default;
$uv-cell-title-font-size: 15px !default;
$uv-cell-title-line-height: 22px !default;
$uv-cell-title-color: $uv-main-color !default;
$uv-cell-label-font-size: 12px !default;
$uv-cell-label-color: $uv-tips-color !default;
$uv-cell-label-line-height: 18px !default;
$uv-cell-value-font-size: 14px !default;
$uv-cell-value-color: $uv-content-color !default;
$uv-cell-clickable-color: $uv-bg-color !default;
$uv-cell-disabled-color: #c8c9cc !default;
$uv-cell-padding-top-large: 13px !default;
$uv-cell-padding-bottom-large: 13px !default;
$uv-cell-value-font-size-large: 15px !default;
$uv-cell-label-font-size-large: 14px !default;
$uv-cell-title-font-size-large: 16px !default;
$uv-cell-left-icon-wrap-margin-right: 4px !default;
$uv-cell-right-icon-wrap-margin-left: 4px !default;
$uv-cell-title-flex: 1 !default;
$uv-cell-label-margin-top: 5px !default;
.uv-cell {
&__body {
@include flex();
/* #ifndef APP-NVUE */
box-sizing: border-box;
/* #endif */
padding: $uv-cell-padding;
font-size: $uv-cell-font-size;
color: $uv-cell-color;
&__content {
@include flex(row);
align-items: center;
flex: 1;
}
&--large {
padding-top: $uv-cell-padding-top-large;
padding-bottom: $uv-cell-padding-bottom-large;
}
}
&__left-icon-wrap,
&__right-icon-wrap {
@include flex();
align-items: center;
// height: $uv-cell-line-height;
font-size: $uv-cell-icon-size;
}
&__left-icon-wrap {
margin-right: $uv-cell-left-icon-wrap-margin-right;
}
&__right-icon-wrap {
margin-left: $uv-cell-right-icon-wrap-margin-left;
transition: transform 0.3s;
&--up {
transform: rotate(-90deg);
}
&--down {
transform: rotate(90deg);
}
}
&__title {
flex: $uv-cell-title-flex;
&-text {
font-size: $uv-cell-title-font-size;
line-height: $uv-cell-title-line-height;
color: $uv-cell-title-color;
&--large {
font-size: $uv-cell-title-font-size-large;
}
}
}
&__label {
margin-top: $uv-cell-label-margin-top;
font-size: $uv-cell-label-font-size;
color: $uv-cell-label-color;
line-height: $uv-cell-label-line-height;
&--large {
font-size: $uv-cell-label-font-size-large;
}
}
&__value {
text-align: right;
font-size: $uv-cell-value-font-size;
line-height: $uv-cell-line-height;
color: $uv-cell-value-color;
&--large {
font-size: $uv-cell-value-font-size-large;
}
}
&--clickable {
background-color: $uv-cell-clickable-color;
}
&--disabled {
color: $uv-cell-disabled-color;
/* #ifndef APP-NVUE */
cursor: not-allowed;
/* #endif */
}
&--center {
align-items: center;
}
}
</style>

89
uni_modules/uv-cell/package.json Normal file
View File

@ -0,0 +1,89 @@
{
"id": "uv-cell",
"displayName": "uv-cell 单元格 全面兼容小程序、nvue、vue2、vue3等多端",
"version": "1.0.3",
"description": "cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。",
"keywords": [
"uv-cell",
"uvui",
"uv-ui",
"单元格",
"设置页"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [
"uv-ui-tools",
"uv-icon",
"uv-line"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"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",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}

11
uni_modules/uv-cell/readme.md Normal file
View File

@ -0,0 +1,11 @@
## Cell 单元格
> **组件名：uv-cell**
cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。
### <a href="https://www.uvui.cn/components/cell.html" target="_blank">查看文档</a>
### [完整示例项目下载 | 关注更多组件](https://ext.dcloud.net.cn/plugin?name=uv-ui)
#### 如使用过程中有任何问题，或者您对uv-ui有一些好的建议，欢迎加入 uv-ui 交流群：<a href="https://ext.dcloud.net.cn/plugin?id=12287" target="_blank">uv-ui</a>、<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>