1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 |
- 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>
- }
- }
|