twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-08 01:17:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 分段控制器组件添加全局禁用属性disabled (#1043)

Browse Source 
* feat: segmented component global disabled
This commit is contained in:
hb0730 2024-03-31 12:37:10 +08:00 committed by GitHub
parent 53e3e601fb
commit e0f52fc379
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/ReSegmented/src/index.tsx
View File

@ -37,6 +37,11 @@ const props = {
/** 控件尺寸 */ /** 控件尺寸 */
size: { size: {
type: String as PropType<"small" | "default" | "large"> type: String as PropType<"small" | "default" | "large">
},
/** 是否全局禁用，默认 `false` */
disabled: {
type: Boolean,
default: false
} }
}; };
@ -57,7 +62,7 @@ export default defineComponent({
: ref(0); : ref(0);
function handleChange({ option, index }, event: Event) { function handleChange({ option, index }, event: Event) {
if (option.disabled) return; if (props.disabled || option.disabled) return;
event.preventDefault(); event.preventDefault();
isNumber(props.modelValue) isNumber(props.modelValue)
? emit("update:modelValue", index) ? emit("update:modelValue", index)
@ -67,6 +72,7 @@ export default defineComponent({
} }
function handleMouseenter({ option, index }, event: Event) { function handleMouseenter({ option, index }, event: Event) {
if (props.disabled) return;
event.preventDefault(); event.preventDefault();
curMouseActive.value = index; curMouseActive.value = index;
if (option.disabled || curIndex.value === index) { if (option.disabled || curIndex.value === index) {
@ -79,6 +85,7 @@ export default defineComponent({
} }
function handleMouseleave(_, event: Event) { function handleMouseleave(_, event: Event) {
if (props.disabled) return;
event.preventDefault(); event.preventDefault();
curMouseActive.value = -1; curMouseActive.value = -1;
} }
@ -124,13 +131,15 @@ export default defineComponent({
ref={`labelRef${index}`} ref={`labelRef${index}`}
class={[ class={[
"pure-segmented-item", "pure-segmented-item",
option?.disabled && "pure-segmented-item-disabled" (props.disabled || option?.disabled) &&
"pure-segmented-item-disabled"
]} ]}
style={{ style={{
background: background:
curMouseActive.value === index ? segmentedItembg.value : "", curMouseActive.value === index ? segmentedItembg.value : "",
color: color: props.disabled
!option.disabled && ? null
: !option.disabled &&
(curIndex.value === index || curMouseActive.value === index) (curIndex.value === index || curMouseActive.value === index)
? isDark.value ? isDark.value
? "rgba(255, 255, 255, 0.85)" ? "rgba(255, 255, 255, 0.85)"

3
src/views/components/segmented.vue
View File

@ -240,6 +240,9 @@ watch(size, val => (dynamicSize.value = size.value));
<p class="mb-2">禁用</p> <p class="mb-2">禁用</p>
<Segmented :options="optionsDisabled" :size="dynamicSize" /> <Segmented :options="optionsDisabled" :size="dynamicSize" />
<el-divider /> <el-divider />
<p class="mb-2">全局禁用</p>
<Segmented :options="optionsBasis" :size="dynamicSize" disabled />
<el-divider />
<p class="mb-2">block 属性(将宽度调整为父元素宽度)</p> <p class="mb-2">block 属性(将宽度调整为父元素宽度)</p>
<Segmented :options="optionsBlock" block :size="dynamicSize" /> <Segmented :options="optionsBlock" block :size="dynamicSize" />
<el-divider /> <el-divider />