课程学习页面绘制
This commit is contained in:
yanghang
+2
-2
@@ -9,8 +9,8 @@ ENV = 'development'
|
||||
# VITE_APP_BASE_API_Url = 'http://25.64.16.133:9786'
|
||||
|
||||
|
||||
# VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7001'
|
||||
VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7001'
|
||||
|
||||
app入口
|
||||
VITE_APP_BASE_API_Url = 'http://25.18.122.65:7001'
|
||||
# VITE_APP_BASE_API_Url = 'http://25.18.122.65:7001'
|
||||
|
||||
|
||||
+25
-6
@@ -39,6 +39,29 @@ export const uploadFile = (file, data) => {
|
||||
});
|
||||
};
|
||||
|
||||
// 对象存储下载 /traoss/tras3/show/{文件ID}
|
||||
export function downloadFile(id) {
|
||||
const token = getToken();
|
||||
const header = {
|
||||
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
|
||||
};
|
||||
if (token)
|
||||
header['summary'] = token
|
||||
let baseUrl = get_base_url();
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.downloadFile({
|
||||
url: `${baseUrl}/traoss/tras3/show/${id}`,
|
||||
header,
|
||||
success(result) {
|
||||
resolve(result)
|
||||
},
|
||||
fail(error) {
|
||||
reject(new Error(error));
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 对象存储预览 /traoss/tras3/show/{文件ID}
|
||||
export function previewFile(id, responseType = 'arraybuffer') {
|
||||
@@ -56,11 +79,7 @@ export function previewFile(id, responseType = 'arraybuffer') {
|
||||
header,
|
||||
responseType,
|
||||
success(result) {
|
||||
console.log(result)
|
||||
let _header = result.header['content-type'].split(';')[0]
|
||||
// let base64 = new Blob([result.data],{type:result.header['content-type'].split(';')[0]})
|
||||
let base64 = `data:${_header};base64,` + uni.arrayBufferToBase64(result.data)
|
||||
resolve(base64)
|
||||
resolve(result)
|
||||
},
|
||||
fail(error) {
|
||||
reject(new Error(error));
|
||||
@@ -87,7 +106,7 @@ export function previewCacheThumbImage(id, width = 30, height = 30) {
|
||||
let base64 = `data:image/png;base64,` + result.data.body
|
||||
resolve(base64)
|
||||
}else{
|
||||
reject(new Error(result.data.message))
|
||||
reject({error:result.data.message})
|
||||
}
|
||||
},
|
||||
fail(error) {
|
||||
|
||||
@@ -48,8 +48,10 @@
|
||||
this.imgUrlShow = res;
|
||||
});
|
||||
}else{
|
||||
previewFile(id).then((res) => {
|
||||
this.imgUrlShow = res;
|
||||
previewFile(id).then((result) => {
|
||||
let _header = result.header['content-type'].split(';')[0]
|
||||
let base64 = `data:${_header};base64,` + uni.arrayBufferToBase64(result.data)
|
||||
this.imgUrlShow = base64;
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
<template>
|
||||
<video :src="imgUrlShow" controls></video>
|
||||
<!-- <image class="img" src="@/static/images/test/1.png"></image> -->
|
||||
<view class="video-view-box">
|
||||
<video class="video-cont" v-if="imgUrlShow" :src="imgUrlShow" controls></video>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {previewFile} from'@/api/common.js'
|
||||
import { downloadFile } from'@/api/common.js'
|
||||
export default {
|
||||
name:"image-preview",
|
||||
name:"video-preview",
|
||||
props:{
|
||||
imgId:{
|
||||
default:'',
|
||||
@@ -28,28 +29,13 @@
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
imgUrlShow: {
|
||||
handler(newval, oldval) {
|
||||
if (oldval) {
|
||||
URL.revokeObjectURL(oldval);
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPreviewUrlBlob(id) {
|
||||
// this.imgUrlShow = '@/static/images/index/message_b.png'
|
||||
previewFile(id).then((res) => {
|
||||
this.imgUrlShow = URL.createObjectURL(res);
|
||||
// const reader = new FileReader();
|
||||
// reader.readAsDataURL(res)
|
||||
// reader.onloadend = () => {
|
||||
// this.imgUrlShow = reader.result;
|
||||
// }
|
||||
});
|
||||
downloadFile(id).then(res=>{
|
||||
this.imgUrlShow = res.tempFilePath
|
||||
})
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
@@ -58,12 +44,17 @@
|
||||
}
|
||||
this.watching = true
|
||||
},
|
||||
beforeDestroy() {
|
||||
URL.revokeObjectURL(this.imgUrlShow);
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.video-view-box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #eee;
|
||||
}
|
||||
.video-view-box .video-cont{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -277,6 +277,7 @@ import { onMounted, ref, computed } from 'vue'
|
||||
// 跳转 课程详情
|
||||
const toCourseDetail = (item) => {
|
||||
common.navigateTo('/pages/courseDetail/index?crsNum=' + item.crsNum)
|
||||
// common.navigateTo('/pages/course/study?crsNum=' + item.crsNum)
|
||||
}
|
||||
onMounted(()=>{
|
||||
getCourseTypeListApi().then(res=>{
|
||||
|
||||
+278
-9
@@ -1,5 +1,4 @@
|
||||
<template>
|
||||
|
||||
<view class="course-study max_page">
|
||||
<view class="top-bg"></view>
|
||||
<view class="bot-bg"></view>
|
||||
@@ -8,42 +7,160 @@
|
||||
<uv-icon class="arrow-icon" name="arrow-left" @click="common.navigateBack()"/>
|
||||
语言选择，开启学习之旅
|
||||
</view>
|
||||
<!-- <video v-if="videoUrlShow" :src="videoUrlShow" controls></video> -->
|
||||
<view class="voice-list">
|
||||
<view class="voice-item">
|
||||
|
||||
<uv-radio-group v-model="chooseVoiceId">
|
||||
<view class="voice-item" v-for="item in 5" >
|
||||
<view class="avatar-box">
|
||||
<ImagePreview class="img-box" :imgId="item+''" :isCache="true"></ImagePreview>
|
||||
</view>
|
||||
<view class="right-cont">
|
||||
<view class="right-name">李想</view>
|
||||
<view class="right-desc">描述：产品</view>
|
||||
<view class="audio-box">
|
||||
<view class="talking-gif"></view>
|
||||
<view class="play-btn">
|
||||
<image class="icon" v-if="false" src="@/static/images/course/play.png" style="width: 100%;height: 100%;"></image>
|
||||
<image class="icon" src="@/static/images/course/pause-focus.png" style="width: 100%;height: 100%;"></image>
|
||||
</view>
|
||||
<view class="talking-time">00:26</view>
|
||||
</view>
|
||||
</view>
|
||||
<uv-radio :name="item" class="radio-box"/>
|
||||
</view>
|
||||
</uv-radio-group>
|
||||
<view class="start-btns" @click="step+=1">
|
||||
开启学习之旅
|
||||
<!-- <view class="touch-btn">开启学习之旅</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="course-study-body" v-show="step === 2">
|
||||
<view class="course-study-body" v-show="step === 2" @click="playRecord">
|
||||
<view class="body-title">
|
||||
<uv-icon class="arrow-icon" name="arrow-left" @click="common.navigateBack()"/>
|
||||
课程学习
|
||||
</view>
|
||||
<view class="talking-list">
|
||||
<view class="study-num">1/20</view>
|
||||
{{audioPath}}
|
||||
<TalkingItem class="talking-item" v-for="item in 8" :type="item%2"></TalkingItem>
|
||||
</view>
|
||||
<view class="talk-btns">
|
||||
<view class="touch-btn">按住说话</view>
|
||||
<view
|
||||
class="touch-btn"
|
||||
@touchstart="showOverlayTalking"
|
||||
@touchend="hideOverlayTalking"
|
||||
@touchmove="handleMove"
|
||||
>按住说话</view>
|
||||
</view>
|
||||
</view>
|
||||
<uv-overlay :show="showTalkingModel" opacity=".9" @click="showTalkingModel = false">
|
||||
<view class="overlay-box">
|
||||
<view class="circle-bg-box">
|
||||
<view class="icon-box">
|
||||
<image src="/src/static/images/course/talk-icon.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tips-box">松开发送</view>
|
||||
<view class="btns-box">
|
||||
<view :class="['close-btn',isOut?'is-out':'']" >取消
|
||||
<image class="btn-box" v-if="!isOut" src="/src/static/images/course/close.png" mode=""></image>
|
||||
<image class="btn-box" v-else src="/src/static/images/course/close-active.png" mode=""></image>
|
||||
</view>
|
||||
<!-- <view class="translate-btn">转文字 发送
|
||||
<image class="btn-box" src="/src/static/images/course/to-text.png" mode=""></image>
|
||||
</view> -->
|
||||
</view>
|
||||
<!-- <view class="talk-dialog">
|
||||
<view class="voice-gif"></view>
|
||||
</view> -->
|
||||
</view>
|
||||
</uv-overlay>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { reactive, ref, computed, unref, onMounted } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { previewFile, downloadFile } from "@/api/common.js"
|
||||
import common from '@/common/common';
|
||||
import TalkingItem from '@/pages/course/components/talkingItem.vue'
|
||||
import ImagePreview from '@/components/image-preview/image-preview.vue'
|
||||
const crsNum = ref('');
|
||||
const step = ref(1)
|
||||
const step = ref(2)
|
||||
const chooseVoiceId = ref('')
|
||||
const videoUrlShow = ref('')
|
||||
const getData = async () => {
|
||||
console.log(crsNum.value)
|
||||
// downloadFile('S3F0250181220722025062409312400000331622').then(res=>{
|
||||
// console.log(res)
|
||||
// audioObj.value = uni.createInnerAudioContext()
|
||||
// audioObj.value.src = res.tempFilePath
|
||||
// })
|
||||
// downloadFile('S3F0250640161332025061618052000000267276').then(res=>{
|
||||
// videoUrlShow.value = res.tempFilePath
|
||||
// })
|
||||
};
|
||||
onLoad((params) => {
|
||||
crsNum.value = params.crsNum;
|
||||
getData();
|
||||
});
|
||||
const showTalkingModel = ref(false)
|
||||
// 录音
|
||||
const audioPath = ref('')
|
||||
const audioObj = uni.createInnerAudioContext()
|
||||
const recordObj = uni.getRecorderManager()
|
||||
const initRecord = () => {
|
||||
unref(recordObj)?.onStop((res)=>{
|
||||
audioPath.value = res.tempFilePath
|
||||
})
|
||||
}
|
||||
const startRecord = () => {
|
||||
unref(recordObj).start()
|
||||
}
|
||||
const stopRecord = () => {
|
||||
unref(recordObj).stop()
|
||||
}
|
||||
const playRecord = () => {
|
||||
audioObj.src = audioPath.value
|
||||
unref(audioObj).play()
|
||||
}
|
||||
// 录音结束
|
||||
|
||||
// 记录 按下移动位置
|
||||
const touchX = ref(0)
|
||||
const touchY = ref(0)
|
||||
const baseY = ref(0)
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
const widowHeight = systemInfo.windowHeight
|
||||
// 计算是否超出按下盒子位置
|
||||
const isOut = computed(() => {
|
||||
let moveVal = (widowHeight - baseY.value)/165 * 234
|
||||
return (widowHeight - moveVal) > touchY.value
|
||||
})
|
||||
const showOverlayTalking = (obj) => {
|
||||
showTalkingModel.value = true
|
||||
touchX.value = obj.changedTouches[0].pageX
|
||||
touchY.value = obj.changedTouches[0].pageY
|
||||
baseY.value = obj.currentTarget.offsetTop
|
||||
startRecord()
|
||||
}
|
||||
const hideOverlayTalking = (obj) => {
|
||||
showTalkingModel.value = false
|
||||
if(isOut.value){
|
||||
console.log('取消发送')
|
||||
}else{
|
||||
console.log('发送')
|
||||
stopRecord()
|
||||
}
|
||||
}
|
||||
|
||||
const handleMove = (obj) => {
|
||||
touchX.value = obj.changedTouches[0].pageX
|
||||
touchY.value = obj.changedTouches[0].pageY
|
||||
}
|
||||
onMounted(()=>{
|
||||
initRecord()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@@ -123,8 +240,160 @@ onLoad((params) => {
|
||||
.voice-list{
|
||||
flex:1;
|
||||
overflow-y: auto;
|
||||
padding: 30rpx;
|
||||
padding: 10rpx 40rpx 30rpx;
|
||||
.voice-item{
|
||||
min-height: 246rpx;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
padding: 25rpx;
|
||||
position: relative;
|
||||
&:not(:last-child){
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
.avatar-box{
|
||||
width: 160rpx;
|
||||
height: 207rpx;
|
||||
margin-right: 20rpx;
|
||||
background-color: #ccc;
|
||||
.img-box{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.right-cont{
|
||||
flex:1;
|
||||
.right-name{
|
||||
line-height: 40rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
margin-bottom: 25rpx;
|
||||
}
|
||||
.right-desc{
|
||||
line-height: 38rpx;
|
||||
font-size: 25rpx;
|
||||
color: #999;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.audio-box{
|
||||
width: 90%;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
background-color: #eaf2ff;
|
||||
padding: 15rpx 25rpx;
|
||||
overflow: hidden;
|
||||
.talking-gif{
|
||||
width: 140rpx;
|
||||
height: 40rpx;
|
||||
background-color: #ccc;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
}
|
||||
.talking-time{
|
||||
float: right;
|
||||
text-align: right;
|
||||
line-height: 40rpx;
|
||||
font-size: 23rpx;
|
||||
color: #b1bbd3;
|
||||
}
|
||||
.play-btn{
|
||||
float:right;
|
||||
width: 35rpx;
|
||||
height: 40rpx;
|
||||
padding-top:2rpx;
|
||||
line-height: 35rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.radio-box{
|
||||
position: absolute;
|
||||
right: 40rpx;
|
||||
top: 40rpx;
|
||||
}
|
||||
}
|
||||
.start-btns{
|
||||
margin-top:20rpx;
|
||||
height: 80rpx;
|
||||
width: 100%;
|
||||
background-color: #06f;
|
||||
color:#fff;
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.overlay-box{
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
// justify-content: flex-end;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.circle-bg-box{
|
||||
height: 234rpx;
|
||||
background: url(@/static/images/course/talking.png) no-repeat;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
.icon-box{
|
||||
position: absolute;
|
||||
left:50%;
|
||||
top: 50%;
|
||||
margin-left: -17rpx;
|
||||
margin-top: -24rpx;
|
||||
width: 34rpx;
|
||||
height: 48rpx;
|
||||
image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tips-box{
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
color:#c0c0c0;
|
||||
text-align: center;
|
||||
margin: 12rpx 0 24rpx;
|
||||
}
|
||||
.btns-box{
|
||||
height: 270rpx;
|
||||
// padding: 0 120rpx;
|
||||
width: 154rpx;
|
||||
margin: 0 auto 100rpx;
|
||||
overflow: hidden;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
line-height: 116rpx;
|
||||
.close-btn{
|
||||
float: left;
|
||||
height: 100%;
|
||||
width: 154rpx;
|
||||
overflow: hidden;
|
||||
color:#999;
|
||||
&.is-out{
|
||||
color:#fff;
|
||||
}
|
||||
}
|
||||
.translate-btn{
|
||||
float: right;
|
||||
height: 100%;
|
||||
width: 154rpx;
|
||||
overflow: hidden;
|
||||
color:#999;
|
||||
}
|
||||
.btn-box{
|
||||
width: 100%;
|
||||
height: 154rpx;
|
||||
}
|
||||
}
|
||||
.talk-dialog{
|
||||
width: 506rpx;
|
||||
height: 234rpx;
|
||||
margin: 0 auto;
|
||||
background-color: #06f;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
@@ -0,0 +1,9 @@
|
||||
## 1.0.3（2023-07-02）
|
||||
uv-overlay 由于弹出层uv-transition的修改，组件内部做了相应的修改，参数不变。
|
||||
## 1.0.2（2023-06-29）
|
||||
1. 优化，H5端禁止穿透滚动
|
||||
## 1.0.1（2023-05-16）
|
||||
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
|
||||
2. 优化部分功能
|
||||
## 1.0.0（2023-05-10）
|
||||
1. 新增uv-overlay组件
|
||||
@@ -0,0 +1,25 @@
|
||||
export default {
|
||||
props: {
|
||||
// 是否显示遮罩
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 层级z-index
|
||||
zIndex: {
|
||||
type: [String, Number],
|
||||
default: 10070
|
||||
},
|
||||
// 遮罩的过渡时间，单位为ms
|
||||
duration: {
|
||||
type: [String, Number],
|
||||
default: 300
|
||||
},
|
||||
// 不透明度值，当做rgba的第四个参数
|
||||
opacity: {
|
||||
type: [String, Number],
|
||||
default: 0.5
|
||||
},
|
||||
...uni.$uv?.props?.overlay
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<uv-transition
|
||||
:show="show"
|
||||
mode="fade"
|
||||
custom-class="uv-overlay"
|
||||
:duration="duration"
|
||||
:custom-style="overlayStyle"
|
||||
@click="clickHandler"
|
||||
@touchmove.stop.prevent="clear"
|
||||
>
|
||||
<slot />
|
||||
</uv-transition>
|
||||
</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';
|
||||
|
||||
/**
|
||||
* overlay 遮罩
|
||||
* @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
|
||||
* @tutorial https://www.uvui.cn/components/overlay.html
|
||||
* @property {Boolean} show 是否显示遮罩（默认 false ）
|
||||
* @property {String | Number} zIndex zIndex 层级（默认 10070 ）
|
||||
* @property {String | Number} duration 动画时长，单位毫秒（默认 300 ）
|
||||
* @property {String | Number} opacity 不透明度值，当做rgba的第四个参数 （默认 0.5 ）
|
||||
* @property {Object} customStyle 定义需要用到的外部样式
|
||||
* @event {Function} click 点击遮罩发送事件
|
||||
* @example <uv-overlay :show="show" @click="show = false"></uv-overlay>
|
||||
*/
|
||||
export default {
|
||||
name: "uv-overlay",
|
||||
emits: ['click'],
|
||||
mixins: [mpMixin, mixin, props],
|
||||
watch: {
|
||||
show(newVal){
|
||||
// #ifdef H5
|
||||
if(newVal){
|
||||
document.querySelector('body').style.overflow = 'hidden';
|
||||
}else{
|
||||
document.querySelector('body').style.overflow = '';
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
overlayStyle() {
|
||||
const style = {
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
zIndex: this.zIndex,
|
||||
bottom: 0,
|
||||
'background-color': `rgba(0, 0, 0, ${this.opacity})`
|
||||
}
|
||||
return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickHandler() {
|
||||
this.$emit('click')
|
||||
},
|
||||
clear() {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
/* #ifndef APP-NVUE */
|
||||
$uv-overlay-top:0 !default;
|
||||
$uv-overlay-left:0 !default;
|
||||
$uv-overlay-width:100% !default;
|
||||
$uv-overlay-height:100% !default;
|
||||
$uv-overlay-background-color:rgba(0, 0, 0, .7) !default;
|
||||
.uv-overlay {
|
||||
position: fixed;
|
||||
top:$uv-overlay-top;
|
||||
left:$uv-overlay-left;
|
||||
width: $uv-overlay-width;
|
||||
height:$uv-overlay-height;
|
||||
background-color:$uv-overlay-background-color;
|
||||
}
|
||||
/* #endif */
|
||||
</style>
|
||||
@@ -0,0 +1,88 @@
|
||||
{
|
||||
"id": "uv-overlay",
|
||||
"displayName": "uv-overlay 遮罩层 全面兼容小程序、nvue、vue2、vue3等多端",
|
||||
"version": "1.0.3",
|
||||
"description": "uv-overlay 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景，uv-popup、uv-toast、uv-tooltip等组件就是用了该组件。",
|
||||
"keywords": [
|
||||
"uv-overlay",
|
||||
"uvui",
|
||||
"uv-ui",
|
||||
"overlay",
|
||||
"遮罩层"
|
||||
],
|
||||
"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-transition"
|
||||
],
|
||||
"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,11 @@
|
||||
## Overlay 遮罩层
|
||||
|
||||
> **组件名：uv-overlay**
|
||||
|
||||
创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景，uv-popup、uv-toast、uv-tooltip等组件就是用了该组件。
|
||||
|
||||
### <a href="https://www.uvui.cn/components/overlay.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>
|
||||
@@ -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