🐛: 修复 radio 与 checkbox 组件无 from 包裹时隐藏原生元素
This commit is contained in:
		
							parent
							
								
									ee46a4cfd5
								
							
						
					
					
						commit
						87c3740575
					
				@ -1,3 +1,7 @@
 | 
			
		||||
.layui-checkbox input[type="checkbox"] {
 | 
			
		||||
  display: none;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.layui-form-checkbox {
 | 
			
		||||
  position: relative;
 | 
			
		||||
  height: 30px;
 | 
			
		||||
 | 
			
		||||
@ -94,7 +94,7 @@ const handleClick = function () {
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <span @click.stop="handleClick">
 | 
			
		||||
  <span @click.stop="handleClick" class="layui-checkbox">
 | 
			
		||||
    <input type="checkbox" :name="name" :value="label" />
 | 
			
		||||
    <div
 | 
			
		||||
      class="layui-unselect layui-form-checkbox"
 | 
			
		||||
 | 
			
		||||
@ -1,3 +1,7 @@
 | 
			
		||||
.layui-radio input[type="radio"]{
 | 
			
		||||
  display: none;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.layui-form-radio,
 | 
			
		||||
.layui-form-radio * {
 | 
			
		||||
  display: inline-block;
 | 
			
		||||
 | 
			
		||||
@ -28,7 +28,7 @@ const handleClick = function () {
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <span>
 | 
			
		||||
  <span class="layui-radio">
 | 
			
		||||
    <input type="radio" :value="label" :name="name" />
 | 
			
		||||
    <div
 | 
			
		||||
      class="layui-unselect layui-form-radio"
 | 
			
		||||
 | 
			
		||||
@ -60,7 +60,6 @@ dl.layui-anim-upbit > dd .layui-form-checkbox,
 | 
			
		||||
  line-height: 1.3;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
.layui-form-select {
 | 
			
		||||
  .layui-input {
 | 
			
		||||
    border: 1px solid #eeeeee;
 | 
			
		||||
 | 
			
		||||
@ -178,12 +178,6 @@ a cite {
 | 
			
		||||
  border-color: var(--global-neutral-color-3);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.layui-form input[type="checkbox"],
 | 
			
		||||
.layui-form input[type="radio"],
 | 
			
		||||
.layui-form select {
 | 
			
		||||
  display: none;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.layui-form-checkbox,
 | 
			
		||||
.layui-form-checkbox *,
 | 
			
		||||
.layui-form-switch {
 | 
			
		||||
 | 
			
		||||
@ -13,9 +13,7 @@
 | 
			
		||||
::: demo 使用 `lay-checkbox` 标签, 创建一个复选框
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <lay-form>
 | 
			
		||||
    <lay-checkbox name="like" skin="primary"  v-model="checked1" label="1" ></lay-checkbox>
 | 
			
		||||
 </lay-form>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
@ -41,9 +39,7 @@ export default {
 | 
			
		||||
::: demo
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <lay-form>
 | 
			
		||||
    <lay-checkbox name="like" label="1" v-model="checked2" >普通</lay-checkbox>
 | 
			
		||||
 </lay-form>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
@ -69,13 +65,11 @@ export default {
 | 
			
		||||
::: demo
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <lay-form>
 | 
			
		||||
    <lay-checkbox-group v-model="checkeds" @change="groupChange">
 | 
			
		||||
      <lay-checkbox name="like" skin="primary" label="1">写作</lay-checkbox>
 | 
			
		||||
      <lay-checkbox name="like" skin="primary" label="2">画画</lay-checkbox>
 | 
			
		||||
      <lay-checkbox name="like" skin="primary" label="3">运动</lay-checkbox>
 | 
			
		||||
    </lay-checkbox-group>
 | 
			
		||||
  </lay-form>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
@ -105,11 +99,9 @@ export default {
 | 
			
		||||
::: demo
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <lay-form>
 | 
			
		||||
    <lay-checkbox name="like" skin="primary" v-model="checked3" label="1">写作</lay-checkbox>
 | 
			
		||||
    <lay-checkbox name="like" skin="primary" v-model="checked4" label="2">画画</lay-checkbox>
 | 
			
		||||
    <lay-checkbox name="like" skin="primary" v-model="checked5" label="3">运动</lay-checkbox>
 | 
			
		||||
  </lay-form>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
@ -137,9 +129,7 @@ export default {
 | 
			
		||||
::: demo
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <lay-form>
 | 
			
		||||
    <lay-checkbox name="like" skin="primary" label="1" :disabled="disabled" v-model="checked6">禁用</lay-checkbox>
 | 
			
		||||
 </lay-form>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
@ -167,9 +157,7 @@ export default {
 | 
			
		||||
::: demo
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <lay-form>
 | 
			
		||||
    <lay-checkbox name="like" skin="primary" label="1" @change="change" v-model="checked7">回调</lay-checkbox>
 | 
			
		||||
 </lay-form>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
 | 
			
		||||
@ -171,15 +171,15 @@ export default {
 | 
			
		||||
 | 
			
		||||
::: table
 | 
			
		||||
 | 
			
		||||
| 属性         | 描述                  | 可选值         |
 | 
			
		||||
| -----------  | -------------------- | -------------- |
 | 
			
		||||
| name         | 原始属性 name         | --             |
 | 
			
		||||
| placeholder  | 提示信息              | --             |
 | 
			
		||||
| disabled     | 禁用                  | `true` `false` |
 | 
			
		||||
| readonly     | 原生属性 readonly     | `true` `false` |
 | 
			
		||||
| v-model      | 值                    | --             |
 | 
			
		||||
| autofocus    | 原生属性 autofocus    | `true` `false` |
 | 
			
		||||
| autocomplete | 原生属性 autocomplete | `true` `false` |
 | 
			
		||||
| 属性                     | 描述                  | 可选值         |
 | 
			
		||||
| -----------------------  | -------------------- | -------------- |
 | 
			
		||||
| name                     | 原始属性 name         | --             |
 | 
			
		||||
| placeholder              | 提示信息              | --             |
 | 
			
		||||
| disabled                 | 禁用                  | `true` `false` |
 | 
			
		||||
| readonly                 | 原生属性 readonly     | `true` `false` |
 | 
			
		||||
| v-model / modelValue     | 值                   | --             |
 | 
			
		||||
| autofocus                | 原生属性 autofocus    | `true` `false` |
 | 
			
		||||
| autocomplete             | 原生属性 autocomplete | `true` `false` |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -13,11 +13,9 @@
 | 
			
		||||
::: demo 使用 `lay-radio` 标签, 创建一个单选框
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <lay-form>
 | 
			
		||||
    <lay-radio v-model="selected1" name="action" label="1">写作</lay-radio>
 | 
			
		||||
    <lay-radio v-model="selected1" name="action" label="2">画画</lay-radio>
 | 
			
		||||
    <lay-radio v-model="selected1" name="action" label="3">运动</lay-radio>
 | 
			
		||||
  </lay-form>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
@ -43,12 +41,10 @@ export default {
 | 
			
		||||
::: demo
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <lay-form>
 | 
			
		||||
    <lay-radio v-model="selected2" name="action" label="1">写作</lay-radio>
 | 
			
		||||
    <lay-radio v-model="selected2" name="action" label="2">画画</lay-radio>
 | 
			
		||||
    <lay-radio v-model="selected2" name="action" label="3">运动</lay-radio>
 | 
			
		||||
    <lay-radio v-model="selected2" name="action" label="4" :disabled="disabled">禁用</lay-radio>
 | 
			
		||||
  </lay-form>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
@ -76,11 +72,9 @@ export default {
 | 
			
		||||
::: demo
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <lay-form>
 | 
			
		||||
    <lay-radio v-model="selected3" name="action" label="1" @change="change">写作</lay-radio>
 | 
			
		||||
    <lay-radio v-model="selected3" name="action" label="2" @change="change">画画</lay-radio>
 | 
			
		||||
    <lay-radio v-model="selected3" name="action" label="3" @change="change">运动</lay-radio>
 | 
			
		||||
  </lay-form>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
 | 
			
		||||
@ -194,13 +194,12 @@ export default {
 | 
			
		||||
 | 
			
		||||
::: table
 | 
			
		||||
 | 
			
		||||
| 属性   | 描述     | 可选值           |
 | 
			
		||||
| 属性   | 描述     | 参数           |
 | 
			
		||||
| ------ | -------- | ---------------- |
 | 
			
		||||
| change | 切换事件 | current : 当前值 |
 | 
			
		||||
| change | 切换事件 | val : 当前值 |
 | 
			
		||||
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
::: title Switch 插槽
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -23,6 +23,8 @@
 | 
			
		||||
          <li>[新增] input 组件 autocomplete 原生属性。</li>
 | 
			
		||||
          <li>[新增] input 组件 autofocus 原生属性。</li>
 | 
			
		||||
          <li>[修复] side 组件 width 属性无效。</li>
 | 
			
		||||
          <li>[修复] checkbox 组件无 from 包裹时隐藏原生 checkbox。</li>
 | 
			
		||||
          <li>[修复] radio 组件无 from 包裹时隐藏原生 radio。</li>
 | 
			
		||||
        </ul> 
 | 
			
		||||
      </li>
 | 
			
		||||
    </ul>
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user