vdesign-ui 0.2.6 → 0.2.7

package/dist/components/popup/index.vue

@@ -0,0 +1,243 @@
+<template>
+  <div>
+    <!-- 遮罩层 -->
+    <div
+      v-if="overlay && value"
+      class="popup-overlay"
+      :style="overlayCustomStyle"
+      @click="onClickOverlay"
+    ></div>
+
+    <!-- 弹出层 -->
+    <transition :name="transitionName">
+      <div
+       v-if="value"
+        :class="['popup', positionClass]"
+        :style="[popupStyle, transitionStyle]"
+      >
+        <slot></slot>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Popup',
+  props: {
+    // 弹出位置，可选值：'top'、'bottom'、'left'、'right'、'center'
+    position: {
+      type: String,
+      default: 'center',
+    },
+    // 动画持续时间，单位毫秒
+    duration: {
+      type: Number,
+      default: 300,
+    },
+    // 指定挂载的容器，可以是选择器字符串或返回元素的函数
+    getContainer: {
+      type: [String, Function],
+      default: 'body',
+    },
+    // 是否锁定滚动
+    lockScroll: {
+      type: Boolean,
+      default: true,
+    },
+    // 是否适配底部安全区（针对全面屏手机）
+    safeAreaInsetBottom: {
+      type: Boolean,
+      default: false,
+    },
+    // 控制弹层显示或隐藏，支持 v-model 双向绑定
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否显示遮罩层
+    overlay: {
+      type: Boolean,
+      default: true,
+    },
+    // 遮罩层的自定义样式
+    overlayStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 是否点击遮罩层关闭弹出层
+    closeOnClickOverlay: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    // 根据 position 属性计算对应的类名
+    positionClass() {
+      return `popup-${this.position}`;
+    },
+    // 根据 position 属性计算对应的过渡名称
+    transitionName() {
+      return `popup-slide-${this.position}`;
+    },
+    // 根据 safeAreaInsetBottom 属性计算弹出层的样式
+    popupStyle() {
+      const style = {};
+      if (this.safeAreaInsetBottom && (this.position === 'bottom' || this.position === 'center')) {
+        style.paddingBottom = 'env(safe-area-inset-bottom)';
+      }
+      return style;
+    },
+    // 动态设置过渡持续时间的样式
+    transitionStyle() {
+      return {
+        transitionDuration: `${this.duration}ms`,
+      };
+    },
+    // 合并遮罩层的自定义样式
+    overlayCustomStyle() {
+      return Object.assign(
+        {
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        },
+        this.overlayStyle
+      );
+    },
+  },
+  watch: {
+    // 监听 value 属性的变化，控制弹出层的显示和隐藏
+    value(val) {
+      if (val) {
+        this.openPopup();
+      } else {
+        this.closePopup();
+      }
+    },
+  },
+  mounted() {
+    // 组件挂载时，根据初始的 value 值决定是否打开弹出层
+    if (this.value) {
+      this.openPopup();
+    }
+  },
+  methods: {
+    // 打开弹出层
+    openPopup() {
+      if (this.lockScroll) {
+        document.body.style.overflow = 'hidden';
+      }
+      this.appendToContainer();
+    },
+    // 关闭弹出层
+    closePopup() {
+      if (this.lockScroll) {
+        document.body.style.overflow = '';
+      }
+    },
+    // 将弹出层添加到指定的容器中
+    appendToContainer() {
+      const container =
+        typeof this.getContainer === 'function'
+          ? this.getContainer()
+          : document.querySelector(this.getContainer);
+      if (container && container !== this.$el.parentNode) {
+        container.appendChild(this.$el);
+      }
+    },
+    // 点击遮罩层关闭弹出层
+    onClickOverlay() {
+      if (this.closeOnClickOverlay) {
+        this.$emit('input', false);
+      }
+    },
+  },
+  beforeDestroy() {
+    // 组件销毁前，恢复滚动
+    if (this.lockScroll) {
+      document.body.style.overflow = '';
+    }
+  },
+};
+</script>
+
+<style scoped>
+.popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+}
+
+.popup {
+  position: fixed;
+  z-index: 1000;
+}
+
+.popup-center {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.popup-top {
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.popup-bottom {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+
+.popup-left {
+  top: 0;
+  left: 0;
+  height: 100%;
+}
+
+.popup-right {
+  top: 0;
+  right: 0;
+  height: 100%;
+}
+
+/* 过渡效果 */
+.popup-slide-center-enter-active,
+.popup-slide-center-leave-active,
+.popup-slide-top-enter-active,
+.popup-slide-top-leave-active,
+.popup-slide-bottom-enter-active,
+.popup-slide-bottom-leave-active,
+.popup-slide-left-enter-active,
+.popup-slide-left-leave-active,
+.popup-slide-right-enter-active,
+.popup-slide-right-leave-active {
+  transition-property: all;
+  transition-timing-function: ease;
+}
+
+.popup-slide-top-enter,
+.popup-slide-top-leave-to {
+  transform: translateY(-100%);
+}
+.popup-slide-bottom-enter,
+.popup-slide-bottom-leave-to {
+  transform: translateY(100%);
+}
+.popup-slide-left-enter,
+.popup-slide-left-leave-to {
+  transform: translateX(-100%);
+}
+.popup-slide-right-enter,
+.popup-slide-right-leave-to {
+  transform: translateX(100%);
+}
+.popup-slide-center-enter,
+.popup-slide-center-leave-to {
+  opacity: 0;
+}
+</style>

package/dist/components/radio/index.js

@@ -0,0 +1,8 @@
+import Radio from './index.vue';
+import './style.less';
+
+Radio.install = function (Vue) {
+  Vue.component(Radio.name, Radio);
+};
+
+export default Radio;

package/dist/components/radio/index.vue

@@ -0,0 +1,184 @@
+<template>
+    <!-- 常规单选框 -->
+    <label :class="wrapClasses" v-if="!radioButton">
+      <span :class="radioClasses">
+        <span :class="innerClasses"></span>
+        <input
+          type="radio"
+          :class="inputClasses"
+          :disabled="isDisabled"
+          :checked="currentValue"
+          @change="handleChange"
+        >
+      </span>
+      <!-- 标签内容 -->
+      <div class="vd-radio__label" v-if="$slots.default">
+        <div class="vd-radio__text">
+          <slot></slot>
+        </div>
+      </div>
+    </label>
+  
+    <!-- 按钮样式的单选框 -->
+    <label
+      class="vd-radio vd-radio-button"
+      :class="radioButtonClasses"
+      v-else
+    >
+      <input
+        type="radio"
+        :class="inputClasses"
+        :disabled="isDisabled"
+        :checked="currentValue"
+        @change="handleChange"
+      >
+      <span class="vd-radio-button-text">
+        <slot></slot>
+      </span>
+    </label>
+  </template>
+  <script>
+import { findComponentUpward } from "../utils/assist";
+  
+  const prefixCls = 'vd-radio';
+  
+  export default {
+    name: 'vd-radio',
+    props: {
+     // 组件的值，用于 v-model 绑定
+      value: {
+        type: [String, Number, Boolean],
+        default: false,
+      },
+      // 是否为按钮样式
+      radioButton: Boolean,
+      // 是否禁用
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      // 选中时的值
+      trueValue: {
+        type: [String, Number, Boolean],
+        default: true,
+      },
+      // 未选中时的值
+      falseValue: {
+        type: [String, Number, Boolean],
+        default: false,
+      },
+      // 单选框的标识名称，在组内使用
+      name: {
+        type: [String, Number, Boolean],
+      },
+      // 类型，用于样式
+      type: String,
+    },
+    data() {
+      return {
+        // 当前是否选中
+        currentValue: this.value === this.trueValue,
+        // 是否属于单选框组
+        isGroup: false,
+        // 父级单选框组的引用
+        parentGroup: null,
+      };
+    },
+    computed: {
+      // 计算禁用状态，优先级：自身 > 组
+      isDisabled() {
+        return this.disabled || (this.isGroup && this.parentGroup.disabled);
+      },
+      // 包裹类名
+      wrapClasses() {
+        return [
+          `${prefixCls}`,
+          {
+            [`${prefixCls}--checked`]: this.currentValue,
+            [`${prefixCls}--disabled`]: this.isDisabled,
+          },
+        ];
+      },
+      // 单选框的类名
+      radioClasses() {
+        return [`${prefixCls}__input`];
+      },
+      // 图标的类名
+      innerClasses() {
+        return [`${prefixCls}__icon`];
+      },
+      // 输入框的类名
+      inputClasses() {
+        return `${prefixCls}__original`;
+      },
+      // 按钮样式的类名
+      radioButtonClasses() {
+        return [
+          {
+            [`${prefixCls}-button--checked`]: this.currentValue,
+            [`${prefixCls}-button--${this.type}`]: this.type,
+            [`${prefixCls}-button--disabled`]: this.isDisabled,
+          },
+        ];
+      },
+    },
+    mounted() {
+      // 查找父级 vd-radio-group 组件
+      this.parentGroup = findComponentUpward(this, 'vd-radio-group');
+      this.isGroup = !!this.parentGroup;
+  
+      if (this.isGroup) {
+        // 如果在组内，注册到组中
+        this.parentGroup.updateValue();
+      } else {
+        // 如果不在组内，更新自身的选中状态
+        this.updateValue();
+      }
+    },
+    methods: {
+      // 处理 change 事件
+      handleChange(event) {
+        if (this.isDisabled) {
+          return;
+        }
+  
+        const checked = event.target.checked;
+        this.currentValue = checked;
+        const value = checked ? this.trueValue : this.falseValue;
+        this.$emit('input', value);
+  
+        if (this.isGroup) {
+          // 如果在组内，通知组更新
+          this.parentGroup.change(this.name);
+        } else {
+          // 否则，触发自身的 change 事件
+          this.$emit('change', value);
+        }
+      },
+      // 更新 currentValue
+      updateValue() {
+        if (this.isGroup) {
+          // 组内，通过比较组的值和自身的 name 来确定是否选中
+          this.currentValue = this.parentGroup.value === this.name;
+        } else {
+          // 组外，通过比较 value 和 trueValue
+          this.currentValue = this.value === this.trueValue;
+        }
+      },
+    },
+    watch: {
+      // 监听 value 的变化
+      value() {
+        this.updateValue();
+      },
+      // 如果在组内，监听组的 value 变化
+      'parentGroup.value'() {
+        this.updateValue();
+      },
+    },
+  };
+  </script>
+  
+<style lang="less">
+@import "./style.less";
+</style>