123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 |
- <template>
- <div class="cip-input-switch">
- <el-checkbox v-model="effective" class="cip-input-switch__switch"></el-checkbox>
- <slot name="input" :model-value="modelValue" :update-model-value="updateModelValue" :disabled="!effective"></slot>
- </div>
- </template>
- <script>
- import { ref, watchEffect, watch } from 'vue'
- import { ElCheckbox } from 'element-plus'
- import { isNotEmpty } from '@cip/utils/util'
- import { generateProps } from '../helper/component-util'
- import { componentScheme } from './component.scheme'
- export default {
- name: 'CipInputSwitch',
- components: { ElCheckbox },
- props: generateProps(componentScheme),
- emits: ['update:modelValue'],
- setup (props, { emit }) {
- const effective = ref(false)
- watchEffect(() => {
- if (isNotEmpty(props.modelValue)) {
- effective.value = true
- }
- })
- watch(effective, (val) => {
- if (!val) {
- emit('update:modelValue', undefined)
- } else {
- }
- })
- const updateModelValue = (val) => {
- if (effective.value) {
- emit('update:modelValue', val)
- } else {
- emit('update:modelValue', undefined)
- }
- }
- return {
- effective,
- updateModelValue
- }
- }
- }
- </script>
- <style lang="less">
- .cip-input-switch{
- display: flex;
- &__switch{
- margin-right: 8px !important;
- }
- }
- </style>
|