When autosizing an input (textarea) I’ve created with Element Plus for Vue 3, a new line is created before the text reaches the end of the line being typed. This makes the input box unnecessarily large, and there’s unneeded white space after the text.
Here's a video demo of the issue
Here's my code for the component:
<template>
<el-input
:autosize="{ minRows: 1, maxRows: 16 }"
type='textarea'
:input-style="{
border: '0px',
fontSize: 'large',
paddingTop:'15px',
paddingBottom:'15px',
borderRadius:'0',
backgroundColor: 'transparent',
minWidth: '100%'
}"
/>
</template>
<script>
</script>
<style>
</style>
And here's the docs
https://element-plus.org/en-US/component/input.html
Any ideas how to fix? Thanks.
Related
I managed to put the default navigation buttons of swiper.js, but I would like to be able to set up custom buttons and use the slideNext() and slidePrev() methods when clicking on them.
Unfortunately, I tried several methods, but nothing worked, and I have no idea how to do this with sveltekit.
Thanks for your help!
My code :
<script>
import SwiperSlide from './SwiperSlide.svelte';
import { register } from 'swiper/element/bundle';
register();
</script>
<swiper-container
navigation={true}
slides-per-view={1}
direction="horizontal"
space-between={30}
centered-slides={true}
keyboard={true}
pagination={{
hideOnClick: false,
clickable: true
}}
>
<SwiperSlide id={1} />
<SwiperSlide id={0} />
<SwiperSlide id={2} />
</swiper-container>
<style>
swiper-container {
width: 80%;
height: 100vh;
max-height: 1000px;
padding: 50px 0;
}
</style>
<SwiperSlide> is a component with a <swiper-slide></swiper-slide>.
I am starting to learn VueJS by building a simple website.
Right now I have made three components:
Header
Navigation
Topbar
I want to render navigation and topbar inside header, so I can call the header component inside every page (I haven't found a way to make a "layout" or something, that every page uses).
Header.vue
<template>
<header id="topNav">
<topbar />
<navigation />
</header>
</template>
<script lang="ts">
import Vue from 'vue'
import navigation from '../navigation/navigation.vue'
import Topbar from '../topbar/topbar.vue'
export default Vue.extend({
components: { Topbar, navigation },
})
</script>
<style scoped>
#topNav {
background-color: #fff;
-webkit-box-shadow: 0 0 35px 0 rgb(154 161 171 / 15%);
box-shadow: 0 0 35px 0 rgb(154 161 171 / 15%);
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 1001;
padding: 0 12px;
}
</style>
Topbar
<template>
<div id="topBar">
<h2>this is the topbar</h2>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({})
</script>
<style scoped>
#topBar {
border-bottom: 1px solid #dee2e6;
height: 70px;
padding: 0 10px;
z-index: 100;
position: fixed;
left: 0;
right: 0;
}
</style>
And when I call it on for example my home page (index.vue) nothing renders.
<template>
<main>
<header />
<div id="page-content">
<h1>Home</h1>
</div>
</main>
</template>
<script lang="ts">
import Vue from 'vue'
import Header from '../components/header/header.vue'
export default Vue.extend({
name: 'Home',
components: { Header },
})
</script>
I've tried reading the documentation and search around, but haven't been able to figure out what I'm doing wrong.
Since the question is tagged with a Nuxt tag, I'll recommend looking into Nuxt layouts: https://nuxtjs.org/docs/concepts/views#layouts
There is a default named default that you could use by creating the file /layouts/default.vue and passing the components inside of it.
You can of course change that with a layout: 'yolo' if you want another 'yolo` layout.
Pro tip: you don't need to import the components yourself in Nuxt.
You have named your component header, which is a standard html element. Therefore the browser will probably just try to render a standard <header> element instead of your component.
Therefore it is advised to always use multi word component names. See docs here. You can use eslint in your code editor to help you spot these mistakes.
PS: if you are learning vue from the start, I would advise you to use the composition api with the script setup approach, as it makes things easier and provide the opportunity to write clearer code as components grow.
I am working on a vue.js project and I am using the v-charts plugin. I cannot get the legend to display for any of the line graphs I am producing. I am able to produce the appropriate chart with x-axis and y-axis labels and a title for the chart. I have tried altering a ton of different options for the legend. I have also imported the legend component for e-charts individually.
I have tried multiple different formatting options for the legend.I have started a new project without any styling and still no luck. I'm sure there's something simple going on with my options object but I cannot figure it out.
Has anybody else ever run into this and found a solution?
I have been using this site as a resource for years and never asked a question. I can't figure this one out.
The chart options bar is being set in a function and the data is represented appropriately on the graph. I just need to be able to display the legend.
Code snippets and screenshot of graph below:
<template>
<div class="standard_div">
<!-- Begin chart component of graph -->
<v-chart v-if="showChart" :options="chartOptionsBar"/>
<!-- End chart component-->
</div>
</template>
<script>
// Import a different instance ECharts into the .vue file.
import ECharts from 'vue-echarts';
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'
</script>
chartOptionsBar = {
xAxis: {
// The data for the series
data: this.xAxisSeries,
// Parameters for the x axis
name: this.x_axis,
nameLocation: 'middle',
nameTextStyle: {
padding: [20, 20, 20, 20],
fontWeight: 'bold',
}
},
yAxis: {
// Parameters for the x axis
name: this.y_axis,
nameLocation: 'middle',
nameTextStyle:{
padding: [25, 25, 25, 25],
fontWeight: 'bold',
}
},
series: [
{type: 'line', data: this.yAxisSeries},
],
legend:{
top: 'auto',
left: 'auto',
right: 'auto',
bottom: 'auto',
width: '50%',
orient: 'horizontal',
lineHeight: '56',
padding: 25,
type: 'plain',
zlevel: 20,
data: ["item0"]
},
title:{
show: true,
text: this.graphTitle,
x: 'center',
textStyle: {
fontSize: 20,
}
},
};
The link includes an image of the graph that was produced from the options bar above.
I had the same problem and importing the legend using
import 'echarts/lib/component/legend'
in my component worked for me!
Try to play with positioning props
I'm trying to implement the basic GSAP fade-in / fade-out demo from the barber.js site.
The markup of test page one is as follows:
<body style="background-color: red; color: white;" data-barba="wrapper" data-barba="page1">
<h3>Constant</h3>
<main data-barba="container" data-barba-namespace="home">
<h1>Page 1</h1>
go to page 2
</main>
The markup of test page 2 is as follows:
<body style="background-color: white; color: red;" data-barba="page2">
<h3>Constant</h3>
<main data-barba="container" data-barba-namespace="home">
<h1>Page 2</h1>
go to page 1
</main>
With the following JS at each the bottom of each page:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#barba/core"></script>
<script>
barba.init({
//sync: true,
transitions: [{
name: 'opacity-transition',
leave(data) {
return gsap.to(data.current.container, {
opacity: 0
});
},
enter(data) {
return gsap.from(data.next.container, {
opacity: 0
});
}
}]
});
</script>
When leaving the current page the old element fades out OK, however the new element appears underneath a fraction early meaning I have two elements the new one jumping up as the old finishes disappearing?
Is there a way for the new one only to start appearing after the old one has finished?
I agree, the basic example is kinda failed. It turns out it depends on the styles a bit.
I managed to make it work adding display: 'none' to the leave transition, that forces the previous container to disappear before the next starts displaying:
// ...
leave(data) {
return gsap.to(data.current.container, {
opacity: 0,
display: 'none',
});
}
// ...
My best guess: the transition is meant to allow container overlapping. So you could get away with css (position: relative or something like that).
I have a really simple Vue single-file component (using Vue 2.4.2) that includes an SVG image using a set of predefined SVG symbols and work perfectly.
I notice that the icon is briefly shown unstyled before the component (non-scoped) style is applied. Important to note that:
When including the scss in our main .scss file, the problem does not occur
Using v-cloak with has no effect
Occurs on latest Chrome, FF and Safari (MacOS)
Q: I can obviously use the workaround of including it in the main scss file, but I was wondering if this is SVG-styling specific or if a delay is normal when using component-style?
My component (additional scss omitted):
<template>
<i class="icon" v-if="symbol" :class="{'icon-spin': spinning}">
<svg>
<use v-bind:xlink:href="symbol"></use>
</svg>
</i>
</template>
<script>
export default {
name: 'Icon',
props: {
icon: {type: String},
spinning: {type: Boolean, default: false}
},
computed: {
symbol () {
return this.icon ? '#' + this.icon : ''
}
}
}
</script>
<style lang="scss">
#import '../../style/variables';
.icon {
display: inline-block;
width: $icon-size;
height: $icon-size;
line-height: 1;
svg {
width: 100%;
height: 100%;
fill: currentColor;
}
...