Здравствуйте. С Vue только начал знакомиться недавно(сам верcтальщик) и у меня такой вопрос? (наверное даже два)
1) можно ли каким то образом динамически отслеживать размеры блока? Если я правильно понимаю то methods, computed не позволяют это добиться - возможно как то с помощью watch это можно реализовать? (например поятоянно мониторить св-во this.$el.clientWidth)
2) есть такой код: https://jsfiddle.net/Mike_kharkov/uyydduap/29/
const SubWrapper = {
template: '#sub-wrapper',
data: function () {
return {
width: '',
subData: {propA: '777'}
}
},
computed: {
x: function () {
this.width = this.$el.clientWidth;
}
}
};
const MyTemplateCanvas = {
template: '#my-template-canvas',
props:['name'],
data () {
return {
configKonva: {
width: 600,
height: 600,
stroke:'gray'
},
configCircle2: {
x: 50,
y: 50,
width: 260,
height: 160,
fill: "gray",
stroke: "#2a1725",
strokeWidth: 2
}
}
}
};
Vue.use('VueKonva');
const root = new Vue({
el: '.wrapper',
components: {
SubWrapper,
MyTemplateCanvas
}
});
div, span, a, ul, li, dl, dt, dd, fieldset, form, label, button, input, h1, h2, h3, h4, h5, h6, strong, p, br, i, figure, figcaption {
margin: 0;
padding: 0;
border: 0 none;
}
:focus {
border: 0 none;
}
button, a:hover, label:hover {
cursor: pointer;
}
li {
list-style: none outside none;
}
img {
border: medium none;
}
a:active, a:focus, img, input, textarea {
outline: none;
}
a:active {
background-color: transparent;
}
textarea {
resize: none;
overflow: auto;
}
th, td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
margin: 0;
background-color: #fff;
}
.wrapper {
margin: 0 auto;
width: 100%;
height: 100%;
}
.wrapper .sub_wrapper{
margin: 0 auto;
width: 100%;
height: 100%;
}
.konvajs-content{
width: 100% ! important;
}
.wrapper .sub_wrapper canvas{
background-color: #c0c0c0 ! important;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>MK Trading</title>
<link href="style/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<sub-wrapper>
<my-template-canvas></my-template-canvas>
</sub-wrapper>
</div>
<script id="sub-wrapper" type="text/x-template">
<div class="sub_wrapper">
<slot></slot>
</div>
</script>
<script id="my-template-canvas" type="text/x-template">
<v-stage ref="stage" :config="configKonva">
<v-layer ref="layer">
<v-rect ref="zzz" :config="configCircle2"></v-rect>
</v-layer>
</v-stage>
</script>
<script src="https://unpkg.com/vue"></script>
<script src='https://unpkg.com/konva'></script>
<script src='https://unpkg.com/vue-konva'></script>
<script src="js/script.js"></script>
</body>
</html>
вопрос: каким образом я могу(допустим статически) передать значение ширины родительского блока ребенку - через например props?
vuejs
передача параметров от родителя к дочернему происходит черезprops
, а от ребенка к родителю через$emit
.