I created a dialog with a custom el-dialog title using the el-icon, but the el-icon does not appear.
how to make the icon appear ?
here my code
<el-dialog :title="titleData" :visible.sync="dialogVisible" width="30%">
<span>This is a message</span>
<span slot="footer" class="dialog-footer">
<el-button #click="dialogVisible = false">Cancel</el-button>
<el-button type="primary" #click="dialogVisible = false">Confirm</el-button>
</span>
</el-dialog>
methods: {
setTitle() {
this.titleData = '<el-icon-info></el-icon-info>' + 'Info'
}
here my fiddle: https://jsfiddle.net/dede402/y93kvew5/6/
just use the slot title available on the el-dialog component. Here is your fiddle updated with a working solution : https://jsfiddle.net/budgw/y93kvew5/10/
Slot
—: content of Dialog
title: content of the Dialog title
footer: content of the Dialog footer
<el-dialog :visible.sync="dialogVisible" width="30%">
<span slot="title"><el-icon-info></el-icon-info>Info</span>
<span>This is a message</span>
<span slot="footer" class="dialog-footer">
<el-button #click="dialogVisible = false">Cancel</el-button>
<el-button type="primary" #click="dialogVisible = false">Confirm</el-button>
</span>
</el-dialog>
Related
I am using Vue.js for my web application. I created a custom html popup element and tried to add it to the UI (on top of the house icon which you can see in the example), but I cannot make it appear on coordinates which are clicked. I know that I can do it with adding to the view UI and setting position to "manual", but I couldn't find any examples of setting the specific coordinates. Thank you in advance for your help.
this.viewt.ui.add(document.getElementsByClassName("popup")[0], {position: "manual"});
example
Template code
<template>
<div class="popup" v-if="openPopUp" ref="popupwindow">
<article class="house-card" id="popup-test">
<div class="img-wrapper">
<img class="post-image"
src="https://www.comitatoaurora.com/wp-content/uploads/2019/11/contemporary-exterior.jpg"/>
<div class="middle">
€{{ Math.round(this.object.Price) }}
</div>
</div>
<div class="article-details" :key="this.object.Address" #mouseover="hover = true"
#mouseleave="hover = false">
<div class="post-category">
<div>
{{
this.object.Address.replace(this.object.Address.substring(this.object.Address.indexOf(','),
this.object.Address.indexOf(',') + 9), ', ')
}}<span
style="margin: 0.3vw"></span>
</div>
</div>
<div class="percentage-circle">
<div class="progress-single">
<v-progress-circular
color="rgba(81, 87, 102, 0.99)"
:size="30"
:width="2"
:value="this.object.Risk"
>{{ this.object.Risk }}
</v-progress-circular>
<div class="progress-text">
<p>Risk</p>
<p>Score</p>
</div>
</div>
<div class="progress-single">
<v-progress-circular
color="rgba(81, 87, 102, 0.99)"
:size="30"
:width="2"
:value="this.object.Gross_rental_yield*10"
>{{
Math.round((this.object.Gross_rental_yield +
Number.EPSILON) * 10) / 10
}}
</v-progress-circular>
<div class="progress-text">
<p>Gross</p>
<p>Yield</p>
</div>
</div>
<div class="progress-single">
<v-progress-circular
color="rgba(81, 87, 102, 0.99)"
:size="30"
:width="2"
:value="this.object.Net_yield*100/5"
>{{ Math.round((this.object.Net_yield + Number.EPSILON) * 10) / 10 }}
</v-progress-circular>
<div class="progress-text">
<p>Net</p>
<p>Yield</p>
</div>
</div>
</div>
<div class="percentage-circle metrics-level">
<div class="bottom-metric"><img height="12vh"
src="../../public/img/year.svg"
alt="year"/><b>{{
this.object.ConstructionYear
}} </b></div>
<div class="headerDivider"></div>
<div class="bottom-metric"><img height="12vh"
src="../../public/img/rent.svg"
alt="rent"/><b>{{ this.object.Estimated_Rent }}€/mo</b>
</div>
<div class="headerDivider"></div>
<div class="bottom-metric" style="margin-left: 0.15vw !important;"><img height="12vh"
src="../../public/img/square.svg"
alt="square"/>
<b>{{ this.object.Sqm }}m<sup>2</sup></b></div>
</div>
<transition name="fadeo">
<div v-if="hover" class="overlay">
<router-link :to="{name:'card', params: { id: this.id }}">
<div class="overlay-text"> View Asset</div>
</router-link>
</div>
</transition>
</div>
</article>
</div>
</template>
There are two ways for popup to open over a selected feature,
automatically, for example when a feature is selected,
manually, using popup open method.
If you opted for 1), you have to set the PopupTemplate for the layer or the graphic. You have a couple of ways to define custom content for the PopupTemplate, like using a funtion or a promise.
ArcGIS API - PopupTemplate content
If you opted for 2), then you need to,
disable the default behavior if the view (auto open to false),
listen for click events,
on every click event manually open the popup (if a feature was selected), with the map point of the click event as location
view.popup.autoOpenEnabled = false; // <- disable view popup auto open
view.on("click", function (event) { // <- listen to view click event
if (event.button === 0) { // <- check that was left button or touch
view.popup.open({ // <- open popup
location: event.mapPoint, // <- use map point of the click event
fetchFeatures: true // <- fetch the selected features (if any)
});
}
});
I try to create a layout with element.io which has a collapsing sidebar menu.
It works quite well, the only problem is that I do not gain anything since the width of the menu and the content part are fixed.
My code looks like this:
<template>
<el-row>
<el-col :span="4">
<template>
<el-menu :router="true"
:default-active="$route.path"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
:collapse="isCollapse"
class="el-menu-vertical-demo"
>
<template v-for="rule in routes">
<el-menu-item :index="rule.path">
<i :class="rule.icon"></i>
<span slot="title">{{ rule.name }}</span>
</el-menu-item>
</template>
</el-menu>
</template>
</el-col>
<el-col :span="20">
<el-row>
<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
<el-radio-button :label="true" :disabled="isCollapse" border>
<i class="fas fa-caret-left"></i>
</el-radio-button>
<el-radio-button :label="false" :disabled="!isCollapse" border>
<i class="fas fa-caret-right"></i>
</el-radio-button>
</el-radio-group>
</el-row>
<el-row>
<router-view></router-view>
</el-row>
</el-col>
</el-row>
</template>
<script>
export default {
data() {
return {
routes: this.$router.options.routes,
activeLink: null,
isCollapse: false
};
},
mounted: function () {
},
methods: {
}
};
</script>
How can I fix it so the content block will occupy 100% of the available width?
Ok, I found a simple solution.
First, I moved to element-io elements. The menu is now embedded inside el-aside tag, while the main part is embedded inside an el-container tag.
Second, I added a dynamic css class to the el-aside tag:
<el-aside v-bind:class="[isCollapse ? 'menu-collapsed' : 'menu-expanded']">
Now, if you don't want to mess around with transitions, simply add to the el-menu component :collapse-transition="false" and that's it!
I am currently experimenting in Element UI a beautiful VueJS frame for ui.
I am having issue when putting an select element inside a dropdown menu because when I select an item inside the select element it will close the dropdown also.
How should I make the dropdown stay whenever I select an item in select element?
Here is the sample demo. fiddle
https://jsfiddle.net/vy70ogbz/
I got the same problem and I solved it by small hack: when a dropdown is open I set disabled="true" property to the trigger button.
<el-button
:disabled="dropdownIsOpen"
slot="button"
>Open</el-button>
It works because in the source code we have condition for this case
https://github.com/ElemeFE/element/blob/dev/packages/dropdown/src/dropdown.vue#L121
Example: click
Why dont you use a menu to achieve this. I find it is more flexible, you can use the menu-trigger="click" attribute to toggle the menu only when clicked. like this
<el-menu
:default-active="activeIndex"
mode="horizontal"
menu-trigger="click"
#select="handleSelect">
<el-submenu
class="sub-menu-more">
<template slot="title">
<b>Click to dropdown</b>
</template>
<el-menu-item
index="1">
<span >Team</span>
</el-menu-item>
<el-menu-item
index="2">
<span >Product</span>
</el-menu-item>
<el-menu-item
index="3">
<span >item</span>
</el-menu-item>
<el-menu-item
index="4">
<el-select v-model="value" placeholder="Select">
<el-option
:label="'test1'"
:value="'test1'">
</el-option>
<el-option
:label="'test1'"
:value="'test1'">
</el-option>
<el-option
:label="'test1'"
:value="'test1'">
</el-option>
</el-select>
</el-menu-item>
</el-submenu>
</el-menu>
see fiddle
You can prevent the dropdown from hiding.
Use the following code in your template
<el-dropdown ref="dropdown" trigger="click">
<span class="el-dropdown-link">
Dropdown List<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>
<el-select v-model="selectData" #change="handleChange">
<el-option value="1">Option 1</el-option>
<el-option value="2">Option 2</el-option>
<el-option value="3">Option 3</el-option>
</el-select>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
And this in your script
new Vue({
data: {
selectData: null
},
methods: {
handleChange() {
this.$nextTick(() => {
this.$refs.dropdown.show();
});
}
}
}).$mount('#app')
I am trying to hide and show a font awesome 5 icon on click. The value changes behind the scene but the icon isn't being changed. I have tried the other class bindings that vue js has to offer but it produced the same result.
<template>
....
<a href="#" class="social-button" #click.prevent="showAttribute(index)" rel="tooltip" data-color-class="primary" data-animate="animated fadeIn" data-original-title="" data-toggle="tooltip" data-placement="bottom">
<i class="fa fa-eye" v-if="category.attributes[index].show"></i>
<i class="fa fa-eye-slash" v-else></i>
</a>
....
</template>
<script>
export default {
...
showAttribute(index){
this.category.attributes[index].show = !this.category.attributes[index].show;
},
...
}
</script>
try with this v-if="!category.attributes[index].show" instead fo v-else
<template>
....
<a href="#" class="social-button" #click.prevent="showAttribute(index)" rel="tooltip" data-color-class="primary" data-animate="animated fadeIn" data-original-title="" data-toggle="tooltip" data-placement="bottom">
<i class="fa fa-eye" v-if="category.attributes[index].show"></i>
<i class="fa fa-eye-slash" v-if="!category.attributes[index].show"></i>
</a>
....
</template>
<script>
export default {
...
showAttribute(index){
this.category.attributes[index].show = !this.category.attributes[index].show;
},
...
}
</script>
onPage load if you don't get the value or if you get the value null. then, you need to set the default value in the data()
here is the working example, https://codepen.io/anon/pen/rvqYgz
I need to implement folowing behavior->
I have the list with simple elements (just text). In elements i put the button "edit", that open edit element form on same place.
I have "add" button on top of list, that open same form.
I'd like to: when user click on "add" or "edit" another opened forms close. Also forms closed after sending request to server..
Sorry for my English! )
It looks like that:
List and add element form:
<template>
<el-row>
<el-col :span="24">
<el-button type="text" #click="show_add_form = true">Добавить</el-button>
<edit-dict-element-form
v-bind:dict="dictName"
v-if="show_add_form"
v-on:closeAddForm="show_add_form = false">
</edit-dict-element-form>
</el-col>
<el-col :span="24"
v-for="(element, index) in dict"
v-bind:key="element.id">
<dict-element
v-bind:element="element"
v-bind:index="index"
v-bind:dict="dictName">
</dict-element>
</el-col>
</el-row>
Element component:
<template>
<div>
<el-card v-if="!show_edit_form">
{{element.name}}
<el-button class="edit-button" type="text" #click="show_edit_form = true">Изменить</el-button>
</el-card>
<edit-dict-element-form
v-bind:dict="dict"
v-bind:edit_element="element"
v-if="show_edit_form"
v-on:closeAddForm="show_edit_form = false">
</edit-dict-element-form>
</div>
</template>
Add\Edit element form:
<template>
<el-card>
<el-form :rules="rules" :model="element" label-position="top" ref="AddDictElement">
<el-form-item label="Введите значение" prop="name">
<el-input v-model="element.name"></el-input>
</el-form-item>
</el-form>
<el-button type="danger" #click="$emit('closeAddForm')">Закрыть</el-button>
<el-button type="success" #click="addDictElement">Сохранить</el-button>
</el-card>
</template>
I'd like to only one add\edit form was opened at same time.
You could use an 'event bus' system for communicating between components (non parent-child communication).
var bus = new Vue()
// in component A's method
bus.$emit('id-selected', 1)
// in component B's created hook
bus.$on('id-selected', function (id) {
// ...
})
Please see:
https://v2.vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication