Shopware 6自定义组件手表插件Config
我对Shopware 6和vue.js也很陌生。我希望插件的config.xml中有一个文本字段，如果配置中的另一个值是true/false，它将被禁用。有什么活动可以订阅吗？这是否是反应性的(只通过单击开关而不必保存更改禁用状态)。开关应该能够禁用可变数量的输入字段，所以我不希望构建一个只包含开关和相应的文本输入的组件。你们有什么暗示吗？
例如：
我试过这样的方法：
watch: {
'PluginName.config.disableswitch' (){
console.log("changed")
},
'$PluginName.config.disableswitch' (){
console.log("changed")
},
'PluginName.config.disableswitch': {
handler() {
console.log("changed");
},
},
'$PluginName.config.disableswitch': {
handler() {
console.log("changed");
},
},
},回答 1
Stack Overflow用户
发布于 2022-05-26 20:18:03
我的第一个建议是在浏览器上安装VueJS扩展，然后检查Vue元素，以了解他们从父母那里获得了哪些数据(并不多)。
所以，为了传递你想要的数据，我们只需要做一点点工作。
首先，创建一个新插件，例如src/custom/plugins/DockwareSamplePlugin
然后，我们需要重写顶级设置模块，以传递您在watcher中提到的配置引用。
创建一个文件src/Resources/app/administration/src/component/field-bind/settings/index.js
const {Component} = Shopware;
import template from './sw-system-config.html.twig'
Component.override('sw-system-config', {
template
});您猜到了，在同一个目录中，创建了一个名为src/Resources/app/administration/src/component/field-bind/settings/sw-system-config.html.twig的文件
{% block sw_system_config_content_card_field %}
<sw-inherit-wrapper
v-model="actualConfigData[currentSalesChannelId][element.name]"
v-bind="getInheritWrapperBind(element)"
:has-parent="isNotDefaultSalesChannel"
:inherited-value="getInheritedValue(element)"
:class="'sw-system-config--field-' + kebabCase(getElementBind(element).name)"
>
<template #content="props">
<sw-form-field-renderer
v-bind="getElementBind(element, props)"
:key="props.isInheritField + props.isInherited"
:disabled="props.isInherited"
:value="props.currentValue"
@input="props.updateCurrentValue"
@change="props.updateCurrentValue"
:actualConfigData="actualConfigData[currentSalesChannelId]"
:myConfig="config[index]"
/>
</template>
</sw-inherit-wrapper>
{% endblock %}除了actualConfigData & myConfig属性之外，大部分都是原始属性的副本。这将确保将这些道具传递给您在src/Resources/config/config.xml文件中创建的每个字段/组件。
以下是此类文件实现的示例：
<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="https://raw.githubusercontent.com/shopware/platform/master/src/Core/System/SystemConfig/Schema/config.xsd">
<card>
<title>#DockwareSamplePlugin# Settings</title>
<title lang="de-DE">#DockwareSamplePlugin# Einstellungen</title>
<input-field type="bool">
<name>customToggle</name>
<label>Config switch</label>
<specialType>disable</specialType><!-- this is an example of how we know what switch controls hiding -->
</input-field>
<component name="field-bind-text">
<name>customText</name>
<label>Text</label>
</component>
</card>
</config>接下来，我们需要创建显示/隐藏的组件field-bind-text。创建目录结构&文件src/Resources/app/administration/src/component/field-bind/text/index.js
const {Component} = Shopware;
import template from './field-bind-text.html.twig'
Component.register('field-bind-text', {
template,
methods: {
getHideToggleName() {
return this.$attrs.myConfig.elements.find(element => element.config?.specialType === 'disable')['name']
}
},
computed: {
shouldDisable() {
return this.$attrs.actualConfigData[this.getHideToggleName()] ?? false
}
}
});getHideToggleName--这获得了我前面提到的XML名称，但是您也可以根据自己的喜好来调整它。可以创建一个自定义组件&查找它(例如element.config.componentName === 'my-component')shouldDisable)-它查找XML切换(按名称)
的值
然后是小枝文件src/Resources/app/administration/src/component/field-bind/text/field-bind-text.html.twig
<div class="some-class">
<sw-text-field :disabled="shouldDisable"></sw-text-field>
</div>哦，别忘了用那个src/Resources/app/administration/src/main.js文件来加载它
import './component/field-bind/text'
import './component/field-bind/settings'
好的！看，松软的柠檬蛋糕。现在，您可以退出&回到使用mage2。
https://stackoverflow.com/questions/71856717
复制相似问题
腾讯云开发者
