vdesign-ui 0.2.20 → 0.3.0

package/dist/components/radio/index.vue

@@ -1,184 +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>
+<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>