index.vue 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <template>
  2. <uni-shadow-root class="weapp-lib-switch-index"><view :class="(utils.bem('switch', { on: checked === activeValue, disabled }))+' custom-class'" :style="computed.rootStyle({ size, checked, activeColor, inactiveColor, activeValue })" @click="onClick">
  3. <view class="van-switch__node node-class">
  4. <van-loading v-if="loading" :color="computed.loadingColor({ checked, activeColor, inactiveColor, activeValue })" custom-class="van-switch__loading"></van-loading>
  5. </view>
  6. </view></uni-shadow-root>
  7. </template>
  8. <wxs src="../wxs/utils.wxs" module="utils"></wxs><wxs src="./index.wxs" module="computed"></wxs>
  9. <script>
  10. import VanLoading from '../loading/index.vue'
  11. global['__wxVueOptions'] = {components:{'van-loading': VanLoading}}
  12. global['__wxRoute'] = 'weapp/lib/switch/index'
  13. "use strict";
  14. Object.defineProperty(exports, "__esModule", { value: true });
  15. var component_1 = require("../common/component");
  16. (0, component_1.VantComponent)({
  17. field: true,
  18. classes: ['node-class'],
  19. props: {
  20. checked: null,
  21. loading: Boolean,
  22. disabled: Boolean,
  23. activeColor: String,
  24. inactiveColor: String,
  25. size: {
  26. type: String,
  27. value: '30',
  28. },
  29. activeValue: {
  30. type: null,
  31. value: true,
  32. },
  33. inactiveValue: {
  34. type: null,
  35. value: false,
  36. },
  37. },
  38. methods: {
  39. onClick: function () {
  40. var _a = this.data, activeValue = _a.activeValue, inactiveValue = _a.inactiveValue, disabled = _a.disabled, loading = _a.loading;
  41. if (disabled || loading) {
  42. return;
  43. }
  44. var checked = this.data.checked === activeValue;
  45. var value = checked ? inactiveValue : activeValue;
  46. this.$emit('input', value);
  47. this.$emit('change', value);
  48. },
  49. },
  50. });
  51. export default global['__wxComponents']['weapp/lib/switch/index']
  52. </script>
  53. <style platform="mp-weixin">
  54. @import '../common/index.css';.van-switch{background-color:var(--switch-background-color,#fff);border:var(--switch-border,1px solid rgba(0,0,0,.1));border-radius:var(--switch-node-size,1em);box-sizing:initial;display:inline-block;height:var(--switch-height,1em);position:relative;transition:background-color var(--switch-transition-duration,.3s);width:var(--switch-width,2em)}.van-switch__node{background-color:var(--switch-node-background-color,#fff);border-radius:100%;box-shadow:var(--switch-node-box-shadow,0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05));height:var(--switch-node-size,1em);left:0;position:absolute;top:0;transition:var(--switch-transition-duration,.3s) cubic-bezier(.3,1.05,.4,1.05);width:var(--switch-node-size,1em);z-index:var(--switch-node-z-index,1)}.van-switch__loading{height:50%;left:25%;position:absolute!important;top:25%;width:50%}.van-switch--on{background-color:var(--switch-on-background-color,#1989fa)}.van-switch--on .van-switch__node{transform:translateX(calc(var(--switch-width, 2em) - var(--switch-node-size, 1em)))}.van-switch--disabled{opacity:var(--switch-disabled-opacity,.4)}
  55. </style>