From 6b2710b7f2ecff3a55c6e6f57f3833346ddc73b3 Mon Sep 17 00:00:00 2001 From: kimdoeun Date: Mon, 3 Jan 2022 14:06:58 +0900 Subject: [PATCH] =?UTF-8?q?[#1001][3.0]=20Toggle=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20>=20readonly=20=EC=98=B5=EC=85=98=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20################=20-=20toggle=20=EB=82=B4?= =?UTF-8?q?=20=EC=9D=BD=EA=B8=B0=EC=A0=84=EC=9A=A9=20=EC=98=B5=EC=85=98=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80,=20=EC=98=88=EC=A0=9C=20=EB=B0=8F=20?= =?UTF-8?q?=EB=AC=B8=EC=84=9C=EB=82=B4=EC=9A=A9=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/views/toggle/api/toggle.md | 13 +++++++------ docs/views/toggle/example/Default.vue | 7 +++++++ package.json | 2 +- src/components/toggle/Toggle.vue | 17 ++++++++++++----- 4 files changed, 27 insertions(+), 12 deletions(-) diff --git a/docs/views/toggle/api/toggle.md b/docs/views/toggle/api/toggle.md index 1666d9ba5..045b6c9a5 100644 --- a/docs/views/toggle/api/toggle.md +++ b/docs/views/toggle/api/toggle.md @@ -12,12 +12,13 @@ >### Props - | 이름 | 타입 | 디폴트 | 설명 | 종류 | - |------|--------|------|------|------| - | v-model | Boolean | false | <토글>에서 선택된 값 | | - | disabled | Boolean | false | <토글> 사용 여부 | | - | width | Number | 40 | <토글> width size | | - | activeColor | String | '#409EFF' | <토글> 활성화 시 색상 | | + | 이름 | 타입 | 디폴트 | 설명 | 종류 | + |---------------|------|--------|------|------| + | v-model | Boolean | false | <토글>에서 선택된 값 | | + | readonly | Boolean | false | <토글> 읽기전용 여부 | | + | disabled | Boolean | false | <토글> 사용 여부 | | + | width | Number | 40 | <토글> width size | | + | activeColor | String | '#409EFF' | <토글> 활성화 시 색상 | | | inactiveColor | String | '#DCDFE6' | <토글> 비활성화 시 색상 | | >### Event diff --git a/docs/views/toggle/example/Default.vue b/docs/views/toggle/example/Default.vue index d62890579..859e40a14 100644 --- a/docs/views/toggle/example/Default.vue +++ b/docs/views/toggle/example/Default.vue @@ -8,6 +8,13 @@ {{ checkVal1 }} +
+

Readonly

+ +

Disabled

", "license": "MIT", diff --git a/src/components/toggle/Toggle.vue b/src/components/toggle/Toggle.vue index 6d8429f04..993ce4f30 100644 --- a/src/components/toggle/Toggle.vue +++ b/src/components/toggle/Toggle.vue @@ -4,6 +4,7 @@ :class="{ checked: modelValue, disabled, + readonly, }" :style="{ width: `${width}px`, @@ -24,6 +25,10 @@ export default { type: Boolean, default: false, }, + readonly: { + type: Boolean, + default: false, + }, disabled: { type: Boolean, default: false, @@ -51,7 +56,7 @@ export default { }, }); const clickMv = () => { - if (!props.disabled) { + if (!props.disabled && !props.readonly) { mv.value = !mv.value; } }; @@ -95,12 +100,14 @@ export default { left: calc(100% - 17px); } - &.disabled { + &.readonly { opacity: .6; + cursor: default; + } - &:hover { - cursor: not-allowed; - } + &.disabled { + opacity: .6; + cursor: not-allowed; } }