element-ui#Select JavaScript Examples

The following examples show how to use element-ui#Select. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.js    From ffexplorer with MIT License 6 votes vote down vote up 
document.addEventListener('DOMContentLoaded', () => {
    __webpack_public_path__ = FF_EXPLORER_DATA.path.root + 'administrator/components/com_ffexplorer/assets/explorer/dist/';

    locale.use(lang)

    Vue.use(Select);
    Vue.use(Option);
    Vue.use(Input);
    Vue.use(Button);
    Vue.use(Dialog);
    Vue.use(Upload);
    Vue.use(Pagination);
    Vue.use(Loading.directive);

    Vue.prototype.$loading = Loading.service;
    Vue.prototype.$msgbox = MessageBox;
    Vue.prototype.$alert = MessageBox.alert;
    Vue.prototype.$confirm = MessageBox.confirm;
    Vue.prototype.$prompt = MessageBox.prompt;
    Vue.prototype.$message = Message;

    Vue.prototype.$t = function(text) {
        return translate(text);
    }

    Vue.prototype.$ajax = function(options, method) {
        const $ = jQuery;
        const {path, params} = FF_EXPLORER_DATA;
        const url = path.ajax;
    
        return new Promise((resolve, reject) => {
            $.ajax({
                method: method ? method : 'post',
                url: url,
                dataType: 'json',
                data: $.extend({}, params, options),
            })
            .done(response => {
                resolve(response);
            })
            .fail(error => {
                reject(error);
            });
        });
    }

    new Vue({
        store,
        render: h => h(App)
    }).$mount('#explorer-app');
});
Example #2
Source File: element.js    From vue-shop with MIT License 5 votes vote down vote up 
Vue.use(Select)
Example #3
Source File: element.js    From wl-admin with MIT License 5 votes vote down vote up 
Vue.use(Select);
Example #4
Source File: index.js    From jsbox with MIT License 5 votes vote down vote up 
Vue.use(Select);
Example #5
Source File: import.js    From jsbox with MIT License 4 votes vote down vote up 
function initEl () {
    initLibs();
    $.query('body').append($.create('div#SetApp'));
    app = new Vue({
        components: {Dialog, Select, Option, Button},
        template: /* html*/`
            <div>
            <Dialog title='加载第三方库' :visible.sync="showDialog" :before-close='beforeClose'>
                <Select
                v-model="value"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="请选择或输入依赖">
                    <Option
                    v-for="item in libs"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name">
                    <span class='lib-name'>{{ item.name }}</span>
                    <span class='lib-url'>{{item.url}}</span>
                    <a class='lib-version' :href='item.url' target="view_window">@{{ item.version }}</a>
                    </Option>
                </Select>
                <div slot="footer" class="dialog-footer">
                    <Button type="primary" @click="load" icon='el-icon-download'>加载</Button>
                    <Button @click="close" icon='el-icon-close'>取消</Button>
                </div>
            </Dialog>
            <Dialog title='加载运行环境' :visible.sync="showEnvDialog" :before-close='beforeEnvClose'>
                <Select
                v-model="envValue"
                filterable
                default-first-option
                placeholder="请选择运行环境">
                    <Option
                    v-for="item in envs"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name">
                    <span class='lib-name'>{{ item.name }}</span>
                    <span class='lib-url'>deps: {{item.deps}}</span>
                    <span class='lib-version'>[{{ item.type }}]</span>
                    </Option>
                </Select>
                <div slot="footer" class="dialog-footer">
                    <Button type="primary" @click="loadEnv" icon='el-icon-check'>确认</Button>
                    <Button @click="closeEnv" icon='el-icon-close'>取消</Button>
                </div>
            </Dialog>
            </div>
        `,
        data () {
            return {
                showDialog: false,
                showEnvDialog: false,
                libs,
                envs,
                value: [],
                envValue: ''
            };
        },
        methods: {
            open () {
                this.showDialog = true;
            },
            close () {
                this.clearData();
                this.showDialog = false;
            },
            load () {
                loadResources({
                    array: this.value,
                    success: () => {
                        this.close();
                    }
                });
            },
            beforeClose (done) {
                this.clearData();
                done();
            },
            clearData () {
                this.value = [];
            },
            openEnv () {
                this.showEnvDialog = true;
            },
            loadEnv () {
                window.open(`${location.protocol}//${location.host}${location.pathname}?env=${this.envValue}`);
            },
            closeEnv () {
                this.clearEnvData();
                this.showEnvDialog = false;
            },
            beforeEnvClose (done) {
                this.clearEnvData();
                done();
            },
            clearEnvData () {
                this.envValue = '';
            }
        }
    });
    app.$mount('#SetApp');
}
Example #6
Source File: import.js    From jsbox with MIT License 4 votes vote down vote up 
function initEl () {
    initLibs();
    $.query('body').append($.create('div#SetApp'));
    app = new Vue({
        components: {Dialog, Select, Option, Button},
        template: /* html*/`
            <div>
            <Dialog title='加载第三方库' :visible.sync="showDialog" :before-close='beforeClose'>
                <Select
                v-model="value"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="请选择或输入依赖">
                    <Option
                    v-for="item in libs"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name">
                    <span class='lib-name'>{{ item.name }}</span>
                    <span class='lib-url'>{{item.url}}</span>
                    <a class='lib-version' :href='item.url' target="view_window">@{{ item.version }}</a>
                    </Option>
                </Select>
                <div slot="footer" class="dialog-footer">
                    <Button type="primary" @click="load" icon='el-icon-download'>加载</Button>
                    <Button @click="close" icon='el-icon-close'>取消</Button>
                </div>
            </Dialog>
            <Dialog title='加载运行环境' :visible.sync="showEnvDialog" :before-close='beforeEnvClose'>
                <Select
                v-model="envValue"
                filterable
                default-first-option
                placeholder="请选择运行环境">
                    <Option
                    v-for="item in envs"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name">
                    <span class='lib-name'>{{ item.name }}</span>
                    <span class='lib-url'>deps: {{item.deps}}</span>
                    <span class='lib-version'>[{{ item.type }}]</span>
                    </Option>
                </Select>
                <div slot="footer" class="dialog-footer">
                    <Button type="primary" @click="loadEnv" icon='el-icon-check'>确认</Button>
                    <Button @click="closeEnv" icon='el-icon-close'>取消</Button>
                </div>
            </Dialog>
            </div>
        `,
        data () {
            return {
                showDialog: false,
                showEnvDialog: false,
                libs,
                envs,
                value: [],
                envValue: ''
            };
        },
        methods: {
            open () {
                this.showDialog = true;
            },
            close () {
                this.clearData();
                this.showDialog = false;
            },
            load () {
                loadResources({
                    array: this.value,
                    success: () => {
                        this.close();
                    }
                });
            },
            beforeClose (done) {
                this.clearData();
                done();
            },
            clearData () {
                this.value = [];
            },
            openEnv () {
                this.showEnvDialog = true;
            },
            loadEnv () {
                window.open(`${location.protocol}//${location.host}${location.pathname}?env=${this.envValue}`);
            },
            closeEnv () {
                this.clearEnvData();
                this.showEnvDialog = false;
            },
            beforeEnvClose (done) {
                this.clearEnvData();
                done();
            },
            clearEnvData () {
                this.envValue = '';
            }
        }
    });
    app.$mount('#SetApp');
}