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';
}
Within Typescript, the const modifier can be applied to function type parameters. This ensures that the inferred type matches the literal received with as const. function identity<const T>(a: T){ return a } For example, when using identity({ a: 4 ...
My backend is powered by Laravel and the frontend uses Vue. Users authenticate by calling my Laravel API to get an Auth token and a refresh token. The Auth token expires after 2 minutes, while the refresh token lasts longer. Storing the refresh token in l ...
Imagine a scenario where the following code is present: type QueryResult<ResultType = string, ErrorType = string> = { result: ResultType, } | { errors: ErrorType, } So, if I want to initialize my result, I can proceed like this: const myResult: ...
I'm currently working on a project in a new location and I've noticed some differences in the margins compared to my previous work environment. Despite having the same package.json, the only change seemed to be due to a new npm install. For insta ...
I am facing an issue while working with videos in Angular. I am fetching the video URLs from an API to embed them in my application using the sanitazer.bypassSecurityTrustResourceUrl function provided by Angular. The videos are being displayed correctly wi ...
I am currently working on Vue.js template development and facing an issue with filtering nested data in a faq section. When I try to add a search bar, the nested data array returns all data without proper filtering. Dom <v-container> <v ...
I'm having trouble finding an eslint setup that is compatible with Nuxt3's auto-import feature to prevent no-undef errors. I have tried various packages like @antfu/eslint-config, plugin:nuxt/recommended, @nuxt/eslint-config, @nuxtjs/eslint-confi ...
Recently, I developed a SolidJS TypeScript UI component and successfully published it to the npm registry. The project structure is organized as follows: |-app |-index.html |-src |-index.tsx |-App.tsx |-utils |- ... |-com ...
1. A Puzzle to Solve I am faced with the challenge of implementing a dynamic language change flow for my blog. Here is an overview of how I envision it: The user initiates a language change by clicking a button that triggers an event (Subject). This eve ...
Within my main component, I have 2 nested components. Each of these components contain forms with input fields and span elements. Users can edit the form by clicking on an edit button, or cancel the editing process using a cancel button. However, I need to ...
Currently, I am utilizing Vue in my web application for object-oriented form validation. This approach allows me to focus on back-end validation while Vue manages the rest. With a multitude of page-specific forms within my app, I find that my Vue instance ...
Here is a snippet of the code I'm working on: https://codesandbox.io/s/busy-bose-4qhoh?file=/src/App.tsx I am currently in the process of creating a form that will accept an array of objects called Criterion, which are of a specific type: export inte ...
I have 3 different observables that I am using to filter the HTML content. Here is the TypeScript code snippet: fiscalYear$ = this.store$.select(this.tableStoreService.getFiscalYear); isLoading$ = this.store$.select(this.tableStoreService.tableSelector ...
Just dipping my toes into Typescript and experimenting with interfaces for my functions: interface StringFunction { (arg1: string): string } I managed to associate this interface with a function by declaring it as a variable: let testFunction: Strin ...
Utilizing ng-multiselect-dropdown within my bootstrap modal allows users to choose multiple products. Each time an item is selected (onItemSelect), a new div is inserted using the jQuery method insertAfter(). This new div displays the quantity of the selec ...
My ASP.Net Core MVC project utilizes VueJs2 for more complex tasks, with each view having its own corresponding js file. The directory structure is as follows: ├ Controllers\HomeController.cs (with actions Index & Details) ├ Scripts\Hom ...
Is there a way to retrieve the text name of a selected dropdown value using a PrimeNG dropdown? Incorporating a PrimeNG dropdown: HTML <p-dropdown [options]="regionSelectList" [(ngModel)]="reg" [filter]="true" [ngModelOptions]="{standalone: true}"> ...
I'm currently in the process of updating some older code and I have created a service that I want to inject into the constructor of a class. There are two key points to consider about this particular class. The first point is that it is instantiated b ...
I am working on a project using TypeScript and React, which has a dependency on another local TypeScript based project. Here are the configurations: tsconfig.json of the React project: "compilerOptions": { "target": "esnext& ...
After clicking on the IconButton, the background color changes to an oval shape. I now need to modify the background color when it is clicked. CSS The CSS code for the IconButton changes the background color upon hover. I require a similar effect for the ...