element-ui#Option JavaScript Examples
The following examples show how to use
element-ui#Option.
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 |
|
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 |
|
Vue.use(Option)
Example #3
| Source File: element.js From wl-admin with MIT License | 5 votes |
|
Vue.use(Option);
Example #4
| Source File: index.js From jsbox with MIT License | 5 votes |
|
Vue.use(Option);
Example #5
| Source File: import.js From jsbox with MIT License | 4 votes |
|
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 |
|
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');
}
