✨ feat(单选控件): 支持选项说明

 <!--
 <!--
  * @Date: 2022-08-30 11:34:19
  * @Date: 2022-08-30 11:34:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-02-10 11:04:38
+ * @LastEditTime: 2023-02-21 20:58:52
  * @FilePath: /data-table/src/components/RadioField/index.vue
  * @FilePath: /data-table/src/components/RadioField/index.vue
  * @Description: 单项选择控件
  * @Description: 单项选择控件
 -->
 -->
@@ -19,6 +19,13 @@
           <div v-for="x in item.component_props.options" :key="x.value" class="radio-wrapper">
           <div v-for="x in item.component_props.options" :key="x.value" class="radio-wrapper">
             <van-radio :name="x.value" icon-size="1rem" :checked-color="themeVars.radioColor"
             <van-radio :name="x.value" icon-size="1rem" :checked-color="themeVars.radioColor"
               style="margin-bottom: 0.25rem">{{ x.title }}</van-radio>
               style="margin-bottom: 0.25rem">{{ x.title }}</van-radio>
+            <div class="van-multi-ellipsis--l3 rule-desc-text">{{ x.desc_text }}</div>
+            <div v-if="x.desc_type === 'text'" class="rule-box" @click="showRule(x)">
+              {{ x.desc_btn_name }}&nbsp;>>
+            </div>
+            <div v-if="x.desc_type === 'url'" class="rule-box" @click="showUrl(x)">
+              {{ x.desc_btn_name }}&nbsp;<van-icon name="link-o" />
+            </div>
             <van-field v-if="radio_value === x.value && x.is_input" @blur="onBlur(x)" v-model="x.affix" label=" " label-width="5px"
             <van-field v-if="radio_value === x.value && x.is_input" @blur="onBlur(x)" v-model="x.affix" label=" " label-width="5px"
               :placeholder="x.input_placeholder" :rules="x.input_required ? rules : ''" :required="x.input_required"
               :placeholder="x.input_placeholder" :rules="x.input_required ? rules : ''" :required="x.input_required"
               class="affix-input" />
               class="affix-input" />
@@ -27,10 +34,25 @@
       </template>
       </template>
     </van-field>
     </van-field>
   </div>
   </div>
+
+  <van-overlay :show="show" :lock-scroll="false">
+    <div class="rule-wrapper" @click.stop>
+      <div class="rule-block">
+        <div style="height: 70vh; min-height: 70vh; overflow: scroll; white-space: pre-wrap; line-height: 1.5;" v-html="rule_content"></div>
+        <div class="close-btn">
+          <van-button type="primary" block @click="closeRule"
+            >关&nbsp;&nbsp;闭</van-button
+          >
+        </div>
+        <div></div>
+      </div>
+    </div>
+  </van-overlay>
 </template>
 </template>
 
 
 <script setup>
 <script setup>
 import { styleColor } from "@/constant.js";
 import { styleColor } from "@/constant.js";
+import $ from "jquery";
 
 
 const props = defineProps({
 const props = defineProps({
   item: Object,
   item: Object,
@@ -93,7 +115,25 @@ onMounted(() => {
   // 发送自定义数据结构
   // 发送自定义数据结构
   props.item.value = { key: props.item.key, value: radio_value.value, affix: affix_value.value, type: "radio" };
   props.item.value = { key: props.item.key, value: radio_value.value, affix: affix_value.value, type: "radio" };
   emit("active", props.item.value);
   emit("active", props.item.value);
+  //
+  $(".rule-box").css("color", themeVars.radioColor);
 })
 })
+
+// 补充信息弹框
+const show = ref(false);
+const showRule = (rule) => {
+  show.value = true;
+  rule.desc_text = rule.desc_text.replace(/\\n/g, "<br>")
+  rule_content.value = rule.desc_text;
+};
+const closeRule = () => {
+  show.value = false;
+  rule_content.value = "";
+};
+const showUrl = (rule) => {
+  location.href = rule.desc_url
+}
+const rule_content = ref("");
 </script>
 </script>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
@@ -129,6 +169,46 @@ onMounted(() => {
     margin-top: 0.5rem;
     margin-top: 0.5rem;
     margin-bottom: 0.25rem;
     margin-bottom: 0.25rem;
   }
   }
+  .rule-desc-text {
+    margin: 0.35rem 0.5rem 0.5rem 1.75rem;
+    font-size: 0.8rem;
+    color: #808080;
+  }
+  .rule-box {
+    font-size: 0.85rem;
+    margin-left: 1.8rem;
+    padding-bottom: 0.5rem;
+    width: fit-content;
+  }
+}
+
+.rule-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.rule-block {
+  position: relative;
+  width: 80vw;
+  height: 80vh;
+  background-color: #fff;
+  overflow: scroll;
+  padding: 1rem;
+  .close-btn {
+    position: absolute;
+    bottom: 1rem;
+    // transform: translateX(100%);
+    width: calc(100% - 2rem);
+  }
+}
+.multi-rule-field-box {
+  border: 1px solid #eaeaea;
+  border-radius: 0.25rem;
+  padding: 1rem 0.5rem 0 0.5rem;
+  // width: 100vw;
+  margin-bottom: 0.5rem;
 }
 }
 
 
 :deep(.van-radio) {
 :deep(.van-radio) {