123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111 |
- <style lang="less">
- .component-switch-main {
- // width: 96rpx;
- // height: 48rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .component-switch {
- background: #37C3C4;
- border-radius: 12px;
- display: inline-block;
- box-sizing: border-box;
- position: relative;
- cursor: pointer;
- transition: background-color 0.3s;
- &.disabled {
- cursor: not-allowed;
- opacity: 0.5;
- }
- }
- .component-switch .checked-circle {
- position: absolute;
- top: 50%;
- left: -1px;
- transform: translate(0, -50%);
- transition: transform 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
- border-radius: 50%;
- background: #ffffff;
- border: 1px solid rgba(196, 196, 196, 1);
- box-sizing: border-box;
- box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.03);
- &.circle-true {
- left: 1px;
- }
- }
- .component-switch.checked .checked-circle {
- transform: translate(100%, -50%);
- }
- </style>
- <template>
- <div
- class="component-switch-main"
- v-on:click.stop="changChecked"
- >
- <div
- class="component-switch"
- style="{{'background-color:'+(checked? defaultActiveColor: defaultInactiveColor)+';'+'width:'+width+'rpx;height:'+ height+'rpx;'}}"
- :class="{'checked': checked,'disabled':disable}"
- >
- <div
- class="checked-circle"
- :class="{'circle-true': checked}"
- style="{{ 'width:'+height+'rpx;height:'+ height+'rpx;' }}"
- ></div>
- </div>
- </div>
- </template>
- <script>
- import wepy from '@wepy/core'
- wepy.component({
- data: {
- defaultInactiveColor: 'rgba(196, 196, 196, 0.2)',
- defaultActiveColor: '#37C3C4',
- disable: false
- },
- props: {
- height: {
- type: Number,
- default: 48
- }, // 按钮的宽高
- width: {
- type: Number,
- default: 96
- }, // 圆圈宽高
- checked: Boolean,
- eqTitle: String
- },
- computed: {
- confirmText() {
- const text = this.checked ? '关闭' : '开启'
- return text
- }
- },
- watch: {
- checked() {
- this.disable = false
- }
- },
- methods: {
- changChecked() {
- this.vibrateShort()
- this.$emit('component-switch-change', !this.checked)
- },
- vibrateShort() {
- if (wx.canIUse('vibrateShort')) {
- wx.vibrateShort()
- } else {
- wx.vibrateLong()
- }
- }
- }
- })
- </script>
|