如何使用Vuex存储动作和变异来实现此补充工具栏？并且需要在元素旁边添加一个关闭按钮。
<div id="example-1">
<button @click="show = !show">{{btnText}}</button>
<transition name="slide">
<aside v-show="show">hello</aside>
</transition>
</div>
<style>
.slide-enter-active {
transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.slide-leave-active {
transition: all .1s ease;
}
.slide-enter, .slide-leave-active {
transform: translateX(100%);
}
</style>
<script>
new Vue({
el: '#example-1',
data: {
show: false
},
computed: {
btnText: function() {
if(this.show) {
return '✕'
}
return '☰'
}
}
})
<script>
答案 0 :(得分：0)
为了将Vuex用于此功能，您需要三件事
侧栏的<html>
<body>
<script src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
window.googletag = window.googletag || {};
window.googletag.cmd = window.googletag.cmd || [];
</script>
<script>
const targeting = {
betagrp: 'testaxl',
someTargeting: 'awesome',
};
const altTargeting = {
betagrp: 'testaxl',
someTargeting: 'sauce',
};
let currTargeting = targeting;
const adUnit = '/18353239/testatc/research/search/conreviews';
const adSlots = [];
function setTargeting(obj, targeting) {
Object.entries(targeting).forEach(([key, value]) => {
obj.setTargeting(key, value);
});
}
function addSlot(adUnit, sizes, id, targeting) {
const slot = window.googletag
.defineSlot(
adUnit,
sizes,
id,
)
.addService(googletag.pubads());
setTargeting(slot, targeting);
adSlots.push(slot);
}
function toggleTargeting() {
window.googletag.cmd.push(function() {
currTargeting = currTargeting.someTargeting === targeting.someTargeting ? altTargeting : targeting;
window.googletag.pubads().clearTargeting();
setTargeting(window.googletag.pubads(), currTargeting);
window.googletag.pubads().refresh(adSlots);
});
}
window.googletag.cmd.push(function() {
window.googletag.pubads().clearTargeting();
setTargeting(window.googletag.pubads(), currTargeting);
window.googletag.pubads().disableInitialLoad();
window.googletag.pubads().enableAsyncRendering();
//window.googletag.pubads().enableSingleRequest();
window.googletag.pubads().collapseEmptyDivs();
window.googletag.enableServices();
addSlot(
adUnit,
[
[728, 93]
],
'banner',
{
pos: 'a',
prd: 'rc12',
},
);
addSlot(
adUnit,
[
'fluid',
[728, 201],
[728, 200]
],
'ad_lstg_1',
{
pos: 'c',
prd: 'rc12',
},
);
addSlot(
adUnit,
[
'fluid',
[728, 200]
],
'ad_lstg_2',
{
pos: 'd',
prd: 'rc12',
},
);
addSlot(
adUnit,
[
'fluid',
[728, 201],
[728, 200]
],
'ad_lstg_5',
{
pos: 'j',
prd: 'rc12',
},
);
addSlot(
adUnit,
[
'fluid',
[728, 200]
],
'ad_lstg_6',
{
pos: 'k',
prd: 'rc12',
},
);
addSlot(
adUnit,
[
'fluid',
[728, 90],
],
'footer',
{
pos: 'e',
prd: 'rc12',
},
);
window.googletag.pubads().refresh(adSlots);
});
</script>
<button
onClick="toggleTargeting()"
>
Toggle Targeting
</button>
<div id='banner'>
<script>
googletag.cmd.push(function() { googletag.display('banner'); });
</script>
</div>
<p />
<div id='ad_lstg_1'>
<script>
googletag.cmd.push(function() { googletag.display('ad_lstg_1'); });
</script>
</div>
<p />
<div id='ad_lstg_2'>
<script>
googletag.cmd.push(function() { googletag.display('ad_lstg_2'); });
</script>
</div>
<p />
<div id='ad_lstg_5'>
<script>
googletag.cmd.push(function() { googletag.display('ad_lstg_5'); });
</script>
</div>
<p />
<div id='ad_lstg_6'>
<script>
googletag.cmd.push(function() { googletag.display('ad_lstg_6'); });
</script>
</div>
<p />
<div id='footer'>
<script>
googletag.cmd.push(function() { googletag.display('footer'); });
</script>
</div>
</body>
将由state控制，而getter可以更改
下面是使用vuex切换边栏的基本工作示例。
请注意，它不是在使用getter，如果您不了解这些方法的工作原理，我可以详细介绍
下面是在具有过渡效果的侧面组件内部使用的切换。
此处是有关过渡Vue Transitions的Vue文档