Ninja Pumpkin Mutants

    @cloud-ui/x-ace-editor.vue

    0.9.0 • Public • Published

    XAceEditor Ace编辑器

    表单控件, 块级展示

    本组件对 Ace Editor 进行了 Vue 的封装,添加样式修饰,接入了 Cloud UI 表单验证体系。

    示例

    基本用法

    使用v-model:value.sync双向绑定。

    <template>
    <x-ace-editor v-model="value"></x-ace-editor>
    </template>
    <script>
    export default {
        data() {
            return {
                value: 'Ace Editor',
            };
        },
    }
    </script>

    设置语言

    通过lang属性设置语言。更多语言包请查看 brace mode

    注意:需要用如下方式引入 brace 包中的语言包。

    import 'brace';
    import 'brace/mode/json';
    <template>
    <x-ace-editor v-model="value" lang="json"></x-ace-editor>
    </template>
    <script>
    import 'brace';
    import 'brace/mode/json';
    
    export default {
        data() {
            return {
                value:
    `{
        "name": "Alice",
        "age": 24,
        "phone": "18612345678"
    }
    `,
            };
        },
    }
    </script>

    下面再多举一些例子:

    <template>
    <u-linear-layout direction="vertical">
        <u-form-item label="切换语言:">
            <u-select v-model="selectedLang">
                <u-select-item v-for="lang in langs" :key="lang" :value="lang">{{ lang }}</u-select-item>
            </u-select>
        </u-form-item>
        <x-ace-editor v-model="values[selectedLang]" :lang="selectedLang"></x-ace-editor>
    </u-linear-layout>
    </template>
    <script>
    import 'brace';
    import 'brace/mode/json';
    import 'brace/mode/python';
    import 'brace/mode/sql';
    
    export default {
        data() {
            return {
                selectedLang: 'json',
                values: {
                    json: `{
        "name": "Alice",
        "age": 24,
        "phone": "18612345678"
    }
    `,
                    python: `def factorial(n):
        return reduce(lambda x,y:x*y,[1]+range(1,n+1))`,
                    sql: 'SELECT * FROM articles WHERE user_id = "123abc";',
                },
            };
        },
        computed: {
            langs() {
                return Object.keys(this.values);
            },
        },
    }
    </script>

    设置主题

    通过theme属性设置常见的编辑器主题。更多主题请查看 brace theme

    注意:同样需要提前引入 brace 包中的主题文件。

    <template>
    <x-ace-editor v-model="value" lang="json" theme="monokai"></x-ace-editor>
    </template>
    <script>
    import 'brace';
    import 'brace/mode/json';
    import 'brace/theme/monokai';
    
    export default {
        data() {
            return {
                value:
    `{
        "name": "Alice",
        "age": 24,
        "phone": "18612345678"
    }
    `,
            };
        },
    }
    </script>

    下面再多举一些例子:

    <template>
    <u-linear-layout direction="vertical">
        <u-form-item label="切换主题:">
            <u-select v-model="selectedTheme">
                <u-select-item v-for="theme in themes" :key="theme" :value="theme">{{ theme }}</u-select-item>
            </u-select>
        </u-form-item>
        <x-ace-editor v-model="value" lang="javascript" :theme="selectedTheme"></x-ace-editor>
    </u-linear-layout>
    </template>
    <script>
    import 'brace';
    import 'brace/mode/javascript';
    
    const themes = ['ambiance','chaos','chrome','clouds','clouds_midnight','cobalt','crimson_editor','dawn','dracula','dreamweaver','eclipse','github','gob','gruvbox','idle_fingers','iplastic','katzenmilch','kr_theme','kuroir','merbivore','merbivore_soft','mono_industrial','monokai','pastel_on_dark','solarized_dark','solarized_light','sqlserver','terminal','textmate','tomorrow','tomorrow_night','tomorrow_night_blue','tomorrow_night_bright','tomorrow_night_eighties','twilight','vibrant_ink','xcode'];
    themes.map((theme) => import(`brace/theme/${theme}`));
    
    export default {
        data() {
            return {
                selectedTheme: '',
                themes,
                value: `[1, 2, 3].map((x) => {
        const y = x + 1;
        return x * y;
    });
    `,
            };
        },
    }
    </script>

    只读和禁用

    <u-grid-layout :repeat="2">
        <u-grid-layout-column>
            <x-ace-editor value="var i = 0; // 只读" readonly></x-ace-editor>
        </u-grid-layout-column>
        <u-grid-layout-column>
            <x-ace-editor value="var i = 0; // 禁用" disabled></x-ace-editor>
        </u-grid-layout-column>
    </u-grid-layout>

    设置尺寸

    <u-linear-layout direction="vertical">
        <x-ace-editor size="small" value="small" readonly></x-ace-editor>
        <x-ace-editor size="small normal" value="small normal" readonly></x-ace-editor>
        <x-ace-editor size="normal" value="normal" readonly></x-ace-editor>
        <x-ace-editor size="large" value="large" readonly></x-ace-editor>
        <x-ace-editor size="large full" value="large full" readonly></x-ace-editor>
    </u-linear-layout>

    调整大小

    通过设置resize属性,决定水平垂直方向是否可以调整大小。

    <u-linear-layout direction="vertical">
        <div><x-ace-editor value="none:默认不可以调整大小" resize="none"></x-ace-editor></div>
        <div><x-ace-editor value="vertical:仅允许垂直方向调整大小" resize="vertical"></x-ace-editor></div>
        <div><x-ace-editor value="horizontal:仅允许水平方向调整大小" resize="horizontal"></x-ace-editor></div>
        <div><x-ace-editor value="both:垂直水平方向均可" resize="both"></x-ace-editor></div>
    </u-linear-layout>

    API

    Props/Attrs

    Prop/Attr Type Options Default Description
    value.sync, v-model string '' 代码段
    lang string 'text' 设置语言
    theme string 设置主题。如果不设置,默认使用 Cloud UI 风格的主题。
    readonly boolean false 是否只读
    disabled boolean false 是否禁用
    options object 配置项对象
    autofocus boolean false 组件挂载时自动获取焦点

    Install

    npm i @cloud-ui/x-ace-editor.vue

    DownloadsWeekly Downloads

    8

    Version

    0.9.0

    License

    MIT

    Unpacked Size

    960 kB

    Total Files

    57

    Last publish

    Collaborators

    • lip966
    • damowangdexiaogenban
    • lifuquan
    • rainfore
    • zhangxiaoyudaisy