I am using vuetify and would like to add an SVG icon to the start of the text field. I know you can prepend or append icons from v-icon, but I would like to use my own SVG image in a similar way.
Just use the "prepend" slot:
<v-text-field label="My text field" type="text">
<template v-slot:prepend>
<img width="24" height="24" src="[PathToAssets]/whatever.svg" >
</template>
</v-text-field>
You can read about the public path
I would strongly recommend using the public path:
Add your svg image to public/img/icons/test.svg.
Use the img tag like this <img src="/img/icons/test.svg"> to point to the svg location.
If you really dont want to use the public path for your svg's you can use this loader to import your svg's: https://github.com/visualfanatic/vue-svg-loader
Related
here's the picture
here's the style when input is clicked
Here's my code:
<ion-item fill="outline">
<ion-icon :src="mail" slot="start"></ion-icon>
<ion-label position="floating">Email Address</ion-label>
<ion-input placeholder="Enter text"></ion-input>
</ion-item>
I am using ionic framework and vue.js as a javascript framework. Please help.
The extra space above the <ion-label> is present because the text inside the tag is going to move there when clicked.
In case you want the Icon and the text of the label on one level you can easily achieve this by repositioning the Icon itself.
<style>
ion-icon{
margin-block-start: auto;
}
</style>
Here is an example.
I'm trying to use Buefy's tooltip with a content slot, so insted of using the label prop to set tooltip's text, I could use HTML tags to format my text.
I tried to check the component source code, and there is indeed a content slot, but it is not working. Here is my code:
<b-tooltip
position="is-left"
>
<template #content>
My <b>content</b> here
</template>
<b-input
v-on:keyup.native.enter="onEnter"
type="password"
v-model="password"
placeholder="Enter Password"
password-reveal
class="custom-input-style password-field"
></b-input>
</b-tooltip>
Check your buefy version, if it is below 0.9.0 then it won't work
I am not able to get the svg xlink:href work as a dynamic property in Nuxtjs(Vue). I am trying to use it like below
<svg class="icon phone-icon">
<use
v-bind="{ 'xlink:href': '../assets/sprite.svg#icon-download' }"
></use>
</svg>
How do I make it work?
Nuxt does not process any string value in any object to check if it is a link or not, Use require to find the public path of your SVG
<svg class="icon phone-icon">
<use
v-bind="{ 'xlink:href': require('../assets/sprite.svg') + '#icon-download' }"
></use>
</svg>
Also, take a look at SVG Sprite Module, this module creates a clean way to work with SVG icons
On NuxtJS 2 I had to do the following:
<svg class="icon">
<use v-bind="{ 'xlink:href': require('~/assets/sprite.svg') + '#icon-download' }"></use>
</svg>
without ~ it did not work.
What do I have to do to use a nuxt-link as an image?
When I display an image in Vue, I usually do:
<img src="~assets/icons/filterLinkButton.svg">
but when I do the same with a nuxt-link, the path to the file does not get evaluated.
# this is not working
<nuxt-link
tag="img"
src="~assets/icons/filterLinkButton.svg"
to="/locations">
</nuxt-link>
What can I do to solve this?
EDIT:
It works though if I do:
<template>
<nuxt-link
:src="image"
tag="img"
to="/locations">
</nuxt-link>
</template>
<script>
import image from '~/assets/icons/filterLinkButton.svg'
export default {
data() {
return {
image: image
}
}
}
</script>
You can do without a variable in data.
# this is working
<nuxt-link
tag="img"
:src="require('~/assets/icons/filterLinkButton.svg')"
to="/locations">
</nuxt-link>
According to this link, the tag prop is deprecated in vue-router 4 and should be replaced with v-slot. So arkadij_ok's answer would now look like this:
<nuxt-link
v-slot="{navigate}"
to="/locations"
>
<img
:src="require('~/assets/icons/filterLinkButton.svg')"
role="link"
#click="navigate"
/>
</nuxt-link>
I have used an image as a nuxt-link by placing the image inside of the nuxt-link tag.
a screen shot of a nuxt-link with an img
The html viewed with chrome dev tools
Well according to the documentation if you're using webpack you can use that alias (~assets) inside your css files, but apparently you need to use the ~/ version on your template, also take a look at the approach bellow using the static folder I think that suits you better since the asset you used in your question can be placed in the static folder and get rid of the alias
I am using elementUI's pagination component in my VueJS app.
I wish to replace the default 'Go to' text to 'Page' without altering the inner div:
<span class="el-pagination__jump">
Go to
<div class="el-input el-pagination__editor is-in-pagination">
<!----><input type="number" autocomplete="off" min="1" max="6" class="el-input__inner"><!----><!----><!---->
</div>
</span>
How can I do this? Do I have access to the DOM?
Thanks.
You can play with the localization settings. Since the default locale is Chinese, I assume you are already doing this in your main.js
import localeUI from 'element-ui/lib/locale'
import defaultLang from 'element-ui/lib/locale/lang/en'
localeUI.use(defaultLang);
So you have to clone the English locale, modify the el.pagination.goto value and then use this new locale.