tmagic-editor/docs/assets/form-config_fields_checkbox.md.nvv9BCrN.lean.js

import{At as e,E as t,Mt as n,Ot as r,Tt as i,Xt as a,dn as o,en as s,jt as c}from"./chunks/framework.ECw2lWOt.js";var l=JSON.parse(`{"title":"Checkbox 多选框","description":"","frontmatter":{},"headers":[],"relativePath":"form-config/fields/checkbox.md","filePath":"form-config/fields/checkbox.md"}`),u={name:`form-config/fields/checkbox.md`};function d(t,l,u,d,f,p){let m=s(`demo-block`);return a(),r(`div`,null,[l[7]||=i(`h1`,{id:`checkbox-多选框`,tabindex:`-1`},[c(`Checkbox 多选框 `),i(`a`,{class:`header-anchor`,href:`#checkbox-多选框`,"aria-label":`Permalink to “Checkbox 多选框”`},`​`)],-1),l[8]||=i(`p`,null,`一组备选项中进行多选`,-1),l[9]||=i(`h2`,{id:`基础用法`,tabindex:`-1`},[c(`基础用法 `),i(`a`,{class:`header-anchor`,href:`#基础用法`,"aria-label":`Permalink to “基础用法”`},`​`)],-1),l[10]||=i(`p`,null,`单独使用可以表示两种状态之间的切换。`,-1),n(m,{type:`form`,config:[{type:`checkbox`,name:`checkbox`,text:`选项`}]},{source:o(()=>[...l[0]||=[i(`p`,null,` 要使用 Checkbox 组件，只需要配置 type: 'checkbox'，选中意味着变量的值为 true。默认绑定变量的值会是 Boolean，选中为 true。 `,-1)]]),_:1}),l[11]||=i(`h2`,{id:`禁用状态`,tabindex:`-1`},[c(`禁用状态 `),i(`a`,{class:`header-anchor`,href:`#禁用状态`,"aria-label":`Permalink to “禁用状态”`},`​`)],-1),l[12]||=i(`p`,null,`多选框不可用状态。`,-1),n(m,{type:`form`,config:[{type:`checkbox`,name:`checkbox`,text:`选项`,disabled:()=>!0}]},{source:o(()=>[...l[1]||=[i(`p`,null,` 设置 disabled 属性即可，它接受一个 Boolean，true 为禁用，也可以接受一个返回 Boolean 的函数。 `,-1)]]),_:1}),l[13]||=i(`h2`,{id:`自定义选中值`,tabindex:`-1`},[c(`自定义选中值 `),i(`a`,{class:`header-anchor`,href:`#自定义选中值`,"aria-label":`Permalink to “自定义选中值”`},`​`)],-1),l[14]||=i(`p`,null,[c(`通过 `),i(`code`,null,`activeValue`),c(` 和 `),i(`code`,null,`inactiveValue`),c(` 自定义选中和未选中时的值。`)],-1),n(m,{type:`form`,config:[{type:`checkbox`,name:`checkbox`,text:`选项`,activeValue:`yes`,inactiveValue:`no`}]},{source:o(()=>[...l[2]||=[i(`p`,null,` 设置 activeValue 为选中时的值，inactiveValue 为未选中时的值。 `,-1)]]),_:1}),l[15]||=i(`h2`,{id:`数值类型`,tabindex:`-1`},[c(`数值类型 `),i(`a`,{class:`header-anchor`,href:`#数值类型`,"aria-label":`Permalink to “数值类型”`},`​`)],-1),l[16]||=i(`p`,null,[c(`当需要绑定数值类型时，可以使用 `),i(`code`,null,`filter: 'number'`),c(` 配合默认的 activeValue/inactiveValue。`)],-1),n(m,{type:`form`,config:[{type:`checkbox`,name:`checkbox`,text:`选项`,filter:`number`}]},{source:o(()=>[...l[3]||=[i(`p`,null,` 配置 filter 为 'number' 时，默认 activeValue 为 1，inactiveValue 为 0。 `,-1)]]),_:1}),l[17]||=i(`h2`,{id:`使用-label-显示`,tabindex:`-1`},[c(`使用 Label 显示 `),i(`a`,{class:`header-anchor`,href:`#使用-label-显示`,"aria-label":`Permalink to “使用 Label 显示”`},`​`)],-1),l[18]||=i(`p`,null,[c(`通过 `),i(`code`,null,`useLabel`),c(` 属性控制是否使用 label 作为显示内容。`)],-1),n(m,{type:`form`,config:[{type:`checkbox`,name:`checkbox`,text:`选项`,useLabel:!0}]},{source:o(()=>[...l[4]||=[i(`p`,null,` 设置 useLabel 为 true 时，不显示 text 内容，由外部 label 控制显示。 `,-1)]]),_:1}),l[19]||=i(`h2`,{id:`多选框组`,tabindex:`-1`},[c(`多选框组 `),i(`a`,{class:`header-anchor`,href:`#多选框组`,"aria-label":`Permalink to “多选框组”`},`​`)],-1),l[20]||=i(`p`,null,`适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。`,-1),n(m,{type:`form`,config:[{type:`checkbox-group`,name:`checkbox`,text:`选项`,options:[{text:`选项1`,value:1},{text:`选项2`,value:2},{text:`选项3`,value:3}]}]},{source:o(()=>[...l[5]||=[i(`p`,null,` checkbox-group 元素能把多个 checkbox 管理为一组，绑定值为数组类型。 `,-1)]]),_:1}),l[21]||=i(`h2`,{id:`多选框组禁用选项`,tabindex:`-1`},[c(`多选框组禁用选项 `),i(`a`,{class:`header-anchor`,href:`#多选框组禁用选项`,"aria-label":`Permalink to “多选框组禁用选项”`},`​`)],-1),l[22]||=i(`p`,null,[c(`在选项中设置 `),i(`code`,null,`disabled`),c(` 可禁用单个选项。`)],-1),n(m,{type:`form`,config:[{type:`checkbox-group`,name:`checkbox`,text:`选项`,options:[{text:`选项1`,value:1},{text:`选项2`,value:2,disabled:!0},{text:`选项3`,value:3}]}]},{source:o(()=>[...l[6]||=[i(`p`,null,` 在 options 中设置 disabled: true 可禁用该选项。 `,-1)]]),_:1}),l[23]||=e("",12)])}var f=t(u,[[`render`,d]]);export{l as __pageData,f as default};