v1.0
This commit is contained in:
hupeng
12
uni_modules/uv-switch/changelog.md
Normal file
12
uni_modules/uv-switch/changelog.md
Normal file
@ -0,0 +1,12 @@
|
||||
## 1.0.4（2023-08-23）
|
||||
1. 取消value传值，只能使用v-model传值，避免异步操作不生效的BUG
|
||||
## 1.0.3（2023-07-13）
|
||||
1. 修复 uv-switch设置value属性不生效的BUG
|
||||
## 1.0.2（2023-06-19）
|
||||
1. size属性兼容和单位一起使用
|
||||
|
||||
## 1.0.1（2023-05-16）
|
||||
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
|
||||
2. 优化部分功能
|
||||
## 1.0.0（2023-05-10）
|
||||
uv-switch 开关选择器
|
||||
58
uni_modules/uv-switch/components/uv-switch/props.js
Normal file
58
uni_modules/uv-switch/components/uv-switch/props.js
Normal file
@ -0,0 +1,58 @@
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: [Boolean, String, Number],
|
||||
default: false
|
||||
},
|
||||
modelValue: {
|
||||
type: [Boolean, String, Number],
|
||||
default: false
|
||||
},
|
||||
// 是否为加载中状态
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 是否为禁用装填
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 开关尺寸，单位px
|
||||
size: {
|
||||
type: [String, Number],
|
||||
default: 25
|
||||
},
|
||||
// 打开时的背景颜色
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#2979ff'
|
||||
},
|
||||
// 关闭时的背景颜色
|
||||
inactiveColor: {
|
||||
type: String,
|
||||
default: '#fff'
|
||||
},
|
||||
// switch打开时的值
|
||||
activeValue: {
|
||||
type: [String, Number, Boolean],
|
||||
default: true
|
||||
},
|
||||
// switch关闭时的值
|
||||
inactiveValue: {
|
||||
type: [String, Number, Boolean],
|
||||
default: false
|
||||
},
|
||||
// 是否开启异步变更，开启后需要手动控制输入值
|
||||
asyncChange: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 圆点与外边框的距离
|
||||
space: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
...uni.$uv?.props?.switch
|
||||
}
|
||||
}
|
||||
182
uni_modules/uv-switch/components/uv-switch/uv-switch.vue
Normal file
182
uni_modules/uv-switch/components/uv-switch/uv-switch.vue
Normal file
@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<view
|
||||
class="uv-switch"
|
||||
:class="[disabled && 'uv-switch--disabled']"
|
||||
:style="[switchStyle, $uv.addStyle(customStyle)]"
|
||||
@tap="clickHandler"
|
||||
>
|
||||
<view
|
||||
class="uv-switch__bg"
|
||||
:style="[bgStyle]"
|
||||
>
|
||||
</view>
|
||||
<view
|
||||
class="uv-switch__node"
|
||||
:class="[innerValue && 'uv-switch__node--on']"
|
||||
:style="[nodeStyle]"
|
||||
ref="uv-switch__node"
|
||||
>
|
||||
<uv-loading-icon
|
||||
:show="loading"
|
||||
mode="circle"
|
||||
timingFunction='linear'
|
||||
:color="innerValue ? activeColor : '#AAABAD'"
|
||||
:size="size * 0.6"
|
||||
/>
|
||||
</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';
|
||||
/**
|
||||
* switch 开关选择器
|
||||
* @description 选择开关一般用于只有两个选择，且只能选其一的场景。
|
||||
* @tutorial https://www.uvui.cn/components/switch.html
|
||||
* @property {Boolean} loading 是否处于加载中（默认 false ）
|
||||
* @property {Boolean} disabled 是否禁用（默认 false ）
|
||||
* @property {String | Number} size 开关尺寸，单位px （默认 25 ）
|
||||
* @property {String} activeColor 打开时的背景色 （默认 '#2979ff' ）
|
||||
* @property {String} inactiveColor 关闭时的背景色 （默认 '#ffffff' ）
|
||||
* @property {Boolean | String | Number} value 通过v-model双向绑定的值 （默认 false ）
|
||||
* @property {Boolean | String | Number} activeValue 打开选择器时通过change事件发出的值 （默认 true ）
|
||||
* @property {Boolean | String | Number} inactiveValue 关闭选择器时通过change事件发出的值 （默认 false ）
|
||||
* @property {Boolean} asyncChange 是否开启异步变更，开启后需要手动控制输入值 （默认 false ）
|
||||
* @property {String | Number} space 圆点与外边框的距离 （默认 0 ）
|
||||
* @property {Object} customStyle 定义需要用到的外部样式
|
||||
*
|
||||
* @event {Function} change 在switch打开或关闭时触发
|
||||
* @example <uv-switch v-model="checked" active-color="red" inactive-color="#eee"></uv-switch>
|
||||
*/
|
||||
export default {
|
||||
name: "uv-switch",
|
||||
mixins: [mpMixin, mixin, props],
|
||||
data() {
|
||||
return {
|
||||
bgColor: '#ffffff',
|
||||
innerValue: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(newVal) {
|
||||
if (newVal !== this.inactiveValue && newVal !== this.activeValue) {
|
||||
return this.$uv.error('v-model绑定的值必须为inactiveValue、activeValue二者之一')
|
||||
}
|
||||
this.innerValue = newVal;
|
||||
},
|
||||
modelValue(newVal) {
|
||||
if (newVal !== this.inactiveValue && newVal !== this.activeValue) {
|
||||
return this.$uv.error('v-model绑定的值必须为inactiveValue、activeValue二者之一')
|
||||
}
|
||||
this.innerValue = newVal;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.innerValue = this.value || this.modelValue;
|
||||
},
|
||||
computed: {
|
||||
isActive() {
|
||||
return this.innerValue === this.activeValue;
|
||||
},
|
||||
switchStyle() {
|
||||
let style = {}
|
||||
// 这里需要加2，是为了腾出边框的距离，否则圆点node会和外边框紧贴在一起
|
||||
style.width = this.$uv.addUnit(this.$uv.getPx(this.size) * 2 + 2)
|
||||
style.height = this.$uv.addUnit(this.$uv.getPx(this.size) + 2)
|
||||
// 如果自定义了“非激活”演示，name边框颜色设置为透明(跟非激活颜色一致)
|
||||
// 这里不能简单的设置为非激活的颜色，否则打开状态时，会有边框，所以需要透明
|
||||
if (this.customInactiveColor) {
|
||||
style.borderColor = 'rgba(0, 0, 0, 0)'
|
||||
}
|
||||
style.backgroundColor = this.isActive ? this.activeColor : this.inactiveColor
|
||||
return style;
|
||||
},
|
||||
nodeStyle() {
|
||||
let style = {}
|
||||
// 如果自定义非激活颜色，将node圆点的尺寸减少两个像素，让其与外边框距离更大一点
|
||||
style.width = this.$uv.addUnit(this.$uv.getPx(this.size) - this.space)
|
||||
style.height = this.$uv.addUnit(this.$uv.getPx(this.size) - this.space)
|
||||
const translateX = this.isActive ? this.$uv.addUnit(this.space) : this.$uv.addUnit(this.$uv.getPx(this.size));
|
||||
style.transform = `translateX(-${translateX})`
|
||||
return style
|
||||
},
|
||||
bgStyle() {
|
||||
let style = {}
|
||||
// 这里配置一个多余的元素在HTML中，是为了让switch切换时，有更良好的背景色扩充体验(见实际效果)
|
||||
style.width = this.$uv.addUnit(this.$uv.getPx(this.size) * 2 - this.$uv.getPx(this.size) / 2)
|
||||
style.height = this.$uv.addUnit(this.$uv.getPx(this.size))
|
||||
style.backgroundColor = this.inactiveColor
|
||||
// 打开时，让此元素收缩，否则反之
|
||||
style.transform = `scale(${this.isActive ? 0 : 1})`
|
||||
return style
|
||||
},
|
||||
customInactiveColor() {
|
||||
// 之所以需要判断是否自定义了“非激活”颜色，是为了让node圆点离外边框更宽一点的距离
|
||||
return this.inactiveColor !== '#fff' && this.inactiveColor !== '#ffffff'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickHandler() {
|
||||
if (!this.disabled && !this.loading) {
|
||||
const oldValue = this.isActive ? this.inactiveValue : this.activeValue
|
||||
if (!this.asyncChange) {
|
||||
this.$emit('input', oldValue)
|
||||
this.$emit('update:modelValue', oldValue)
|
||||
}
|
||||
// 放到下一个生命周期，因为双向绑定的value修改父组件状态需要时间，且是异步的
|
||||
this.$nextTick(() => {
|
||||
this.$emit('change', oldValue)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
|
||||
.uv-switch {
|
||||
@include flex(row);
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
border-width: 1px;
|
||||
border-radius: 100px;
|
||||
transition: background-color 0.4s;
|
||||
border-color: rgba(0, 0, 0, 0.12);
|
||||
border-style: solid;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
// 由于weex为阿里逗着玩的KPI项目，导致bug奇多，这必须要写这一行，
|
||||
// 否则在iOS上，点击页面任意地方，都会触发switch的点击事件
|
||||
overflow: hidden;
|
||||
&__node {
|
||||
@include flex(row);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 100px;
|
||||
background-color: #fff;
|
||||
border-radius: 100px;
|
||||
box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.25);
|
||||
transition-property: transform;
|
||||
transition-duration: 0.4s;
|
||||
transition-timing-function: cubic-bezier(0.3, 1.05, 0.4, 1.05);
|
||||
}
|
||||
&__bg {
|
||||
position: absolute;
|
||||
border-radius: 100px;
|
||||
background-color: #FFFFFF;
|
||||
transition-property: transform;
|
||||
transition-duration: 0.4s;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
&--disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
88
uni_modules/uv-switch/package.json
Normal file
88
uni_modules/uv-switch/package.json
Normal file
@ -0,0 +1,88 @@
|
||||
{
|
||||
"id": "uv-switch",
|
||||
"displayName": "uv-switch 开关选择器 全面兼容vue3+2、app、h5、小程序等多端",
|
||||
"version": "1.0.4",
|
||||
"description": "选择开关用于在打开和关闭状态之间进行切换，支持异步操作。",
|
||||
"keywords": [
|
||||
"uv-switch",
|
||||
"uvui",
|
||||
"uv-ui",
|
||||
"switch",
|
||||
"开关选择器"
|
||||
],
|
||||
"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-loading-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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
19
uni_modules/uv-switch/readme.md
Normal file
19
uni_modules/uv-switch/readme.md
Normal file
@ -0,0 +1,19 @@
|
||||
## Switch 开关选择器
|
||||
|
||||
> **组件名：uv-switch**
|
||||
|
||||
选择开关用于在打开和关闭状态之间进行切换，支持异步操作。
|
||||
|
||||
# <a href="https://www.uvui.cn/components/switch.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