cip-components/cip-url-editor/index.jsx

import { ElInput, ElInputNumber, ElSelect, ElOption } from 'element-plus'
import { useDisabled, useProxy } from './use-proxy'
import './index.less'
export default {
  props: {
    protocol: { type: String, default: 'http:' },
    host: String,
    port: Number,
    path: String,
    size: { type: String, default: 'small' },
    portMin: { type: Number, default: 0 },
    portMax: { type: Number, default: 65535 },
    disabled: { type: Boolean, default: undefined },
    disabledConfig: { type: Object, default: () => ({}) } // { protocol, host, port, path}
  },
  setup (props, { emit }) {
    const [proxyProtocol, proxyHost, proxyPort, proxyPath] = useProxy(props, ['protocol', 'host', 'port', 'path'], emit)
    const [protocolDisabled, hostDisabled, portDisabled, pathDisabled] = useDisabled(props, ['protocol', 'host', 'port', 'path'])

    return () =>
      <div class={'cip-url-editor'}>
        <ElSelect
          class={'cip-url-editor__protocol'}
          size={props.size}
          v-model={proxyProtocol.value}
          disabled={protocolDisabled.value}
        >
          <ElOption value={'http:'} label={'http://'}></ElOption>
          <ElOption value={'https:'} label={'https://'}></ElOption>
        </ElSelect>
        <ElInput
          class={'cip-url-editor__host'}
          size={props.size}
          v-model={proxyHost.value}
          disabled={hostDisabled.value}
          placeholder={'请输入主机地址'}
        />
        <ElInputNumber
          class={'cip-url-editor__port'}
          controls={false}
          step={1}
          precision={0}
          size={props.size}
          v-model={proxyPort.value}
          min={props.portMin}
          max={props.portMax}
          disabled={portDisabled.value}
          placeholder={'请输入主机端口号'}
        />
        <ElInput
          class={'cip-url-editor__path'}
          size={props.size}
          v-model={proxyPath.value}
          disabled={pathDisabled.value}
          placeholder={'请输入路径'}
        />
      </div>
  }
}