feat(fittingRoom): 新增衣服长度选择功能在上传衣服页面增加分类和长度选择功能，支持用户选择衣服类型和具体长度部位。新增 pattern 常量定义各种长度选项，并在 store 中添加相应的状态管理。同时更新了相关样式和组件依赖。
fix(uploadClothes): 修复上传页面分类选择逻辑 调整上传衣服页面的分类选择逻辑，使用 uv-radio-group 实现单选功能，支持衣服类型和长度部位的选择。引入 fittingRoom store 中的 tabs 和 pattern 数据，优化用户交互体验。 chore(deps): 更新 uv-icon 和 uv-radio 组件版本更新 uv-icon 和 uv-radio 组件的 package.json 配置文件，设置版本号为1.0.13。更新 changelog 文档，记录组件的优化和 bug 修复历史。完善组件的平台兼容性配置和依赖关系。 style(components): 调整上传页面样式布局优化上传衣服页面的样式布局，新增 warp、title、container 等样式类，改善分类和长度选择区域的显示效果。调整单选框的间距和对齐方式，提升用户界面的美观性和可用性。
This commit is contained in:
guigongli
@@ -9,6 +9,45 @@
|
|||||||
@click="uploadFile"
|
@click="uploadFile"
|
||||||
></image>
|
></image>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<view class="warp">
|
||||||
|
<view class="container">
|
||||||
|
<view class="title">分类：</view>
|
||||||
|
<uv-radio-group v-model="fittingRoomStore.selectClothesType">
|
||||||
|
<template v-for="(item, index) in fittingRoomStore.tabs">
|
||||||
|
<uv-radio
|
||||||
|
shape="square"
|
||||||
|
:customStyle="{margin: '12rpx'}"
|
||||||
|
v-if="index !== 0 && index !== 5"
|
||||||
|
:key="index"
|
||||||
|
:label="item"
|
||||||
|
size="26rpx"
|
||||||
|
iconSize="20rpx"
|
||||||
|
activeColor="#606060"
|
||||||
|
:name="index">
|
||||||
|
</uv-radio>
|
||||||
|
</template>
|
||||||
|
</uv-radio-group>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="warp">
|
||||||
|
<view class="container">
|
||||||
|
<view class="title">长度：</view>
|
||||||
|
<uv-radio-group v-model="fittingRoomStore.selectPattern">
|
||||||
|
<uv-radio
|
||||||
|
v-for="(item, index) in pattern"
|
||||||
|
shape="square"
|
||||||
|
:customStyle="{margin: '12rpx'}"
|
||||||
|
:key="index"
|
||||||
|
:label="item.label"
|
||||||
|
size="26rpx"
|
||||||
|
iconSize="20rpx"
|
||||||
|
activeColor="#606060"
|
||||||
|
:name="item.value">
|
||||||
|
</uv-radio>
|
||||||
|
</uv-radio-group>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -17,11 +56,14 @@
|
|||||||
import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
|
import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
|
||||||
import sheep from '@/sheep';
|
import sheep from '@/sheep';
|
||||||
import SelectPic from '@/pages/uploadClothes/SelectPic.vue';
|
import SelectPic from '@/pages/uploadClothes/SelectPic.vue';
|
||||||
|
import { pattern } from '@/sheep/store/fittingRoom';
|
||||||
|
|
||||||
const fittingRoom = sheep.$store('fittingRoom');
|
const fittingRoomStore = sheep.$store('fittingRoom');
|
||||||
|
|
||||||
const imageUrl = ref('https://picsum.photos/600/300?random=3')
|
const imageUrl = ref('https://picsum.photos/600/300?random=3')
|
||||||
|
function selectColthesType(val) {
|
||||||
|
console.log("🚀 ~ selectColthesType ~ val: ", val);
|
||||||
|
}
|
||||||
// 隐藏原生tabBar
|
// 隐藏原生tabBar
|
||||||
uni.hideTabBar({
|
uni.hideTabBar({
|
||||||
fail: () => {},
|
fail: () => {},
|
||||||
@@ -72,6 +114,25 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.warp {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
width: 323*2rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.selectCheckbox {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
.clothes-box {
|
.clothes-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|||||||
@@ -1,6 +1,19 @@
|
|||||||
import { defineStore } from 'pinia';
|
import { defineStore } from 'pinia';
|
||||||
import app from './app';
|
import app from './app';
|
||||||
|
|
||||||
|
export const pattern = [
|
||||||
|
{ value: 'body', label: '腰部以上'},
|
||||||
|
{ value: 'waist', label: '腰'},
|
||||||
|
{ value: 'thigh', label: '跨'},
|
||||||
|
{ value: 'thigh1', label: '大腿上部1/3'},
|
||||||
|
{ value: 'thigh2', label: '大腿中部'},
|
||||||
|
{ value: 'knee', label: '膝盖'},
|
||||||
|
{ value: 'leg', label: '小腿'},
|
||||||
|
{ value: 'leg1', label: '小腿上部1/3'},
|
||||||
|
{ value: 'foot', label: '脚踝'},
|
||||||
|
{ value: 'mopping', label: '拖地'},
|
||||||
|
]
|
||||||
|
|
||||||
const fittingRoom = defineStore({
|
const fittingRoom = defineStore({
|
||||||
id: 'fittingRoom',
|
id: 'fittingRoom',
|
||||||
state: () => ({
|
state: () => ({
|
||||||
@@ -10,6 +23,8 @@ const fittingRoom = defineStore({
|
|||||||
tabs: ['全部', '上衣', '下装', '连衣裙', '外套', '发型'],
|
tabs: ['全部', '上衣', '下装', '连衣裙', '外套', '发型'],
|
||||||
disableTabs: [5], // 不允许上传图的tab索引
|
disableTabs: [5], // 不允许上传图的tab索引
|
||||||
currentClothes: [], // 当前选的衣服
|
currentClothes: [], // 当前选的衣服
|
||||||
|
selectClothesType: 1, // 选中的衣服类型, 默认选中上衣
|
||||||
|
selectPattern: pattern[0].value,
|
||||||
}),
|
}),
|
||||||
getters: {
|
getters: {
|
||||||
// 能上传图片的场景
|
// 能上传图片的场景
|
||||||
|
|||||||
@@ -0,0 +1,31 @@
|
|||||||
|
## 1.0.13（2023-12-06）
|
||||||
|
1. 优化
|
||||||
|
## 1.0.12（2023-12-06）
|
||||||
|
1. 阻止事件冒泡处理
|
||||||
|
## 1.0.11（2023-10-29）
|
||||||
|
1. imgMode默认值改成aspectFit
|
||||||
|
## 1.0.10（2023-08-13）
|
||||||
|
1. 优化nvue，方便自定义图标
|
||||||
|
## 1.0.9（2023-07-28）
|
||||||
|
1. 修改几个对应错误图标的BUG
|
||||||
|
## 1.0.8（2023-07-24）
|
||||||
|
1. 优化 支持base64图片
|
||||||
|
## 1.0.7（2023-07-17）
|
||||||
|
1. 修复 uv-icon 恢复uv-empty相关的图标
|
||||||
|
## 1.0.6（2023-07-13）
|
||||||
|
1. 修复icon设置name属性对应图标错误的BUG
|
||||||
|
## 1.0.5（2023-07-04）
|
||||||
|
1. 更新图标，删除一些不常用的图标
|
||||||
|
2. 删除base64，修改成ttf文件引入读取图标
|
||||||
|
3. 自定义图标文档说明：https://www.uvui.cn/guide/customIcon.html
|
||||||
|
## 1.0.4（2023-07-03）
|
||||||
|
1. 修复主题颜色在APP不生效的BUG
|
||||||
|
## 1.0.3（2023-05-24）
|
||||||
|
1. 将线上ttf字体包替换成base64，避免加载时或者网络差时候显示白色方块
|
||||||
|
## 1.0.2（2023-05-16）
|
||||||
|
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
|
||||||
|
2. 优化部分功能
|
||||||
|
## 1.0.1（2023-05-10）
|
||||||
|
1. 修复小程序中异常显示
|
||||||
|
## 1.0.0（2023-05-04）
|
||||||
|
新发版
|
||||||
@@ -0,0 +1,160 @@
|
|||||||
|
export default {
|
||||||
|
'uvicon-level': 'e68f',
|
||||||
|
'uvicon-checkbox-mark': 'e659',
|
||||||
|
'uvicon-folder': 'e694',
|
||||||
|
'uvicon-movie': 'e67c',
|
||||||
|
'uvicon-star-fill': 'e61e',
|
||||||
|
'uvicon-star': 'e618',
|
||||||
|
'uvicon-phone-fill': 'e6ac',
|
||||||
|
'uvicon-phone': 'e6ba',
|
||||||
|
'uvicon-apple-fill': 'e635',
|
||||||
|
'uvicon-backspace': 'e64d',
|
||||||
|
'uvicon-attach': 'e640',
|
||||||
|
'uvicon-empty-data': 'e671',
|
||||||
|
'uvicon-empty-address': 'e68a',
|
||||||
|
'uvicon-empty-favor': 'e662',
|
||||||
|
'uvicon-empty-car': 'e657',
|
||||||
|
'uvicon-empty-order': 'e66b',
|
||||||
|
'uvicon-empty-list': 'e672',
|
||||||
|
'uvicon-empty-search': 'e677',
|
||||||
|
'uvicon-empty-permission': 'e67d',
|
||||||
|
'uvicon-empty-news': 'e67e',
|
||||||
|
'uvicon-empty-history': 'e685',
|
||||||
|
'uvicon-empty-coupon': 'e69b',
|
||||||
|
'uvicon-empty-page': 'e60e',
|
||||||
|
'uvicon-empty-wifi-off': 'e6cc',
|
||||||
|
'uvicon-reload': 'e627',
|
||||||
|
'uvicon-order': 'e695',
|
||||||
|
'uvicon-server-man': 'e601',
|
||||||
|
'uvicon-search': 'e632',
|
||||||
|
'uvicon-more-dot-fill': 'e66f',
|
||||||
|
'uvicon-scan': 'e631',
|
||||||
|
'uvicon-map': 'e665',
|
||||||
|
'uvicon-map-fill': 'e6a8',
|
||||||
|
'uvicon-tags': 'e621',
|
||||||
|
'uvicon-tags-fill': 'e613',
|
||||||
|
'uvicon-eye': 'e664',
|
||||||
|
'uvicon-eye-fill': 'e697',
|
||||||
|
'uvicon-eye-off': 'e69c',
|
||||||
|
'uvicon-eye-off-outline': 'e688',
|
||||||
|
'uvicon-mic': 'e66d',
|
||||||
|
'uvicon-mic-off': 'e691',
|
||||||
|
'uvicon-calendar': 'e65c',
|
||||||
|
'uvicon-trash': 'e623',
|
||||||
|
'uvicon-trash-fill': 'e6ce',
|
||||||
|
'uvicon-play-left': 'e6bf',
|
||||||
|
'uvicon-play-right': 'e6b3',
|
||||||
|
'uvicon-minus': 'e614',
|
||||||
|
'uvicon-plus': 'e625',
|
||||||
|
'uvicon-info-circle': 'e69f',
|
||||||
|
'uvicon-info-circle-fill': 'e6a7',
|
||||||
|
'uvicon-question-circle': 'e622',
|
||||||
|
'uvicon-question-circle-fill': 'e6bc',
|
||||||
|
'uvicon-close': 'e65a',
|
||||||
|
'uvicon-checkmark': 'e64a',
|
||||||
|
'uvicon-checkmark-circle': 'e643',
|
||||||
|
'uvicon-checkmark-circle-fill': 'e668',
|
||||||
|
'uvicon-setting': 'e602',
|
||||||
|
'uvicon-setting-fill': 'e6d0',
|
||||||
|
'uvicon-heart': 'e6a2',
|
||||||
|
'uvicon-heart-fill': 'e68b',
|
||||||
|
'uvicon-camera': 'e642',
|
||||||
|
'uvicon-camera-fill': 'e650',
|
||||||
|
'uvicon-more-circle': 'e69e',
|
||||||
|
'uvicon-more-circle-fill': 'e684',
|
||||||
|
'uvicon-chat': 'e656',
|
||||||
|
'uvicon-chat-fill': 'e63f',
|
||||||
|
'uvicon-bag': 'e647',
|
||||||
|
'uvicon-error-circle': 'e66e',
|
||||||
|
'uvicon-error-circle-fill': 'e655',
|
||||||
|
'uvicon-close-circle': 'e64e',
|
||||||
|
'uvicon-close-circle-fill': 'e666',
|
||||||
|
'uvicon-share': 'e629',
|
||||||
|
'uvicon-share-fill': 'e6bb',
|
||||||
|
'uvicon-share-square': 'e6c4',
|
||||||
|
'uvicon-shopping-cart': 'e6cb',
|
||||||
|
'uvicon-shopping-cart-fill': 'e630',
|
||||||
|
'uvicon-bell': 'e651',
|
||||||
|
'uvicon-bell-fill': 'e604',
|
||||||
|
'uvicon-list': 'e690',
|
||||||
|
'uvicon-list-dot': 'e6a9',
|
||||||
|
'uvicon-zhifubao-circle-fill': 'e617',
|
||||||
|
'uvicon-weixin-circle-fill': 'e6cd',
|
||||||
|
'uvicon-weixin-fill': 'e620',
|
||||||
|
'uvicon-qq-fill': 'e608',
|
||||||
|
'uvicon-qq-circle-fill': 'e6b9',
|
||||||
|
'uvicon-moments-circel-fill': 'e6c2',
|
||||||
|
'uvicon-moments': 'e6a0',
|
||||||
|
'uvicon-car': 'e64f',
|
||||||
|
'uvicon-car-fill': 'e648',
|
||||||
|
'uvicon-warning-fill': 'e6c7',
|
||||||
|
'uvicon-warning': 'e6c1',
|
||||||
|
'uvicon-clock-fill': 'e64b',
|
||||||
|
'uvicon-clock': 'e66c',
|
||||||
|
'uvicon-edit-pen': 'e65d',
|
||||||
|
'uvicon-edit-pen-fill': 'e679',
|
||||||
|
'uvicon-email': 'e673',
|
||||||
|
'uvicon-email-fill': 'e683',
|
||||||
|
'uvicon-minus-circle': 'e6a5',
|
||||||
|
'uvicon-plus-circle': 'e603',
|
||||||
|
'uvicon-plus-circle-fill': 'e611',
|
||||||
|
'uvicon-file-text': 'e687',
|
||||||
|
'uvicon-file-text-fill': 'e67f',
|
||||||
|
'uvicon-pushpin': 'e6d1',
|
||||||
|
'uvicon-pushpin-fill': 'e6b6',
|
||||||
|
'uvicon-grid': 'e68c',
|
||||||
|
'uvicon-grid-fill': 'e698',
|
||||||
|
'uvicon-play-circle': 'e6af',
|
||||||
|
'uvicon-play-circle-fill': 'e62a',
|
||||||
|
'uvicon-pause-circle-fill': 'e60c',
|
||||||
|
'uvicon-pause': 'e61c',
|
||||||
|
'uvicon-pause-circle': 'e696',
|
||||||
|
'uvicon-gift-fill': 'e6b0',
|
||||||
|
'uvicon-gift': 'e680',
|
||||||
|
'uvicon-kefu-ermai': 'e660',
|
||||||
|
'uvicon-server-fill': 'e610',
|
||||||
|
'uvicon-coupon-fill': 'e64c',
|
||||||
|
'uvicon-coupon': 'e65f',
|
||||||
|
'uvicon-integral': 'e693',
|
||||||
|
'uvicon-integral-fill': 'e6b1',
|
||||||
|
'uvicon-home-fill': 'e68e',
|
||||||
|
'uvicon-home': 'e67b',
|
||||||
|
'uvicon-account': 'e63a',
|
||||||
|
'uvicon-account-fill': 'e653',
|
||||||
|
'uvicon-thumb-down-fill': 'e628',
|
||||||
|
'uvicon-thumb-down': 'e60a',
|
||||||
|
'uvicon-thumb-up': 'e612',
|
||||||
|
'uvicon-thumb-up-fill': 'e62c',
|
||||||
|
'uvicon-lock-fill': 'e6a6',
|
||||||
|
'uvicon-lock-open': 'e68d',
|
||||||
|
'uvicon-lock-opened-fill': 'e6a1',
|
||||||
|
'uvicon-lock': 'e69d',
|
||||||
|
'uvicon-red-packet': 'e6c3',
|
||||||
|
'uvicon-photo-fill': 'e6b4',
|
||||||
|
'uvicon-photo': 'e60d',
|
||||||
|
'uvicon-volume-off-fill': 'e6c8',
|
||||||
|
'uvicon-volume-off': 'e6bd',
|
||||||
|
'uvicon-volume-fill': 'e624',
|
||||||
|
'uvicon-volume': 'e605',
|
||||||
|
'uvicon-download': 'e670',
|
||||||
|
'uvicon-arrow-up-fill': 'e636',
|
||||||
|
'uvicon-arrow-down-fill': 'e638',
|
||||||
|
'uvicon-play-left-fill': 'e6ae',
|
||||||
|
'uvicon-play-right-fill': 'e6ad',
|
||||||
|
'uvicon-arrow-downward': 'e634',
|
||||||
|
'uvicon-arrow-leftward': 'e63b',
|
||||||
|
'uvicon-arrow-rightward': 'e644',
|
||||||
|
'uvicon-arrow-upward': 'e641',
|
||||||
|
'uvicon-arrow-down': 'e63e',
|
||||||
|
'uvicon-arrow-right': 'e63c',
|
||||||
|
'uvicon-arrow-left': 'e646',
|
||||||
|
'uvicon-arrow-up': 'e633',
|
||||||
|
'uvicon-skip-back-left': 'e6c5',
|
||||||
|
'uvicon-skip-forward-right': 'e61f',
|
||||||
|
'uvicon-arrow-left-double': 'e637',
|
||||||
|
'uvicon-man': 'e675',
|
||||||
|
'uvicon-woman': 'e626',
|
||||||
|
'uvicon-en': 'e6b8',
|
||||||
|
'uvicon-twitte': 'e607',
|
||||||
|
'uvicon-twitter-circle-fill': 'e6cf'
|
||||||
|
}
|
||||||
@@ -0,0 +1,90 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
// 图标类名
|
||||||
|
name: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 图标颜色，可接受主题色
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: '#606266'
|
||||||
|
},
|
||||||
|
// 字体大小，单位px
|
||||||
|
size: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: '16px'
|
||||||
|
},
|
||||||
|
// 是否显示粗体
|
||||||
|
bold: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
|
||||||
|
index: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
// 触摸图标时的类名
|
||||||
|
hoverClass: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 自定义扩展前缀，方便用户扩展自己的图标库
|
||||||
|
customPrefix: {
|
||||||
|
type: String,
|
||||||
|
default: 'uvicon'
|
||||||
|
},
|
||||||
|
// 图标右边或者下面的文字
|
||||||
|
label: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// label的位置，只能右边或者下边
|
||||||
|
labelPos: {
|
||||||
|
type: String,
|
||||||
|
default: 'right'
|
||||||
|
},
|
||||||
|
// label的大小
|
||||||
|
labelSize: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: '15px'
|
||||||
|
},
|
||||||
|
// label的颜色
|
||||||
|
labelColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#606266'
|
||||||
|
},
|
||||||
|
// label与图标的距离
|
||||||
|
space: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: '3px'
|
||||||
|
},
|
||||||
|
// 图片的mode
|
||||||
|
imgMode: {
|
||||||
|
type: String,
|
||||||
|
default: 'aspectFit'
|
||||||
|
},
|
||||||
|
// 用于显示图片小图标时，图片的宽度
|
||||||
|
width: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 用于显示图片小图标时，图片的高度
|
||||||
|
height: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 用于解决某些情况下，让图标垂直居中的用途
|
||||||
|
top: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
// 是否阻止事件传播
|
||||||
|
stop: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
...uni.$uv?.props?.icon
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,226 @@
|
|||||||
|
<template>
|
||||||
|
<view
|
||||||
|
class="uv-icon"
|
||||||
|
@tap="clickHandler"
|
||||||
|
:class="['uv-icon--' + labelPos]"
|
||||||
|
>
|
||||||
|
<image
|
||||||
|
class="uv-icon__img"
|
||||||
|
v-if="isImg"
|
||||||
|
:src="name"
|
||||||
|
:mode="imgMode"
|
||||||
|
:style="[imgStyle, $uv.addStyle(customStyle)]"
|
||||||
|
></image>
|
||||||
|
<text
|
||||||
|
v-else
|
||||||
|
class="uv-icon__icon"
|
||||||
|
:class="uClasses"
|
||||||
|
:style="[iconStyle, $uv.addStyle(customStyle)]"
|
||||||
|
:hover-class="hoverClass"
|
||||||
|
>{{icon}}</text>
|
||||||
|
<!-- 这里进行空字符串判断，如果仅仅是v-if="label"，可能会出现传递0的时候，结果也无法显示 -->
|
||||||
|
<text
|
||||||
|
v-if="label !== ''"
|
||||||
|
class="uv-icon__label"
|
||||||
|
:style="{
|
||||||
|
color: labelColor,
|
||||||
|
fontSize: $uv.addUnit(labelSize),
|
||||||
|
marginLeft: labelPos == 'right' ? $uv.addUnit(space) : 0,
|
||||||
|
marginTop: labelPos == 'bottom' ? $uv.addUnit(space) : 0,
|
||||||
|
marginRight: labelPos == 'left' ? $uv.addUnit(space) : 0,
|
||||||
|
marginBottom: labelPos == 'top' ? $uv.addUnit(space) : 0
|
||||||
|
}"
|
||||||
|
>{{ label }}</text>
|
||||||
|
</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'
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
// nvue通过weex的dom模块引入字体，相关文档地址如下：
|
||||||
|
// https://weex.apache.org/zh/docs/modules/dom.html#addrule
|
||||||
|
import iconUrl from './uvicons.ttf';
|
||||||
|
const domModule = weex.requireModule('dom')
|
||||||
|
domModule.addRule('fontFace', {
|
||||||
|
'fontFamily': "uvicon-iconfont",
|
||||||
|
'src': "url('" + iconUrl + "')"
|
||||||
|
})
|
||||||
|
// #endif
|
||||||
|
// 引入图标名称，已经对应的unicode
|
||||||
|
import icons from './icons';
|
||||||
|
import props from './props.js';
|
||||||
|
/**
|
||||||
|
* icon 图标
|
||||||
|
* @description 基于字体的图标集，包含了大多数常见场景的图标。
|
||||||
|
* @tutorial https://www.uvui.cn/components/icon.html
|
||||||
|
* @property {String} name 图标名称，见示例图标集
|
||||||
|
* @property {String} color 图标颜色,可接受主题色 （默认 color['uv-content-color'] ）
|
||||||
|
* @property {String | Number} size 图标字体大小，单位px （默认 '16px' ）
|
||||||
|
* @property {Boolean} bold 是否显示粗体 （默认 false ）
|
||||||
|
* @property {String | Number} index 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
|
||||||
|
* @property {String} hoverClass 图标按下去的样式类，用法同uni的view组件的hoverClass参数，详情见官网
|
||||||
|
* @property {String} customPrefix 自定义扩展前缀，方便用户扩展自己的图标库 （默认 'uicon' ）
|
||||||
|
* @property {String | Number} label 图标右侧的label文字
|
||||||
|
* @property {String} labelPos label相对于图标的位置，只能right或bottom （默认 'right' ）
|
||||||
|
* @property {String | Number} labelSize label字体大小，单位px （默认 '15px' ）
|
||||||
|
* @property {String} labelColor 图标右侧的label文字颜色 （ 默认 color['uv-content-color'] ）
|
||||||
|
* @property {String | Number} space label与图标的距离，单位px （默认 '3px' ）
|
||||||
|
* @property {String} imgMode 图片的mode
|
||||||
|
* @property {String | Number} width 显示图片小图标时的宽度
|
||||||
|
* @property {String | Number} height 显示图片小图标时的高度
|
||||||
|
* @property {String | Number} top 图标在垂直方向上的定位 用于解决某些情况下，让图标垂直居中的用途 （默认 0 ）
|
||||||
|
* @property {Boolean} stop 是否阻止事件传播 （默认 false ）
|
||||||
|
* @property {Object} customStyle icon的样式，对象形式
|
||||||
|
* @event {Function} click 点击图标时触发
|
||||||
|
* @event {Function} touchstart 事件触摸时触发
|
||||||
|
* @example <uv-icon name="photo" color="#2979ff" size="28"></uv-icon>
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'uv-icon',
|
||||||
|
emits: ['click'],
|
||||||
|
mixins: [mpMixin, mixin, props],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
colorType: [
|
||||||
|
'primary',
|
||||||
|
'success',
|
||||||
|
'info',
|
||||||
|
'error',
|
||||||
|
'warning'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
uClasses() {
|
||||||
|
let classes = []
|
||||||
|
classes.push(this.customPrefix)
|
||||||
|
classes.push(this.customPrefix + '-' + this.name)
|
||||||
|
// 主题色，通过类配置
|
||||||
|
if (this.color && this.colorType.includes(this.color)) classes.push('uv-icon__icon--' + this.color)
|
||||||
|
// 阿里，头条，百度小程序通过数组绑定类名时，无法直接使用[a, b, c]的形式，否则无法识别
|
||||||
|
// 故需将其拆成一个字符串的形式，通过空格隔开各个类名
|
||||||
|
//#ifdef MP-ALIPAY || MP-TOUTIAO || MP-BAIDU
|
||||||
|
classes = classes.join(' ')
|
||||||
|
//#endif
|
||||||
|
return classes
|
||||||
|
},
|
||||||
|
iconStyle() {
|
||||||
|
let style = {}
|
||||||
|
style = {
|
||||||
|
fontSize: this.$uv.addUnit(this.size),
|
||||||
|
lineHeight: this.$uv.addUnit(this.size),
|
||||||
|
fontWeight: this.bold ? 'bold' : 'normal',
|
||||||
|
// 某些特殊情况需要设置一个到顶部的距离，才能更好的垂直居中
|
||||||
|
top: this.$uv.addUnit(this.top)
|
||||||
|
}
|
||||||
|
// 非主题色值时，才当作颜色值
|
||||||
|
if (this.color && !this.colorType.includes(this.color)) style.color = this.color
|
||||||
|
return style
|
||||||
|
},
|
||||||
|
// 判断传入的name属性，是否图片路径，只要带有"/"均认为是图片形式
|
||||||
|
isImg() {
|
||||||
|
const isBase64 = this.name.indexOf('data:') > -1 && this.name.indexOf('base64') > -1;
|
||||||
|
return this.name.indexOf('/') !== -1 || isBase64;
|
||||||
|
},
|
||||||
|
imgStyle() {
|
||||||
|
let style = {}
|
||||||
|
// 如果设置width和height属性，则优先使用，否则使用size属性
|
||||||
|
style.width = this.width ? this.$uv.addUnit(this.width) : this.$uv.addUnit(this.size)
|
||||||
|
style.height = this.height ? this.$uv.addUnit(this.height) : this.$uv.addUnit(this.size)
|
||||||
|
return style
|
||||||
|
},
|
||||||
|
// 通过图标名，查找对应的图标
|
||||||
|
icon() {
|
||||||
|
// 如果内置的图标中找不到对应的图标，就直接返回name值，因为用户可能传入的是unicode代码
|
||||||
|
const code = icons['uvicon-' + this.name];
|
||||||
|
// #ifdef APP-NVUE
|
||||||
|
if(!code) {
|
||||||
|
return code ? unescape(`%u${code}`) : ['uvicon'].indexOf(this.customPrefix) > -1 ? unescape(`%u${this.name}`) : '';
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
return code ? unescape(`%u${code}`) : ['uvicon'].indexOf(this.customPrefix) > -1 ? this.name : '';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
clickHandler(e) {
|
||||||
|
this.$emit('click', this.index)
|
||||||
|
// 是否阻止事件冒泡
|
||||||
|
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-icon-primary: $uv-primary !default;
|
||||||
|
$uv-icon-success: $uv-success !default;
|
||||||
|
$uv-icon-info: $uv-info !default;
|
||||||
|
$uv-icon-warning: $uv-warning !default;
|
||||||
|
$uv-icon-error: $uv-error !default;
|
||||||
|
$uv-icon-label-line-height: 1 !default;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
// 非nvue下加载字体
|
||||||
|
@font-face {
|
||||||
|
font-family: 'uvicon-iconfont';
|
||||||
|
src: url('./uvicons.ttf') format('truetype');
|
||||||
|
}
|
||||||
|
/* #endif */
|
||||||
|
.uv-icon {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
align-items: center;
|
||||||
|
&--left {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
&--right {
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
&--top {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
&--bottom {
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
&__icon {
|
||||||
|
font-family: uvicon-iconfont;
|
||||||
|
position: relative;
|
||||||
|
@include flex;
|
||||||
|
align-items: center;
|
||||||
|
&--primary {
|
||||||
|
color: $uv-icon-primary;
|
||||||
|
}
|
||||||
|
&--success {
|
||||||
|
color: $uv-icon-success;
|
||||||
|
}
|
||||||
|
&--error {
|
||||||
|
color: $uv-icon-error;
|
||||||
|
}
|
||||||
|
&--warning {
|
||||||
|
color: $uv-icon-warning;
|
||||||
|
}
|
||||||
|
&--info {
|
||||||
|
color: $uv-icon-info;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__img {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
height: auto;
|
||||||
|
will-change: transform;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
&__label {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
line-height: $uv-icon-label-line-height;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Binary file not shown.
@@ -0,0 +1,83 @@
|
|||||||
|
{
|
||||||
|
"id": "uv-icon",
|
||||||
|
"displayName": "uv-icon 图标 全面兼容vue3+2、app、h5、小程序等多端",
|
||||||
|
"version": "1.0.13",
|
||||||
|
"description": "基于字体的图标集，包含了大多数常见场景的图标，支持自定义，支持自定义图片图标等。可自定义颜色、大小。",
|
||||||
|
"keywords": [
|
||||||
|
"uv-ui,uvui,uv-icon,icon,图标,字体图标"
|
||||||
|
],
|
||||||
|
"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"
|
||||||
|
],
|
||||||
|
"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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
## uv-icon 图标库
|
||||||
|
|
||||||
|
> **组件名：uv-icon**
|
||||||
|
|
||||||
|
基于字体的图标集，包含了大多数常见场景的图标，支持自定义，支持自定义图片图标等。
|
||||||
|
|
||||||
|
# <a href="https://www.uvui.cn/components/icon.html" target="_blank">查看文档</a>
|
||||||
|
|
||||||
|
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||||
|
|
||||||
|
### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### 如使用过程中有任何问题反馈，或者您对uv-ui有一些好的建议，欢迎加入uv-ui官方交流群：<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
## 1.0.13（2023-12-19）
|
||||||
|
1. 修复在group设置labelColor不生效的BUG
|
||||||
|
## 1.0.12（2023-11-04）
|
||||||
|
1. 修复label文字较多不分行的问题
|
||||||
|
## 1.0.11（2023-10-11）
|
||||||
|
1. 优化：https://gitee.com/climblee/uv-ui/issues/I872VD
|
||||||
|
## 1.0.10（2023-09-01）
|
||||||
|
1. 修复点击空隙处无效的问题
|
||||||
|
2. label支持插槽下可点击
|
||||||
|
## 1.0.9（2023-08-27）
|
||||||
|
1. 优化
|
||||||
|
## 1.0.8（2023-08-26）
|
||||||
|
1. 修复v-model 绑定布尔值控制台报警
|
||||||
|
## 1.0.7（2023-08-26）
|
||||||
|
1. 修复设置 labelSize 属性设置无效的问题：https://gitee.com/climblee/uv-ui/issues/I7W6UN
|
||||||
|
## 1.0.6（2023-08-04）
|
||||||
|
1. 修复name为数字0时不能选中的BUG
|
||||||
|
## 1.0.5（2023-07-13）
|
||||||
|
1. 修复 uv-radio设置value属性不生效的BUG
|
||||||
|
## 1.0.4（2023-07-05）
|
||||||
|
修复vue3模式下，动态修改v-model绑定的值无效的BUG
|
||||||
|
## 1.0.3（2023-06-06）
|
||||||
|
1. 修正语法问题
|
||||||
|
## 1.0.2（2023-06-06）
|
||||||
|
1. uv-radio-group 兼容自定义样式customStyle,方便通过样式调整整体位置等
|
||||||
|
2. .uv-radio-group--row增加flex-wrap: wrap;允许换行
|
||||||
|
## 1.0.1（2023-05-16）
|
||||||
|
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
|
||||||
|
2. 优化部分功能
|
||||||
|
## 1.0.0（2023-05-10）
|
||||||
|
uv-radio 单选框
|
||||||
@@ -0,0 +1,89 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
// 绑定的值
|
||||||
|
value: {
|
||||||
|
type: [String, Number, Boolean],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
modelValue: {
|
||||||
|
type: [String, Number, Boolean],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 是否禁用全部radio
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// 形状，circle-圆形，square-方形
|
||||||
|
shape: {
|
||||||
|
type: String,
|
||||||
|
default: 'circle'
|
||||||
|
},
|
||||||
|
// 选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值
|
||||||
|
activeColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#2979ff'
|
||||||
|
},
|
||||||
|
// 未选中的颜色
|
||||||
|
inactiveColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#c8c9cc'
|
||||||
|
},
|
||||||
|
// 标识符
|
||||||
|
name: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 整个组件的尺寸，默认px
|
||||||
|
size: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: 18
|
||||||
|
},
|
||||||
|
// 布局方式，row-横向，column-纵向
|
||||||
|
placement: {
|
||||||
|
type: String,
|
||||||
|
default: 'row'
|
||||||
|
},
|
||||||
|
// label的文本
|
||||||
|
label: {
|
||||||
|
type: [String],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// label的颜色 （默认 '#303133' ）
|
||||||
|
labelColor: {
|
||||||
|
type: [String],
|
||||||
|
default: '#303133'
|
||||||
|
},
|
||||||
|
// label的字体大小，px单位
|
||||||
|
labelSize: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: 14
|
||||||
|
},
|
||||||
|
// 是否禁止点击文本操作checkbox(默认 false )
|
||||||
|
labelDisabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// 图标颜色
|
||||||
|
iconColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#fff'
|
||||||
|
},
|
||||||
|
// 图标的大小，单位px
|
||||||
|
iconSize: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: 12
|
||||||
|
},
|
||||||
|
// 竖向配列时，是否显示下划线
|
||||||
|
borderBottom: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
// 图标与文字的对齐方式
|
||||||
|
iconPlacement: {
|
||||||
|
type: String,
|
||||||
|
default: 'left'
|
||||||
|
},
|
||||||
|
...uni.$uv?.props?.radioGroup
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,115 @@
|
|||||||
|
<template>
|
||||||
|
<view
|
||||||
|
class="uv-radio-group"
|
||||||
|
:class="bemClass"
|
||||||
|
:style="[$uv.addStyle(this.customStyle)]"
|
||||||
|
>
|
||||||
|
<slot></slot>
|
||||||
|
</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';
|
||||||
|
/**
|
||||||
|
* radioRroup 单选框父组件
|
||||||
|
* @description 单选框用于有一个选择，用户只能选择其中一个的场景。搭配uv-radio使用
|
||||||
|
* @tutorial https://www.uvui.cn/components/radio.html
|
||||||
|
* @property {String | Number | Boolean} value 绑定的值
|
||||||
|
* @property {Boolean} disabled 是否禁用所有radio（默认 false ）
|
||||||
|
* @property {String} shape 外观形状，shape-方形，circle-圆形(默认 circle )
|
||||||
|
* @property {String} activeColor 选中时的颜色，应用到所有子Radio组件（默认 '#2979ff' ）
|
||||||
|
* @property {String} inactiveColor 未选中的颜色 (默认 '#c8c9cc' )
|
||||||
|
* @property {String} name 标识符
|
||||||
|
* @property {String | Number} size 组件整体的大小，单位px（默认 18 ）
|
||||||
|
* @property {String} placement 布局方式，row-横向，column-纵向 （默认 'row' ）
|
||||||
|
* @property {String} label 文本
|
||||||
|
* @property {String} labelColor label的颜色 （默认 '#303133' ）
|
||||||
|
* @property {String | Number} labelSize label的字体大小，px单位 （默认 14 ）
|
||||||
|
* @property {Boolean} labelDisabled 是否禁止点击文本操作checkbox(默认 false )
|
||||||
|
* @property {String} iconColor 图标颜色 （默认 '#ffffff' ）
|
||||||
|
* @property {String | Number} iconSize 图标的大小，单位px （默认 12 ）
|
||||||
|
* @property {Boolean} borderBottom placement为row时，是否显示下边框 （默认 false ）
|
||||||
|
* @property {String} iconPlacement 图标与文字的对齐方式 （默认 'left' ）
|
||||||
|
* @property {Object} customStyle 组件的样式，对象形式
|
||||||
|
* @event {Function} change 任一个radio状态发生变化时触发
|
||||||
|
* @example <uv-radio-group v-model="value"></uv-radio-group>
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'uv-radio-group',
|
||||||
|
mixins: [mpMixin, mixin, props],
|
||||||
|
computed: {
|
||||||
|
// 这里computed的变量，都是子组件uv-radio需要用到的，由于头条小程序的兼容性差异，子组件无法实时监听父组件参数的变化
|
||||||
|
// 所以需要手动通知子组件，这里返回一个parentData变量，供watch监听，在其中去通知每一个子组件重新从父组件(uv-radio-group)
|
||||||
|
// 拉取父组件新的变化后的参数
|
||||||
|
parentData() {
|
||||||
|
const value = this.value || this.modelValue;
|
||||||
|
return [value, this.disabled, this.inactiveColor, this.activeColor, this.size, this.labelDisabled, this.shape,
|
||||||
|
this.iconSize, this.borderBottom, this.placement]
|
||||||
|
},
|
||||||
|
bemClass() {
|
||||||
|
// this.bem为一个computed变量，在mixin中
|
||||||
|
return this.bem('radio-group', ['placement'])
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// 当父组件需要子组件需要共享的参数发生了变化，手动通知子组件
|
||||||
|
parentData() {
|
||||||
|
if (this.children.length) {
|
||||||
|
this.children.map(child => {
|
||||||
|
// 判断子组件(uv-radio)如果有init方法的话，就就执行(执行的结果是子组件重新从父组件拉取了最新的值)
|
||||||
|
typeof(child.init) === 'function' && child.init()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.children = []
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 将其他的radio设置为未选中的状态
|
||||||
|
unCheckedOther(childInstance) {
|
||||||
|
this.children.map(child => {
|
||||||
|
// 所有子radio中，被操作组件实例的checked的值无需修改
|
||||||
|
if (childInstance !== child) {
|
||||||
|
child.checked = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const {
|
||||||
|
name
|
||||||
|
} = childInstance
|
||||||
|
// 通过emit事件，设置父组件通过v-model双向绑定的值
|
||||||
|
// #ifdef VUE2
|
||||||
|
this.$emit('input', name)
|
||||||
|
// #endif
|
||||||
|
// #ifdef VUE3
|
||||||
|
this.$emit('update:modelValue',name)
|
||||||
|
// #endif
|
||||||
|
// 发出事件
|
||||||
|
this.$emit('change', name)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
|
||||||
|
.uv-radio-group {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
&--row {
|
||||||
|
@include flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--column {
|
||||||
|
@include flex(column);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,65 @@
|
|||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
// radio的名称
|
||||||
|
name: {
|
||||||
|
type: [String, Number, Boolean],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 形状，square为方形，circle为圆型
|
||||||
|
shape: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 是否禁用
|
||||||
|
disabled: {
|
||||||
|
type: [String, Boolean],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 是否禁止点击提示语选中单选框
|
||||||
|
labelDisabled: {
|
||||||
|
type: [String, Boolean],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 选中状态下的颜色，如设置此值，将会覆盖parent的activeColor值
|
||||||
|
activeColor: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 未选中的颜色
|
||||||
|
inactiveColor: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 图标的大小，单位px
|
||||||
|
iconSize: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// label的字体大小，px单位
|
||||||
|
labelSize: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// label提示文字，因为nvue下，直接slot进来的文字，由于特殊的结构，无法修改样式
|
||||||
|
label: {
|
||||||
|
type: [String, Number, Boolean],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 整体的大小
|
||||||
|
size: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// 图标颜色
|
||||||
|
iconColor: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
// label的颜色
|
||||||
|
labelColor: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
...uni.$uv?.props?.radio
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,348 @@
|
|||||||
|
<template>
|
||||||
|
<view
|
||||||
|
class="uv-radio"
|
||||||
|
@tap.stop="wrapperClickHandler"
|
||||||
|
:style="[radioStyle]"
|
||||||
|
:class="[`uv-radio-label--${parentData.iconPlacement}`, parentData.borderBottom && parentData.placement === 'column' && 'uv-border-bottom']"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="uv-radio__icon-wrap"
|
||||||
|
@tap.stop="iconClickHandler"
|
||||||
|
:class="iconClasses"
|
||||||
|
:style="[iconWrapStyle]"
|
||||||
|
>
|
||||||
|
<slot name="icon">
|
||||||
|
<uv-icon
|
||||||
|
class="uv-radio__icon-wrap__icon"
|
||||||
|
name="checkbox-mark"
|
||||||
|
:size="elIconSize"
|
||||||
|
:color="elIconColor"
|
||||||
|
/>
|
||||||
|
</slot>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="uv-radio__label-wrap"
|
||||||
|
@tap.stop="labelClickHandler">
|
||||||
|
<slot>
|
||||||
|
<text
|
||||||
|
:style="{
|
||||||
|
color: elDisabled ? elInactiveColor : elLabelColor,
|
||||||
|
fontSize: elLabelSize,
|
||||||
|
lineHeight: elLabelSize
|
||||||
|
}"
|
||||||
|
>{{label}}</text>
|
||||||
|
</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';
|
||||||
|
/**
|
||||||
|
* radio 单选框
|
||||||
|
* @description 单选框用于有一个选择，用户只能选择其中一个的场景。搭配uv-radio-group使用
|
||||||
|
* @tutorial https://www.uvui.cn/components/radio.html
|
||||||
|
* @property {String | Number} name radio的名称
|
||||||
|
* @property {String} shape 形状，square为方形，circle为圆型
|
||||||
|
* @property {Boolean} disabled 是否禁用
|
||||||
|
* @property {String | Boolean} labelDisabled 是否禁止点击提示语选中单选框
|
||||||
|
* @property {String} activeColor 选中时的颜色，如设置parent的active-color将失效
|
||||||
|
* @property {String} inactiveColor 未选中的颜色
|
||||||
|
* @property {String | Number} iconSize 图标大小，单位px
|
||||||
|
* @property {String | Number} labelSize label字体大小，单位px
|
||||||
|
* @property {String | Number} label label提示文字，因为nvue下，直接slot进来的文字，由于特殊的结构，无法修改样式
|
||||||
|
* @property {String | Number} size 整体的大小
|
||||||
|
* @property {String} iconColor 图标颜色
|
||||||
|
* @property {String} labelColor label的颜色
|
||||||
|
* @property {Object} customStyle 组件的样式，对象形式
|
||||||
|
*
|
||||||
|
* @event {Function} change 某个radio状态发生变化时触发(选中状态)
|
||||||
|
* @example <uv-radio :labelDisabled="false">门掩黄昏，无计留春住</uv-radio>
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: "uv-radio",
|
||||||
|
|
||||||
|
mixins: [mpMixin, mixin, props],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
checked: false,
|
||||||
|
// 当你看到这段代码的时候，
|
||||||
|
// 父组件的默认值，因为头条小程序不支持在computed中使用this.parent.shape的形式
|
||||||
|
// 故只能使用如此方法
|
||||||
|
parentData: {
|
||||||
|
iconSize: 12,
|
||||||
|
labelSize: 14,
|
||||||
|
labelColor: '#303133',
|
||||||
|
labelDisabled: null,
|
||||||
|
disabled: null,
|
||||||
|
shape: null,
|
||||||
|
activeColor: null,
|
||||||
|
inactiveColor: null,
|
||||||
|
size: 18,
|
||||||
|
value: null,
|
||||||
|
modelValue: null,
|
||||||
|
iconColor: null,
|
||||||
|
placement: 'row',
|
||||||
|
borderBottom: false,
|
||||||
|
iconPlacement: 'left'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 是否禁用，如果父组件uv-raios-group禁用的话，将会忽略子组件的配置
|
||||||
|
elDisabled() {
|
||||||
|
return this.disabled !== '' ? this.disabled : this.parentData.disabled !== null ? this.parentData.disabled : false;
|
||||||
|
},
|
||||||
|
// 是否禁用label点击
|
||||||
|
elLabelDisabled() {
|
||||||
|
return this.labelDisabled !== '' ? this.labelDisabled : this.parentData.labelDisabled !== null ? this.parentData.labelDisabled :
|
||||||
|
false;
|
||||||
|
},
|
||||||
|
// 组件尺寸，对应size的值，默认值为21px
|
||||||
|
elSize() {
|
||||||
|
return this.size ? this.size : (this.parentData.size ? this.parentData.size : 21);
|
||||||
|
},
|
||||||
|
// 组件的勾选图标的尺寸，默认12px
|
||||||
|
elIconSize() {
|
||||||
|
return this.iconSize ? this.iconSize : (this.parentData.iconSize ? this.parentData.iconSize : 12);
|
||||||
|
},
|
||||||
|
// 组件选中激活时的颜色
|
||||||
|
elActiveColor() {
|
||||||
|
return this.activeColor ? this.activeColor : (this.parentData.activeColor ? this.parentData.activeColor : '#2979ff');
|
||||||
|
},
|
||||||
|
// 组件选未中激活时的颜色
|
||||||
|
elInactiveColor() {
|
||||||
|
return this.inactiveColor ? this.inactiveColor : (this.parentData.inactiveColor ? this.parentData.inactiveColor :
|
||||||
|
'#c8c9cc');
|
||||||
|
},
|
||||||
|
// label的颜色
|
||||||
|
elLabelColor() {
|
||||||
|
return this.labelColor ? this.labelColor : (this.parentData.labelColor ? this.parentData.labelColor : '#606266')
|
||||||
|
},
|
||||||
|
// 组件的形状
|
||||||
|
elShape() {
|
||||||
|
return this.shape ? this.shape : (this.parentData.shape ? this.parentData.shape : 'circle');
|
||||||
|
},
|
||||||
|
// label大小
|
||||||
|
elLabelSize() {
|
||||||
|
return this.$uv.addUnit(this.labelSize ? this.labelSize : (this.parentData.labelSize ? this.parentData.labelSize :
|
||||||
|
'15'))
|
||||||
|
},
|
||||||
|
elIconColor() {
|
||||||
|
const iconColor = this.iconColor ? this.iconColor : (this.parentData.iconColor ? this.parentData.iconColor :
|
||||||
|
'#ffffff');
|
||||||
|
// 图标的颜色
|
||||||
|
if (this.elDisabled) {
|
||||||
|
// disabled状态下，已勾选的radio图标改为elInactiveColor
|
||||||
|
return this.checked ? this.elInactiveColor : 'transparent'
|
||||||
|
} else {
|
||||||
|
return this.checked ? iconColor : 'transparent'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
iconClasses() {
|
||||||
|
let classes = []
|
||||||
|
// 组件的形状
|
||||||
|
classes.push('uv-radio__icon-wrap--' + this.elShape)
|
||||||
|
if (this.elDisabled) {
|
||||||
|
classes.push('uv-radio__icon-wrap--disabled')
|
||||||
|
}
|
||||||
|
if (this.checked && this.elDisabled) {
|
||||||
|
classes.push('uv-radio__icon-wrap--disabled--checked')
|
||||||
|
}
|
||||||
|
// 支付宝，头条小程序无法动态绑定一个数组类名，否则解析出来的结果会带有","，而导致失效
|
||||||
|
// #ifdef MP-ALIPAY || MP-TOUTIAO
|
||||||
|
classes = classes.join(' ')
|
||||||
|
// #endif
|
||||||
|
return classes
|
||||||
|
},
|
||||||
|
iconWrapStyle() {
|
||||||
|
// radio的整体样式
|
||||||
|
const style = {}
|
||||||
|
style.backgroundColor = this.checked && !this.elDisabled ? this.elActiveColor : '#ffffff'
|
||||||
|
style.borderColor = this.checked && !this.elDisabled ? this.elActiveColor : this.elInactiveColor
|
||||||
|
style.width = this.$uv.addUnit(this.elSize)
|
||||||
|
style.height = this.$uv.addUnit(this.elSize)
|
||||||
|
// 如果是图标在右边的话，移除它的右边距
|
||||||
|
if (this.parentData.iconPlacement === 'right') {
|
||||||
|
style.marginRight = 0
|
||||||
|
}
|
||||||
|
return style
|
||||||
|
},
|
||||||
|
radioStyle() {
|
||||||
|
const style = {}
|
||||||
|
if (this.parentData.borderBottom && this.parentData.placement === 'row') {
|
||||||
|
this.$uv.error('检测到您将borderBottom设置为true，需要同时将uv-radio-group的placement设置为column才有效')
|
||||||
|
}
|
||||||
|
// 当父组件设置了显示下边框并且排列形式为纵向时，给内容和边框之间加上一定间隔
|
||||||
|
if (this.parentData.borderBottom && this.parentData.placement === 'column') {
|
||||||
|
// ios像素密度高，需要多一点的距离
|
||||||
|
style.paddingBottom = this.$uv.os() === 'ios' ? '12px' : '8px'
|
||||||
|
}
|
||||||
|
return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
// 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用
|
||||||
|
this.updateParentData()
|
||||||
|
if (!this.parent) {
|
||||||
|
this.$uv.error('uv-radio必须搭配uv-radio-group组件使用')
|
||||||
|
}
|
||||||
|
// 设置初始化时，是否默认选中的状态
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
let parentValue = null;
|
||||||
|
// #ifdef VUE2
|
||||||
|
parentValue = this.parentData.value;
|
||||||
|
// #endif
|
||||||
|
// #ifdef VUE3
|
||||||
|
parentValue = this.parentData.modelValue;
|
||||||
|
// #endif
|
||||||
|
this.checked = this.name === parentValue
|
||||||
|
})
|
||||||
|
},
|
||||||
|
updateParentData() {
|
||||||
|
this.getParentData('uv-radio-group')
|
||||||
|
},
|
||||||
|
// 点击图标
|
||||||
|
iconClickHandler(e) {
|
||||||
|
this.preventEvent(e)
|
||||||
|
// 如果整体被禁用，不允许被点击
|
||||||
|
if (!this.elDisabled) {
|
||||||
|
this.setRadioCheckedStatus()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 横向两端排列时，点击组件即可触发选中事件
|
||||||
|
wrapperClickHandler(e) {
|
||||||
|
this.parentData.iconPlacement === 'right' && this.iconClickHandler(e)
|
||||||
|
},
|
||||||
|
// 点击label
|
||||||
|
labelClickHandler(e) {
|
||||||
|
this.preventEvent(e)
|
||||||
|
// 如果按钮整体被禁用或者label被禁用，则不允许点击文字修改状态
|
||||||
|
if (!this.elLabelDisabled && !this.elDisabled) {
|
||||||
|
this.setRadioCheckedStatus()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emitEvent() {
|
||||||
|
// uv-radio的checked不为true时(意味着未选中)，才发出事件，避免多次点击触发事件
|
||||||
|
if (!this.checked) {
|
||||||
|
this.$emit('change', this.name)
|
||||||
|
// 尝试调用uv-form的验证方法，进行一定延迟，否则微信小程序更新可能会不及时
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$uv.formValidate(this, 'change')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 改变组件选中状态
|
||||||
|
// 这里的改变的依据是，更改本组件的checked值为true，同时通过父组件遍历所有uv-radio实例
|
||||||
|
// 将本组件外的其他uv-radio的checked都设置为false(都被取消选中状态)，因而只剩下一个为选中状态
|
||||||
|
setRadioCheckedStatus() {
|
||||||
|
this.emitEvent()
|
||||||
|
// 将本组件标记为选中状态
|
||||||
|
this.checked = true
|
||||||
|
typeof this.parent.unCheckedOther === 'function' && this.parent.unCheckedOther(this)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$show-border: 1;
|
||||||
|
$show-border-bottom: 1;
|
||||||
|
@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
|
||||||
|
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
|
||||||
|
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
|
||||||
|
$uv-radio-label-wrap-padding-right: 6px !default;
|
||||||
|
$uv-radio-wrap-font-size: 20px !default;
|
||||||
|
$uv-radio-wrap-border-width: 1px !default;
|
||||||
|
$uv-radio-wrap-border-color: #c8c9cc !default;
|
||||||
|
$uv-radio-line-height: 0 !default;
|
||||||
|
$uv-radio-circle-border-radius: 100% !default;
|
||||||
|
$uv-radio-square-border-radius: 3px !default;
|
||||||
|
$uv-radio-checked-color: #fff !default;
|
||||||
|
$uv-radio-checked-background-color: red !default;
|
||||||
|
$uv-radio-checked-border-color: #2979ff !default;
|
||||||
|
$uv-radio-disabled-background-color: #ebedf0 !default;
|
||||||
|
$uv-radio-disabled--checked-color: #c8c9cc !default;
|
||||||
|
$uv-radio-label-margin-left: 5px !default;
|
||||||
|
$uv-radio-label-margin-right: 12px !default;
|
||||||
|
$uv-radio-label-color: $uv-content-color !default;
|
||||||
|
$uv-radio-label-font-size: 15px !default;
|
||||||
|
$uv-radio-label-disabled-color: #c8c9cc !default;
|
||||||
|
.uv-radio {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
@include flex(row);
|
||||||
|
/* #endif */
|
||||||
|
overflow: hidden;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
&-label--left {
|
||||||
|
flex-direction: row
|
||||||
|
}
|
||||||
|
&-label--right {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
justify-content: space-between
|
||||||
|
}
|
||||||
|
&__icon-wrap {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
box-sizing: border-box;
|
||||||
|
// nvue下，border-color过渡有问题
|
||||||
|
transition-property: border-color, background-color, color;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
/* #endif */
|
||||||
|
color: $uv-content-color;
|
||||||
|
@include flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: transparent;
|
||||||
|
text-align: center;
|
||||||
|
font-size: $uv-radio-wrap-font-size;
|
||||||
|
border-width: $uv-radio-wrap-border-width;
|
||||||
|
border-color: $uv-radio-wrap-border-color;
|
||||||
|
border-style: solid;
|
||||||
|
/* #ifdef MP-TOUTIAO */
|
||||||
|
// 头条小程序兼容性问题，需要设置行高为0，否则图标偏下
|
||||||
|
&__icon {
|
||||||
|
line-height: $uv-radio-line-height;
|
||||||
|
}
|
||||||
|
/* #endif */
|
||||||
|
&--circle {
|
||||||
|
border-radius: $uv-radio-circle-border-radius;
|
||||||
|
}
|
||||||
|
&--square {
|
||||||
|
border-radius: $uv-radio-square-border-radius;
|
||||||
|
}
|
||||||
|
&--checked {
|
||||||
|
color: $uv-radio-checked-color;
|
||||||
|
background-color: $uv-radio-checked-background-color;
|
||||||
|
border-color: $uv-radio-checked-border-color;
|
||||||
|
}
|
||||||
|
&--disabled {
|
||||||
|
background-color: $uv-radio-disabled-background-color !important;
|
||||||
|
}
|
||||||
|
&--disabled--checked {
|
||||||
|
color: $uv-radio-disabled--checked-color !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__label {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
word-wrap: break-word;
|
||||||
|
/* #endif */
|
||||||
|
margin-left: $uv-radio-label-margin-left;
|
||||||
|
margin-right: $uv-radio-label-margin-right;
|
||||||
|
color: $uv-radio-label-color;
|
||||||
|
font-size: $uv-radio-label-font-size;
|
||||||
|
&--disabled {
|
||||||
|
color: $uv-radio-label-disabled-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__label-wrap {
|
||||||
|
flex: 1;
|
||||||
|
padding-left: $uv-radio-label-wrap-padding-right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,88 @@
|
|||||||
|
{
|
||||||
|
"id": "uv-radio",
|
||||||
|
"displayName": "uv-radio 单选框 全面兼容vue3+2、app、h5、小程序等多端",
|
||||||
|
"version": "1.0.13",
|
||||||
|
"description": "uv-radio 单选框用于有一个选择，用户只能选择其中一个的场景。",
|
||||||
|
"keywords": [
|
||||||
|
"uv-radio",
|
||||||
|
"uvui",
|
||||||
|
"uv-ui",
|
||||||
|
"radio",
|
||||||
|
"单选框"
|
||||||
|
],
|
||||||
|
"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"
|
||||||
|
],
|
||||||
|
"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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
## Radio 单选框
|
||||||
|
|
||||||
|
> **组件名：uv-radio**
|
||||||
|
|
||||||
|
单选框用于有一个选择，用户只能选择其中一个的场景。
|
||||||
|
|
||||||
|
# <a href="https://www.uvui.cn/components/radio.html" target="_blank">查看文档</a>
|
||||||
|
|
||||||
|
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>（请不要 下载插件ZIP）</small>
|
||||||
|
|
||||||
|
### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||||
|
|
||||||
|
<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</a>
|
||||||
|
|
||||||
|
#### 如使用过程中有任何问题反馈，或者您对uv-ui有一些好的建议，欢迎加入uv-ui官方交流群：<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
|
||||||
Reference in New Issue
Block a user