Это решение, которое я придумал.
Родительский контроллер имеет следующую вложенную функцию
@wire(getRecord, { recordId: '$recordId', fields: CONTACT_FIELDS })
wireContact({ error, data }) {
if (data) {
console.log('getRecord Data', JSON.stringify(data))
this.contact = data;
getAllDateRecords({ contactId: this.recordId })
.then(result => {
this.allDateRecords = result;
this.chartReady = true;
})
.catch(err => console.log(JSON.stringify(err)));
} else if (error) {
console.error('error', error)
this.contact = undefined;
}
}
Родительский компонент имеет компонент c-debt-chart и получает свои данные из записей всех дат :
<template>
<div class="slds-page-header__row slds-accordion__content">
<div class="c-container w-100">
<lightning-layout horizontal-align="space">
<lightning-layout-item padding="around-small">
<template if:true={chartReady}>
<c-debt-chart all-date-records={allDateRecords}></c-debt-chart>
</template>
</lightning-layout-item>
</lightning-layout>
</div>
</div>
<template>
Проблема заключалась в том, что примеры в Salesforce не показывают, как обновить данные в диаграммах js. Это решение, которое я нашел, используя Getter and Setters
Диаграмма задолженности дочерних компонентов
<template>
<lightning-card title="Debt Overview" icon-name="standard:currency">
<div class="slds-m-around_medium">
<canvas class="donut" lwc:dom="manual"></canvas>
</div>
</lightning-card>
</template>
Контроллер диаграммы задолженности
Каждый раз переменная allDateRecords изменяется на родительском уровне. Это приведет к тому, что дочерний процесс будет обновлен с использованием методов метода получения. Таким образом, в методе setter будет запущена функция seperateDateObject, которая выполняет некоторую логику для обновления диаграммы.
@api
get allDateRecords() {
return this._allDateRecords;
}
set allDateRecords(value) {
this._allDateRecords = value;
this.separateDateObject();
}
Я проверял это в Internet Explorer 7, Firefox 3 и Safari / Google Chrome. Я определенно вижу проблему с <select>
и <input type="file">
. Мои результаты показали, что если вы стилизуете все входные данные с одинаковой шириной, <select>
будет примерно на 5 пикселей короче во всех браузерах.
Использование сценария сброса Эрика Мейера не помогает решить эту проблему, однако, если вы просто сделаете свои <select>
входные значения на 5 пикселей шире, вы получите очень хорошее (хотя и не идеальное) выравнивание в основных браузеры. Единственным отличием является Safari / Google Chrome, и он кажется на 1 или 2 пикселя шире, чем во всех других браузерах.
Что касается <input type="file">
, то у вас нет особой гибкости со стилем. Если вам подходит JavaScript, вы можете реализовать метод , показанный в quirksmode , чтобы добиться большего контроля над стилем управления загрузкой файлов.
См. Мой полный рабочий пример ниже в XHTML 1.0 Strict для типичной формы с постоянной шириной ввода. Обратите внимание, что здесь не используется трюк шириной 100%, указанный здесь другими, потому что он имеет ту же проблему с непоследовательной шириной. Кроме того, нет таблиц, используемых для визуализации формы, поскольку таблицы должны использоваться только для табличных данных, а не для разметки.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Form</title>
<style type="text/css">
label,
input,
select,
textarea {
display: block;
width: 200px;
float: left;
margin-bottom: 1em;
}
select {
width: 205px;
}
label {
text-align: right;
width: 100px;
padding-right: 2em;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<form action="#">
<fieldset>
<legend>User Profile</legend>
<label for="fname">First Name</label>
<input id="fname" name="fname" type="text" />
<br class="clear" />
<label for="lname">Last Name</label>
<input id="lname" name="lname" type="text" />
<br class="clear" />
<label for="fav_lang">Favorite Language</label>
<select id="fav_lang" name="fav_lang">
<option value="c#">C#</option>
<option value="java">Java</option>
<option value="ruby">Ruby</option>
<option value="python">Python</option>
<option value="perl">Perl</option>
</select>
<br class="clear" />
<label for="bio">Biography</label>
<textarea id="bio" name="bio" cols="14" rows="4"></textarea>
<br class="clear" />
</fieldset>
</form>
</body>
</html>
Я обычно помещал их в отделении или ячейке таблицы (ужасы! Я знаю) ширины, я хочу, затем устанавливаю выбор и ввожу style:width к 100%, таким образом, они заполняют отделение / ячейка, в которой они находятся.
Я обнаружил, что если вы установите , выберите и , введите границу элемента и отступы до 0, они будут одинаковой ширины. (Протестировано на Chrome 14, Firefox 7.0.1, Opera 11.51, IE 9)
Установка границы или отступа в 1 пиксель для элементов select и input увеличивает размер элемента ввода на 2 пикселя. Например:
<form class="style">
<input name="someInput" />
<select name="options">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</form>
.style select {
width: 100px;
padding: 1px;
border: 1px solid black;
}
.style input {
width: 96px; /* -2 px for 1px padding(1px from each side) and -2px for border
(select element seems to put border inside, not outside?) */
padding: 1px;
border: 1px solid black;
}
Кроме ширины, я установил бы границу и поле также, они могут или не могут влиять на Ваши средства управления. Что-то вроде этого может помочь:
input, select {
width: 100px;
margin: 0px;
border: 1px solid;
}
Ron имеет хорошую идею также.
Вы запускаете свои файлы CSS с некоторых основных настроек? Может быть полезно выключить дополнение и поле на всех элементах. Я не протестировал, чтобы видеть, могло ли это влиять на выбор / входные элементы.
Вот CSS в качестве примера Сброс от Eric Meyer:
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
Файловые входы могут существенно различаться в разных браузерах и определенно не позволяют многое настраивать, что может раздражать, но я также понимаю, почему это происходит с точки зрения безопасности. Например, попробуйте изменить текст кнопки «Обзор», которая появляется в большинстве браузеров, или сравните файл, введенный в Safari, с другими браузерами ...
Я не думаю, что идея Рона работает ...
контрольный пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<link href="styles/reset.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
input, select{
width: 100%;
}
</style>
</head>
<body>
<div style="width: 200px;">
<input type="text">
<select>
<option>asdasd</option>
<option>asdasd</option>
</select>
</div>
</body>
</html>
Это приводит к тому, что ввод будет на несколько пикселей шире, чем выбор (это, вероятно, зависит от ОС). Я не уверен, что это может быть достигнуто, даже с трюком + 5px, так как стиль выбора, кажется, зависит от ОС (по крайней мере, тема Windows).
Это связано с тем, что с помощью < input > границы и отступы добавляются к ширине (как и для большинства других элементов). При нажатии < select > граница и отступ включаются в ширину, как в старом режиме IE quirks.
Вы можете обойти это, увеличив ширину, чтобы учесть это:
input { width: 200px; padding: 10px; border-width:5px; }
select { width: 230px; padding: 10px; border-width:5px; }
Или (если вы можете положиться на поддержку браузера), вы можете использовать новое свойство CSS3 box-sizing, чтобы сделать их вести себя согласованно и рисовать отступы и границы за пределами ширины элемента:
input, select {
width: 200px;
padding: 10px;
border-width:5px;
-webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: content-box; /* Firefox, other Gecko */
box-sizing: content-box; /* Opera/IE 8+ */
}
В качестве альтернативы, вы можете установить box-sizing в border-box, чтобы входы вели себя как выделения, с отступом, нарисованным внутри ширины. коробки.
Проверено в Chrome, IE8, FF.