Is there a method to customize the close button in el-dialog and replace it with my own design?
For instance, can I change the default close button located at the top left corner of the dialog?
<el-dialog
title="Tips"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>My custom close button</span> # my custom close button placed at the left top corner.
</el-dialog>
You have the option to hide the default close button on a property and then customize it by adding your own close button or any style
const app = new Vue({
el: '#app',
data() {
return {
dialogVisible: false,
}
},
methods: {
beforeClose(done) {
this.dialogVisible = false;
done();
}
}
}).my-class {
position: absolute;
top: 15px;
left: 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.common.dev.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.13.2/index.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
<body>
<div id="app">
<el-button @click="dialogVisible = true">Click</el-button>
<!-- <el-dialog :visible.sync="dialogVisible"> -->
<el-dialog :visible="dialogVisible" :before-close="beforeClose" :show-close="false">
<span class="my-class"><el-button type="danger" round @click="dialogVisible = false">Close</el-button></span>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="dialogVisible = false">Save</el-button>
</div>
</el-dialog>
</div>
</body>Your custom css styles
I managed to locate the solution by applying a clever little technique.
Let me share the smart method I used.
.el-icon-close:before{
content: 'Close';
}
I'm working on creating a third interface that depends on the value of properties from two other interfaces, while also introducing a unique third property. I've chosen not to extend the third property from the first two interfaces as it may not ...
Check out this sample code: const execPromise = util.promisify(exec); try { const { stdout } = await execPromise(cliCommand); } catch (error) { if (error instanceof S3ServiceException) { // error message is not handled correctly console ...
When it comes to authentication, I utilize nuxt-auth. After a successful login, my intention is to redirect to the main page using this.$router.push('/'). However, upon doing so, I am encountering a blank page with the following message: 2021 ...
Hey there, I'm wondering if anyone knows how to integrate a new custom language into vuejs3-datepicker? I checked out the documentation at https://www.npmjs.com/package/vuejs3-datepicker?activeTab=readme, but it seems like you need to add the new lan ...
Trying to integrate vuejs as a frontend framework with WP restapi, I faced the challenge of needing the wordpress generated api url accessible to all vue components. Here is my approach: Vue.mixin({ data: function () { return { get apiUrl () { ...
One query is bothering me - I am attempting to create my own version of Injectable and I need to determine if a specific decorator exists in my Class. Is there a way to list all decorators of a class? Let's take the example below. All I want to know i ...
Brand new to constructing charts and currently facing an issue where the chart is not updating dynamically even though the data is being loaded into the dataset. This is how my chart.js file looks: import { Line, mixins } from 'vue-chartjs' con ...
I've been grappling with this error I encountered while working on Angular 12. Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. This is the code f ...
As a newcomer to Nuxt, I've successfully implemented a bootstrap header with the standard v-if="authenticated" logic for displaying login/logout buttons. The authentication provider I'm using is Firebase, which includes an onAuthStateChanged met ...
Is there a way to maintain the current page in data tables within vuetify when the items are changed? For example, if the current page is 2 and a new item is added to the items, how can we ensure that the current page remains at 2? Check out this Codepen ...
We are currently grappling with the challenge of effectively implementing tree shaking for CSS within Vue Single File Components using Webpack. Within our package.json file, we have specified: "sideEffects": ["*.css", "*.less","*.vue"], which appears to b ...
An issue arises when running npm run build: ERROR TypeError: Cannot read property 'match' of undefined. - Building for production... ERROR TypeError: Cannot read property 'match' of undefined TypeError: Cannot read property &apo ...
At the moment, I am utilizing NestJS for creating a restful API. However, I am currently facing an issue with the ValidationPipe. It seems to only be functioning properly within controller methods and not when used in service methods. My goal is to implem ...
In my Vue 3 project, I'm implementing vuedraggable to enable element reordering within an expansion panel. However, I've encountered an issue where the dragged elements revert to their original positions upon release. This behavior suggests that ...
I have decided to convert my Nuxt application to SSR in order to utilize nuxtServerInit and asyncData. Below are the steps I followed during this conversion process. Removed ssr: false from nuxt.config.js Dispatched actions to initialize the store's ...
I have been working on my application using a combination of CouchDB and Angular technologies. To retrieve all documents, I have implemented the following function: getCommsHistory() { let defer = this.$q.defer(); this.localCommsHistoryDB ...
I have a Foo type that consists of multiple types For example: type Foo = string | number I need to receive this type and convert it into an array of the individual types within the union type TransformedFoo = ToUnionOfArray<Foo> // => string[] ...
Exploring a stricter definition of the Object.keys function using mapped types in TypeScript. An Illustrative Example: To begin, consider an object defined using const: const myObj = { a: 'some value', b: 5 }; Typically, when utilizing Ob ...
I am currently using Angular 7 and I am trying to achieve a functionality where the text on a button changes every time it is clicked, toggling between 'login' and 'logout'. Below is the code snippet I have been working on: typescript ...
Is there a way to ensure that the setSearchedMovie function completes before executing the fetchSearchedMovie(searchedMovie) function? const { updateMovies, searchedMovie, setSearchedMovie } = useContext(MoviesContext); const fetchMoviesList = (ev ...