I am using element-ui, version 1.43.
I want to add spell-check in text area input(if I write something wrong then red line should appear below that text and on right click i can get suggestion).
How to implement it using element-ui.
If you're using an el-form & el-form-item to wrap your el-input type='textarea' elements, you can utilize the label slot to hook into native browser spellcheck functionality.
<el-form>
...
<el-form-item>
<label slot="label" spellcheck="true">Notes</label>
<el-input type="textarea"></el-input>
</el-form-item>
...
</el-form>
Related
(I'm using Vue 2.6) - I read the documentation on v-expansion-panels on vuetify which says it has disabled property to set, but it sets the whole v-expansion-panel disabled, and I want to disable a single v-expansion occurency or more, because I use a for to fill all expansion panels, like 10 occurencies for example, and I want to disable the occurency that has a certain condition. Can someone help? I already tried to use #click.stop inside expansion header, expansion content, but it does not work. I wanted to do like this. On number === 1, don't expand. Or I could even execute a function to return a false, and a message on screen.
<v-expansion-panels>
<v-expansion-panel
#click.stop="number === 1"
>
<v-expansion-header />
<v-expansion-content />
</v-expansion-panel>
</v-expansion-panels>
The v-expansion-panel takes a disabled prop and you can use with a condition to select the panel you want to disable.
<v-expansion-panel
v-for="(item,i) in 5"
:key="i"
:disabled="i === 2"
>
Demo: https://codepen.io/fu7zed/pen/GRQbbVx
API reference: https://vuetifyjs.com/en/api/v-expansion-panel/
Is it possible to disable this blur call on the active element from SwiperJS in the onTouchStart event handler?
Some background:
For touch and desktop devices I'm using swiper for forms on swiper-slides. Within a form I'm using vue-select (a combobox).
The Problem: When the user selects an entry, the entry get not selected on the first time but on the second time.
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div>First form</div>
<v-select :options="selectionEntries"></v-select>
</div>
<div class="swiper-slide">
<div>Second form</div>
<v-select :options="selectionEntries"></v-select>
</div>
</div>
</div>
See also this example on codepen
I figured out that it seems to work correctly:
When I remove the blur-listener on the input field of the vue-select box. But it is used to close the selection list when the user leaves the field.
When I comment out this blur call in SwiperJS. I'm not sure why it is used there.
The first point is not an option, so is it possible to disable the blur call of SwiperJS via configuration?
Currently I'm using this workaround (SwiperJS V6.4.1):
const swiper = new Swiper(".swiper-container", {
// Workaround part 1:
touchStartPreventDefault: false
})
// Workaround part 2:
swiper.touchEventsData.formElements = 'notExistingHtmlTagName'
Part 1: To handle mouse down and click events on all elements, set the swiper parameter touchStartPreventDefault: false.
That will disable this code block: https://github.com/nolimits4web/swiper/blob/9dead9ef4ba5d05adf266deb7e3703ceb199a241/src/components/core/events/onTouchStart.js#L90-L97
Part 2: Set swiper.touchEventsData.formElements = 'undefined' to define nothing as formElements. That will disable the code block that calls blur: https://github.com/nolimits4web/swiper/blob/9dead9ef4ba5d05adf266deb7e3703ceb199a241/src/components/core/events/onTouchStart.js#L81-L88
I use this vue-stripe-checkout (Vue.js), all works fine but if i write a fake number of card a automatic message is display and say "you'r number is incorrect".
Is what i want but i don't know how to add style on that, because is as 0 style and is very ugly.
The style object don't work on that, i found in documentation a Slots for "card-errors" but i don't know what means.
If someone can help me ?
<stripe-elements
:styleObject="style"
ref="elementsRef"
:pk="publishableKey"
locale="fr"
#token="tokenCreated"
#loading="loading = $event"
>
</stripe-elements>
<button class="btn btn-success px-5" #click="submit">Payer</button>
I'm using Bootstrap-Vue form inputs, and using Vuelidate to validate. Currently on user input, I get the outline colour (red or green) and a tickbox or a cross depending if valid or invalid. I now want to change this behaviour so that it only shows this on blur. I added the following line of code to my input, however the same behaviour occurs:
#blur="$v.form.code_part1.$touch()"
Here is my full code for an input, please can you explain where I am going wrong, or how to approach this correctly?
<b-form-input
:class="{ 'hasError': $v.form.code_part2.$error }"
placeholder="Next Four"
v-model="$v.form.code_part2.$model"
#blur="$v.form.code_part1.$touch()"
:state="$v.form.code_part2.$dirty ? !$v.form.code_part2.$error : null"
class="form-control mb-3"
name="Part 2"
id="code_part2"
type="text"
maxlength="4"
aria-label="Next Four"
></b-form-input>
Add the .native modifier
#blur.native="$v.form.code_part1.$touch()"
Binding Native Events to Components
I got a paper-listbox containing a paper-checkbox contained within each paper-item of the list.
<paper-listbox id="groupMembers" multi attr-for-selected="label">
<template is="dom-repeat" items="[[users]]" as="member">
<paper-item label="[[member.user]]">
<span class="member-user">[[member.user]]</span>
<paper-checkbox checked="[[member.isManager]]"></paper-checkbox>
</paper-item>
</template>
</paper-listbox>
Whenever the checkbox is clicked it also changes the selected state of the listbox items resulting in an paper-item becoming selected or deselected.
How can that be prevented?
paper-listbox uses Polymer.IronSelectableBehavior and Polymer.IronMultiSelectableBehavior. So, you can use selectable attribute in order to prevent changing the selected state.
selectable is a CSS selector string. If this is set, only items that match the CSS selector are selectable. You can put a random string so that it won't match the paper-item element.
Demo
i solved the problem by avoiding it ;)
Moved the checkbox out of the paper-item into the dom-repeat like so:
<paper-listbox id="groupMembers" multi attr-for-selected="label">
<template is="dom-repeat" items="[[users]]" as="member">
<paper-item label="[[member.user]]">
<span class="member-user">[[member.user]]</span>
</paper-item>
<div class="checkWrapper">
<paper-checkbox checked="[[member.isManager]]"></paper-checkbox>
</div>
</template>
</paper-listbox>
With a bit of CSS positioning magic that works. Added a wrapper div to allow absolute positioning.