我想在 Vue.js 中创建一个自定义选择组件。由于我需要特定的选项样式，因此我需要创建由 div 等组成的“选择”，其外观和行为就像真正的 html 选择。
目前我有这样的事情：
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'}, …我从Vue.js开始我的旅程，偶然发现了一些问题。我想用下拉菜单创建一个简单的边栏，并且已经得到了：
new Vue({
el: '#app',
data() {
return {
openedItems: {},
selectedSub: '',
userMenu: false,
items: [{
icon: './src/assets/img/icons/dashboard.svg',
text: 'Element 1',
path: '#1'
},
{
icon: './src/assets/img/icons/orders.svg',
text: 'Element 2',
path: '#2'
},
{
icon: './src/assets/img/icons/products.svg',
text: 'NestedElement',
path: '',
children: [{
icon: 'now-ui-icons files_paper',
text: 'Nested 1 ',
path: '/products'
},
{
icon: 'now-ui-icons files_paper',
text: 'Nested 2',
path: '/categories'
},
{
icon: 'now-ui-icons location_bookmark',
text: 'Nested 3',
path: '/attribute-sets'
},
{
icon: 'now-ui-icons files_box',
text: 'Nested 4', …我有一个 Ant Design 组件的问题：日期选择器（范围选择器）。[ https://ant.design/components/date-picker/] 我将它与 React 和钩子一起使用。我需要能够通过单击按钮来更改范围选择器内的日期。状态中的数据正在正确更新，但不会更新日期选择器中的日期。我认为问题在于 Ant Design 用于日期选择器的 moment.js 库。在日期选择器中，日期值包含在矩函数中。也许有一种方法可以在状态更改后手动更新组件？我有什么问题吗？
const DateSelect = () => {
const RangePicker = DatePicker.RangePicker;
const dateFormat = 'YYYY/MM/DD';
const [currentDate, setCurrentDate] = useState(moment().format(dateFormat));
const addSevenDays = () => {
const weekFromNow = moment()
.add(1, 'w')
.format(dateFormat);
setCurrentDate(weekFromNow);
console.log(currentDate);
};
return (
<div>
<Button onClick={addSevenDays}>Add 7 days</Button>
<RangePicker
defaultValue={[
moment(currentDate, dateFormat),
moment(currentDate, dateFormat),
]}
format={dateFormat}
/>
<span> {currentDate} </span>
</div>
);
};
render(<DateSelect />, document.getElementById('app'));
这是此问题的代码笔：https ://codepen.io/anon/pen/rPEmPg?editors = 0010