const options = {
format: 'Letter',
orientation: 'portrait',
border: '0mm',
header: {
contents: `
<div class="headerPDF">
<img src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg"/>
<h1>test</h1>
</div>
<style>
.headerPDF{
width: 90%;
height: 60%;
border-bottom: 1px solid black;
}
.headerPDF > img{
width: 100px;
border: 1px solid black;
}
</style>
`,
},
footer: {
height: '0mm',
contents: '',
},
childProcessOptions: { env: { OPENSSL_CONF: '/dev/null' } },
}
This is a code of options and this image, don't render for nothing
and this is the output of the code
i try to put the path in the variable and i try to change many options
Related
I want to create a custom select component in Vue.js. Since I need specific options styling, I need to create 'select' made of div's etc that looks and acts like a real html select.
Currently I have something like this:
Vue.component('child', {
template: `<div class="component-container" #click="showOptions = !showOptions">
<div class="component__select">
<span class="component__select--name">Select Fruit</span>
<span class="c-arrow-down" v-if="!showOptions"></span>
<span class="c-arrow-up" v-if="showOptions"></span>
</div>
<ul class="component__select-options" v-if="showOptions" >
<li class="select--option" v-for="option in options">
<label> <input type="checkbox" :value="option"/> {{option.name}}</label>
</li>
</ul>
</div>`,
methods: {
selectOption(option) {
this.$emit('option', option)
}
},
data: () => ({
showOptions: false,
}),
props: ['options']
});
var vm = new Vue({
el: '#app',
data: () => ({
options: [
{id: 0, name: 'Apple'},
{id: 1, name: 'Banana'},
{id: 2, name: 'Orange'},
{id: 2, name: 'Strawberry'},
],
selectedFruit: ''
}),
})
.component__select {
height: 38px;
background-color: #F5F7FA;
border: 1px solid #dddddd;
line-height: 38px;
display: grid;
max-width: 500px;
grid-template-columns: 10fr 1fr;
}
.component__select--name {
font-size: 0.8rem;
padding: 0 0 0 25px;
cursor: pointer;
}
.c-arrow-down {
justify-self: end;
}
.component__select-options {
max-height: 180px;
border: 1px solid #dddddd;
border-top: none;
overflow: auto;
position: absolute;
z-index: 1500;
max-width: 500px;
width: 500px;
margin: 0;
padding: 0;
}
.select--option {
height: 35px;
display: grid;
align-content: center;
padding: 0 0 0 25px;
background-color: #f5f5fa;
border-bottom: 1px solid #dddddd;
}
.select--option:last-child {
border-bottom: none;
}
.select--option:nth-child(2n) {
background-color: #ffffff;
}
.select--option input{
display: none;
}
.single-option {
height: 55px;
background-color: #2595ec;
font-size: 0.8rem;
border: 1px solid red;
}
.cust-sel {
width: 200px;
height: 38px;
background-color: #f5f5fa;
border: 1px solid #dddddd;
}
.cust-sel:focus {
outline-width: 0;
}
<html>
<head>
<title>An example</title>
</head>
<body>
<div id="app">
<span> This is parent component</span>
<p>I want to have data from select here: "{{selectedFruit}}"</p>
<child :options="options" v-model="selectedFruit"></child>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>
But my problem is now how to return data from child to parent component using v-model on child component.
(I know I could emit data from child component and do:
<custom-select :options="someOptions" #selected="setSelectedOption"/>
but I need it to be reusable and writing more and more methods to retrieve data from every select in parent component is not exactly how it should work I think.)
Also I need to have an entire object returned, not only ID. (that's why i've got :value="option")
Any ideas?
As Vue Guide said:
v-model is essentially syntax sugar for updating data on user input
events, plus special care for some edge cases.
The syntax sugar will be like:
the directive=v-model will bind value, then listen input event to make change like v-bind:value="val" v-on:input="val = $event.target.value"
So for your use case, you need to create one prop=value, then emit the selected option with event=input.
Like below demo (bind/emit the whole option object):
Vue.config.productionTip = false
Vue.component('child', {
template: `<div class="component-container" #click="showOptions = !showOptions">
<div class="component__select">
<span class="component__select--name">{{value ? value.name : 'Select Fruit'}}</span>
<span class="c-arrow-down" v-if="!showOptions"></span>
<span class="c-arrow-up" v-if="showOptions"></span>
</div>
<ul class="component__select-options" v-if="showOptions" >
<li class="select--option" v-for="option in options" #click="selectOption(option)">
<label> <input type="checkbox" :value="option"/> {{option.name}}</label>
</li>
</ul>
</div>`,
methods: {
selectOption(option) {
this.$emit('input', option)
}
},
data: () => ({
showOptions: false
}),
props: ['options', 'value']
});
var vm = new Vue({
el: '#app',
data: () => ({
options: [
{id: 0, name: 'Apple'},
{id: 1, name: 'Banana'},
{id: 2, name: 'Orange'},
{id: 2, name: 'Strawberry'},
],
selectedFruit: ''
}),
})
.component__select {
height: 38px;
background-color: #F5F7FA;
border: 1px solid #dddddd;
line-height: 38px;
display: grid;
max-width: 500px;
grid-template-columns: 10fr 1fr;
}
.component__select--name {
font-size: 0.8rem;
padding: 0 0 0 25px;
cursor: pointer;
}
.c-arrow-down {
justify-self: end;
}
.component__select-options {
max-height: 180px;
border: 1px solid #dddddd;
border-top: none;
overflow: auto;
position: absolute;
z-index: 1500;
max-width: 500px;
width: 500px;
margin: 0;
padding: 0;
}
.select--option {
height: 35px;
display: grid;
align-content: center;
padding: 0 0 0 25px;
background-color: #f5f5fa;
border-bottom: 1px solid #dddddd;
}
.select--option:last-child {
border-bottom: none;
}
.select--option:nth-child(2n) {
background-color: #ffffff;
}
.select--option input{
display: none;
}
.single-option {
height: 55px;
background-color: #2595ec;
font-size: 0.8rem;
border: 1px solid red;
}
.cust-sel {
width: 200px;
height: 38px;
background-color: #f5f5fa;
border: 1px solid #dddddd;
}
.cust-sel:focus {
outline-width: 0;
}
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<div id="app">
<span> This is parent component</span>
<p>I want to have data from select here: "{{selectedFruit}}"</p>
<child :options="options" v-model="selectedFruit"></child>
</div>
When using v-model on custom component all you need is to declare a prop named 'value' and when you need the component to chance it emit an 'input' event.
Something like this:
<template>
<form #submit.prevent="$emit('onSearch',val)" class="form-perfil">
<div class="form-group col-md-12">
<input v-model="val" #input="$emit('input',val)"
placeholder="filtrar resultados" class="form-control">
</div>
</form>
</template>
<script>
module.exports = {
name: "CaixaFiltro",
props: ["value"],
data: _ => ({ val: "" }),
created() {
this.val = this.value
}
}
</script>
Then you can use (after register the component) it like this:
<caixa-filtro v-model="textoBusca" #onSearch="listar"></caixa-filtro>
You can find more detailed info there:
I have a node tree and want to fetch certain data attributes from these nodes when clickin on them.
I can't figure out how to get the right data from the object recived when clicking on it.
var simple_chart_config = {
chart: {
container: "#tree"
},
nodeStructure: {
text: {
name: "King Miro",
title: "King"
},
children: [{
text: {
name: "King Randor",
title: "King"
},
children: [{
text: {
name: "He-Man",
title: "Master of the Universe"
},},{
text: {
name: "She-Ra",
title: "Princess"
},
}]
}, {
text: {
name: "Skeletor",
title: "Lord of Destruction"
},
}, ]
}
}
var my_chart = new Treant(simple_chart_config);
$('body').on('click', '.Treant .node', function() {
alert($(this).attr("title"));
console.log($(this));
});
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
body { background: #fff; }
/* optional Container STYLES */
.chart { height: 600px; margin: 5px; width: 900px; }
.Treant > .node { padding: 3px; border: 1px solid #484848; border-radius: 3px; }
.Treant > .node img { width: 100%; height: 100%; }
.Treant .collapse-switch { width: 100%; height: 100%; border: none; }
.Treant .node.collapsed { background-color: #DEF82D; }
.Treant .node.collapsed .collapse-switch { background: none; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/treant-js/1.0/Treant.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/treant-js/1.0/Treant.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
<div id="tree">
</div>
So now I'm trying to fetch the name: and title:
I tried with many different versions of $(this).attr("") and val(). Trying to fetch via div class and similar.
I'm stuck right now.
You can use your build DOM to take the correct text that you need : $(this).find(".node-name") and $(this).find(".node-title")
var simple_chart_config = {
chart: {
container: "#tree"
},
nodeStructure: {
text: {
name: "King Miro",
title: "King"
},
children: [{
text: {
name: "King Randor",
title: "King"
},
children: [{
text: {
name: "He-Man",
title: "Master of the Universe"
},},{
text: {
name: "She-Ra",
title: "Princess"
},
}]
}, {
text: {
name: "Skeletor",
title: "Lord of Destruction"
},
}, ]
}
}
var my_chart = new Treant(simple_chart_config);
$('body').on('click', '.Treant .node', function() {
alert($(this).find(".node-name").text());
alert($(this).find(".node-title").text());
console.log($(this));
});
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }
body { background: #fff; }
/* optional Container STYLES */
.chart { height: 600px; margin: 5px; width: 900px; }
.Treant > .node { padding: 3px; border: 1px solid #484848; border-radius: 3px; }
.Treant > .node img { width: 100%; height: 100%; }
.Treant .collapse-switch { width: 100%; height: 100%; border: none; }
.Treant .node.collapsed { background-color: #DEF82D; }
.Treant .node.collapsed .collapse-switch { background: none; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/treant-js/1.0/Treant.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/treant-js/1.0/Treant.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
<div id="tree">
</div>
I got main block, for example it it 400px,
in this block i could have a lot of block, and i have 3 situations
i need to display score on 1 line.
1) When i got 100% - it shold be in the corner of green block
2) When it got a small size, Percentages should have "margin-left: 15px " to text, dont know, how to explain
3) And when it is for example 50% it should be after the bar
And the main problem, all text sholud be in this background, after this i will add onClick function that will close and open Teams(this you will see in the demo), so this block with all background will be receizing onClick, so all DIVs in this block with background
https://codepen.io/anon/pen/pWXaej
class Application extends React.Component {
percentsToPx ( score ) {
return score *4
}
render() {
const examples = [
{
name: 'Example 1',
score: 100,
teams: [ { name: 'Example 1' }, { name: 'Example 1' }, { name: 'Example 1' } ]
},
{
name: 'Example 2',
score: 55,
teams: [ { name: 'Example 2' }, { name: 'Example 2' }, { name: 'Example 2' } ]
},
{
name: 'Example 1',
score: 4,
teams: [ { name: 'Example 3' }, { name: 'Example 3' }, { name: 'Example 3' } ]
}
]
return <div className='project'>
{examples.map( ( it, index) => {
const size = this.percentsToPx( it.score)
return (
<div className='projectTab'>
<div style={{ display: 'inline-block' }}>
<div style={{ width: size, background: 'green', display: 'inline-block' }} className='projectBlock'>
<div className='projectText'>
<h1 className='projectTextMain'>{it.name}</h1>
<div>
{it.teams.map( ( team, index ) => {
return (
<div style={{ marginLeft: 20 }} key={index}>
<h2 style={{
color: 'black',
whiteSpace: 'nowrap',
cursor: 'default'
}}>{team.name}</h2>
</div>
);
} )}
</div>
</div>
</div>
<div style={{ width: it.score, display: 'inline-block' }}></div>
</div>
<h2 className='projectTextPercents'>{it.score}%</h2>
</div>)
})}
</div>;
}
}
/*
* Render the above component into the div#app
*/
React.render(<Application />, document.getElementById('app'));
What I want to do
What I have
and styles
.projects {
display: flex;
width: 400px;
flex-direction: column;
align-items: stretch;
margin-top: 10px;
&-tab {
border-top: 1px solid grey;
&:hover {
background: white;
}
&:last-child {
border-bottom: 1px solid grey;
}
}
&-block {
display: flex;
align-items: baseline;
}
&-text {
display: inline-block;
minHeight: 100%;
height: 100%;
margin-left: -10px;
&-main {
color: black;
white-space: nowrap;
display: inline-block;
cursor: default;
margin-left: 30px;
}
&-percents {
display: inline-block;
color: grey;
margin-left: 10px;
vertical-align: top;
cursor: default;
}
}
}
THANKS FOR YOUR HELP
I would suggest the following approach: as I see, you generate elements' width and put it right in the markup. So, you could generate also an attribute (lets say data-w) for an element with value based on the element's width. Then you could target those elements via css. In such a case you need to generate on the server-side some small styles as well for the cases when width is not equal to 100%:
div {
padding: 10px;
border: 1px solid green;
min-height: 38px;
color: white;
background-color: orange;
margin: 10px 0px;
position: relative;
box-sizing: border-box;
}
div[data-w="full"]:after {
position: absolute;
top: calc(50% - 8px);
white-space: nowrap;
right: 5%;
content: '100%';
}
/* -- Generate the corresponding styles on the server-side and put them right in the markup for every item with width not equal to 100% -- */
div[data-w="average1"]:after {
position: absolute;
top: calc(50% - 8px);
white-space: nowrap;
color: black;
right: -45px;
content: '50%';
}
div[data-w="average2"]:after {
position: absolute;
top: calc(50% - 8px);
white-space: nowrap;
color: black;
right: -45px;
content: '47%';
}
div[data-w="small"]:after {
position: absolute;
top: calc(50% - 8px);
white-space: nowrap;
color: black;
right: -115px;
content: 'example 3 16%';
}
/* -- End of note -- */
<div data-w="full" style="width: 300px">example 1</div>
<div data-w="average1" style="width: 150px">example 2.1</div>
<div data-w="average2" style="width: 140px">example 2.2</div>
<div data-w="small" style="width: 50px"></div>
When I try to append an <li> attribute to the list of servers, it isn't executing the forEach() - I tried console.log() nested but it ignores it like the Servers is an empty array?
$(function() {
var Discord = {
Servers: [{
Name: 'Server 1',
Link: 'hidden for security'
}, {
Name: 'Server 2',
Link: 'hidden for security'
}]
};
$('#_discord_notify_btn').click(function() {
Discord.Servers.forEach(function($server) {
$.post($server.Link, {
content: $('#_discord_notify').val()
});
});
});
// this code is ignored??
Discord.Servers.forEach(function($server) {
$('_discord_servers ul').append("<li>" + $server.Name + "</li>");
});
});
textarea {
min-width: 447px;
min-height: 110px;
}
button {
border: 1px solid #000;
border-radius: 9px;
background: none;
padding: 10px;
}
button:hover {
background: #000;
color: #fff;
border: 1px solid #fff;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='_discord_servers'>
<b>Servers you're notifying</b>
<ul></ul>
</div>
<textarea id='_discord_notify'>Enter your notification...</textarea>
<button type='button' id='_discord_notify_btn'>
Send Notification
</button>
Looks like you're missing the # for the ID selector in your second example.
// this code is ignored??
Discord.Servers.forEach(function($server) {
$('#_discord_servers ul').append("<li>" + $server.Name + "</li>");
});
You're missing the id selector:
$(function() {
var Discord = {
Servers: [{
Name: 'Server 1',
Link: 'hidden for security'
}, {
Name: 'Server 2',
Link: 'hidden for security'
}]
};
$('#_discord_notify_btn').click(function() {
Discord.Servers.forEach(function($server) {
$.post($server.Link, {
content: $('#_discord_notify').val()
});
});
});
// this code is ignored??
Discord.Servers.forEach(function($server) {
console.log('test');
$('#_discord_servers ul').append("<li>" + $server.Name + "</li>");
});
});
textarea {
min-width: 447px;
min-height: 110px;
}
button {
border: 1px solid #000;
border-radius: 9px;
background: none;
padding: 10px;
}
button:hover {
background: #000;
color: #fff;
border: 1px solid #fff;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='_discord_servers'>
<b>Servers you're notifying</b>
<ul></ul>
</div>
<textarea id='_discord_notify'>Enter your notification...</textarea>
<button type='button' id='_discord_notify_btn'>
Send Notification
</button>
I am building a Tic Tac Too game with vue.js framework. I have declared a vue component called grid-item, when this item is clicked I want it to call the handleClick method.
when I run the code bellow it logs to the console that the handleClick method is not defined.
How to fix the problem and get access to this method from the component ?
// vue components
Vue.component("grid-item", {
template: "#grid-item",
data: function() {
return {
sign: "X",
owner: ""
}
}
})
// vue instance
new Vue({
el: "#app",
data: {
matriceSize: 3,
},
methods: {
handleClick: function() {
alert("checked");
}
}
})
* {
box-sizing: border-box;
}
#game-box {
width: 150px;
display: block;
margin: 0px auto;
padding: 0px;
background: green;
}
.grid-item {
display: inline-block;
width: 33.333%;
height: 50px;
background: yellow;
margin: 0px;
text-align: center;
line-height: 50px;
border: 1px solid
}
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<div id="game-box">
<grid-item v-for="n in 9"></grid-item>
</div>
</div>
<template id="grid-item">
<div class="grid-item" #click="handleClick"></div>
</template>
You are getting this error as you have defined handleClick method in component : app but you are using this in the template of grid-item, where it is not defined.
Scope of vue methods is limited to the instance they have been defined.
// vue components
Vue.component("grid-item", {
template: "#grid-item",
data: function() {
return {
sign: "X",
owner: ""
}
},
methods: {
handleClick: function() {
alert("checked");
}
}
})
// vue instance
new Vue({
el: "#app",
data: {
matriceSize: 3,
}
})
* {
box-sizing: border-box;
}
#game-box {
width: 150px;
display: block;
margin: 0px auto;
padding: 0px;
background: green;
}
.grid-item {
display: inline-block;
width: 33.333%;
height: 50px;
background: yellow;
margin: 0px;
text-align: center;
line-height: 50px;
border: 1px solid
}
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<div id="game-box">
<grid-item v-for="n in 9"></grid-item>
</div>
</div>
<template id="grid-item">
<div class="grid-item" #click="handleClick"></div>
</template>