组件
数据录入

YbCodemirrorXml XML编辑器

在 yb-codemirror 基础上使用 xml 语言，并且内置格式化 xml 按钮

# 基本用法

<template>
    <yb-codemirror-xml v-model="value" placeholder="请输入"></yb-codemirror-xml>
</template>
<script>
    export default {
        data() {
            return {
                value: `<?xml version="1.0" encoding="UTF-8"?>
<string xmlns="http://EsbSvc.PorPoise.org/">
  <Response>
    <Result>
      <Code>1</Code>
      <Msg>成功</Msg>
    </Result>
    <Data>
      <INHOS_FEE_DETAIL_LIST>
        <INHOS_FEE_DETAIL>
          <SOURCE_REF>105</SOURCE_REF>
          <MEDICAL_INSTITUT_CODE>12441400456755647T</MEDICAL_INSTITUT_CODE>
          <FEE_DETAIL_ID>1057082516</FEE_DETAIL_ID>
          <FEE_RECORD_ID>11111111</FEE_RECORD_ID>
          <CARD_NUMBER>000006111111</CARD_NUMBER>
          <CARD_TYPE>7</CARD_TYPE>
          <REG_NUMBER>0000511111</REG_NUMBER>
          <FILE_NUMBER/>
          <PATIENT_NAME>张三</PATIENT_NAME>
          <GENDER_CODE>2</GENDER_CODE>
          <GENDER_NAME>女</GENDER_NAME>
          <BIRTH_DATE>1999-11-01</BIRTH_DATE>
          <AGE>38岁</AGE>
          <ID_NUMBER>441481111111111</ID_NUMBER>
          <ID_TYPE>居民身份证</ID_TYPE>
          <VISITING_SERIAL_NUMBER>51479377</VISITING_SERIAL_NUMBER>
          <SPECIAL_SERVICE_SIGN/>
          <INSURANCE_TYPE>390</INSURANCE_TYPE>
          <HIS_INSURANCE_TYPE>00A</HIS_INSURANCE_TYPE>
          <PATIENT_ID_TYPE>15</PATIENT_ID_TYPE>
          <INVOICE_NUMBER>5132905</INVOICE_NUMBER>
          <REFUND_SIGN>1</REFUND_SIGN>
          <FEE_DETAIL_TIME>2024-07-29 09:12:12</FEE_DETAIL_TIME>
          <SETTLE_TIME>2024-08-01 10:04:59</SETTLE_TIME>
          <FEE_NTH>1</FEE_NTH>
          <FEE_ITEM_ID>250049</FEE_ITEM_ID>
          <HOSPITAL_ITEM_CODE>WFY00001</HOSPITAL_ITEM_CODE>
          <ITEM_NAME>无费用医嘱</ITEM_NAME>
          <ITEM_UNIT>次</ITEM_UNIT>
          <ITEM_PRICE>0.00</ITEM_PRICE>
          <ITEM_QUANT>1</ITEM_QUANT>
          <ITEM_AMOUNT>0.00</ITEM_AMOUNT>
          <DETAIL_FEE_TYPE>其他费</DETAIL_FEE_TYPE>
          <MED_INSURANCE_ITEM_CODE/>
          <PRICE_BUREAU_ITEM_CODE/>
          <FDA_ITEM_CODE/>
          <DRUG_PURCHASE_ITEM_CODE/>
          <ADVICE_ID>233706||1</ADVICE_ID>
          <PARTNER_APP_ID/>
          <PARTNER_RECORD_ID/>
          <PRESCRIPTION_NUMBER/>
          <RESTRICTION_SIGN/>
          <DRUG_BATCH_NUMBER/>
          <DRUG_PERIOD_VALIDITY/>
          <ADVICE_GIVEN_DOCTOR_CODE>15569</ADVICE_GIVEN_DOCTOR_CODE>
          <ADVICE_GIVEN_DOCTOR_NAME>张三</ADVICE_GIVEN_DOCTOR_NAME>
          <GIVEN_DEP_CODE>000114</GIVEN_DEP_CODE>
          <GIVEN_DEP_NAME>妇三科</GIVEN_DEP_NAME>
          <VISIT_DEP_CODE>000114</VISIT_DEP_CODE>
          <VISIT_DEP_NAME>妇三科</VISIT_DEP_NAME>
          <WARD_CODE/>
          <WARD_NAME/>
          <WARD_NUMBER/>
          <WARD_BED_NUMBER/>
          <EXE_DEP_CODE/>
          <EXE_DEP_NAME/>
          <INDIVIDUALS_AMOUNT>4566.29</INDIVIDUALS_AMOUNT>
          <MEDICARE_BILL_AMOUNT>6409.18</MEDICARE_BILL_AMOUNT>
          <MEDICAL_OUT_INDI_AMOUNT/>
          <MEDICAL_IN_PAY_AMOUNT/>
          <FARMER_BILL_AMOUNT/>
          <OTHER_BILL_AMOUNT/>
        </INHOS_FEE_DETAIL>
      </INHOS_FEE_DETAIL_LIST>
    </Data>
  </Response>
</string>`,
            };
        },
    };
</script>

复制

# 可自适应文本高度

通过设置 autosize 属性，指定最小行数和最大行数，可以使得编辑器的高度能够根据内容自动进行调整，通过 disabled 属性切换编辑器是否可以编辑。

启用

<template>
    <el-switch
        v-model="disabled"
        active-text="禁用"
        inactive-text="启用"
        style="margin-bottom:10px"
    >
    </el-switch>
    <yb-codemirror-xml
        v-model="value"
        :autosize="{ minRows: 6, maxRows: 12 }"
        placeholder="请输入语句"
        :disabled="disabled"
    >
    </yb-codemirror-xml>
</template>
<script>
    export default {
        data() {
            return {
                disabled: false,
                value: `<Result><Code>1</Code><Msg>成功</Msg></Result>`,
            };
        },
    };
</script>

复制

# 在光标处插入内容

<template>
    <div>
        <div style="margin-bottom:10px">
            <el-button size="mini" @click="insertContent">插入一段</el-button>
            <el-button size="mini" @click="insertSum"
                >插入"sum()"并将光标聚焦在括号内</el-button
            >
        </div>
        <yb-codemirror-xml
            v-model="value"
            placeholder="请输入内容"
            :disabled="disabled"
            ref="codemirror"
            style="height:200px"
        >
        </yb-codemirror-xml>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                disabled: false,
                value: `<Response></Response>`,
            };
        },
        methods: {
            insertContent() {
                this.$refs['codemirror'].insertDocToCursor(
                    `\n<Result><Code>1</Code><Msg>成功</Msg></Result>`
                );
            },
            insertSum() {
                this.$refs['codemirror'].insertDocToCursor(
                    'sum()',
                    ({ view, doc }) => {
                        return {
                            anchor:
                                view.state.selection.main.from + doc.length - 1,
                            head:
                                view.state.selection.main.from + doc.length - 1,
                        };
                    }
                );
            },
        },
    };
</script>

复制

通过 this.$refs['codemirror'].getEditorView()获取到编辑器实例以及 extensions 扩展属性，查看codemirror 的文档 (opens new window)，实现更多复杂的操作功能

# YbCodemirrorXml Attributes

参数	说明	类型	可选值	默认值
value/v-model	绑定值	string	--	--
showFormatBtn	显示格式化按钮	boolean	--	true
showCopyBtn	显示复制内容按钮	boolean	--	true
showLargerBtn	显示放大按钮	boolean	--	true
getXmlExtensions	可以取的 xmlLanguage 再返回 extensions	function(xmlLanguage){return extensions}	--	--
xmlFormatterConfig	xml-formatter (opens new window) 的扩展参数配置	Object	--	{collapseContent: true}
xmlConfig	@codemirror/lang-xml (opens new window) 的扩展参数配置	Object	--	{}
	其他属性同 `YbCodemirror`	--	--

# YbCodemirrorXml Slots

name	说明	参数
prependBtns	在内置按钮的之前插入内容
appendBtns	在内置按钮的之后插入内容
largerArea	放大弹窗内容

# YbCodemirrorXml Methods

方法名称	说明	参数	返回值
updateExtensions	有可能 getSqlExtensions 内的引用参数改变了不会自动触发更新 extensions , 需要调用 updateExtensions	--
	其他属性同 `YbCodemirror`	--

# YbCodemirrorXml Events

方法名称	说明	参数	返回值
	其他属性同 `YbCodemirror`	--	--

上次更新: 2025/01/21, 14:27:00

← YbCodemirrorJson JSON编辑器 YbCombiDatepicker 组合时间→