Open AcWrong02 opened 9 months ago
Issues-translate-bot
commented
9 months ago Bot detected the issue body's language is not English, translate it automatically.
Title: 🐛 [Bug]: When the Collapse component prevents switching, the value of modelValue is manually changed, and the blocking switching function does not take effect.
AcWrong02
commented
9 months ago <template>
<tiny-collapse class="demo-collapse-wrap" v-model="activeName" accordion :before-close="beforeClose">
<tiny-collapse-item title="一致性 Consistency" name="1">
<div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
<div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
</tiny-collapse-item>
<tiny-collapse-item title="反馈 Feedback" name="2">
<div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
<div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
</tiny-collapse-item>
<tiny-collapse-item title="效率 Efficiency" name="3">
<div>简化流程：设计简洁直观的操作流程；</div>
<div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
<div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
</tiny-collapse-item>
<tiny-collapse-item title="可控 Controllability" name="4">
<div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
<div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
</tiny-collapse-item>
</tiny-collapse>
<button @click="click">
click
</button>
</template>
<script setup>
import { ref } from 'vue'
import { Collapse as TinyCollapse, CollapseItem as TinyCollapseItem, Modal } from '@opentiny/vue'
const activeName = ref('1')
function beforeClose(item, activeNames) {
Modal.message({ message: '阻止面板切换，当前点击面板：' + item.name, status: 'error' })
return false
}
const click = ()=>{
activeName.value = '3'
}
</script>
<style scoped lang="less">
.demo-collapse-wrap {
.tiny-collapse-item__content > * {
line-height: 1.8;
}
}
</style>
shenjunjian
commented
2 months ago 虽然 wkif 提供修复了。 但我认为这个不应该算是问题， 不应该修改原来的逻辑。
阻止切换本来就是阻止从界面上产生操作， 并不是用来阻止脚本修改状态。 所在这个需要再讨论。
Issues-translate-bot
commented
2 months ago Bot detected the issue body's language is not English, translate it automatically.
Although wkif provides a fix. But I think this should not be considered a problem, and the original logic should not be modified.
Prevent switching is originally to prevent operations from the interface, and is not used to prevent scripts from modifying the state. This needs further discussion.
wkif
Version
latest
Vue Version
latest
Link to minimal reproduction
https://opentiny.design/vue-playground?mode=pc&theme=default#3.12|eyJzcmMvQXBwLnZ1ZSI6IjxzY3JpcHQgbGFuZz1cInRzeFwiPlxyXG4vLyDlvJXlhaUgQG9wZW50aW55L3Z1ZSDnu4Tku7ZcclxuaW1wb3J0IHsgQnV0dG9uLCBMaW5rIH0gZnJvbSAnQG9wZW50aW55L3Z1ZSdcclxuXHJcbmV4cG9ydCBkZWZhdWx0IHtcclxuICBjb21wb25lbnRzOiB7XHJcbiAgICBUaW55QnV0dG9uOiBCdXR0b24sXHJcbiAgICBUaW55TGluazogTGlua1xyXG4gIH0sXHJcbiAgZGF0YSgpIHtcclxuICAgIHJldHVybiB7XHJcbiAgICAgIG1zZzogJ2hlbGxvIHdvcmxkISdcclxuICAgIH1cclxuICB9XHJcbn1cclxuPC9zY3JpcHQ+XHJcblxyXG48dGVtcGxhdGU+XHJcbiAgPFRpbnlCdXR0b24+56Gu5a6aPC9UaW55QnV0dG9uPlxyXG4gIDxoMT57eyBtc2cgfX08L2gxPlxyXG4gIDxkaXYgY2xhc3M9XCJ0aW55dnVlXCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwidGlueXZ1ZS1wYWdlXCI+XHJcbiAgICAgIHRpbnl2dWVcclxuICAgICAgPHRpbnktbGluayB0eXBlPVwic3VjY2Vzc1wiIGhyZWY9J2h0dHBzOi8vZ2l0aHViLmNvbS9vcGVudGlueS90aW55LXZ1ZSc+XHJcbiAgICAgICAgdGlueXZ1ZVxyXG4gICAgICA8L3RpbnktbGluaz5cclxuICAgIDwvZGl2PlxyXG4gIDwvZGl2PlxyXG48L3RlbXBsYXRlPlxyXG5cclxuPHN0eWxlIGxhbmc9XCJsZXNzXCIgc2NvcGVkPlxyXG4gIGgxe1xyXG4gICAgY29sb3I6IzVlN2NlMDtcclxuICB9XHJcbiAgLnRpbnl2dWV7XHJcbiAgICBmb250LXNpemU6IDE4eHA7XHJcbiAgICAmLXBhZ2V7XHJcbiAgICAgIGNvbG9yOiM1ZTdjZTA7XHJcbiAgICB9XHJcbiAgfVxyXG48L3N0eWxlPlxyXG4iLCIiOiJ7XCJpbXBvcnRzXCI6e1wiQG9wZW50aW55L3Z1ZVwiOlwiaHR0cHM6Ly9ucG0ub25taWNyb3NvZnQuY24vQG9wZW50aW55L3Z1ZUAzLjEyL3J1bnRpbWUvdGlueS12dWUubWpzXCIsXCJAb3BlbnRpbnkvdnVlLWljb25cIjpcImh0dHBzOi8vbnBtLm9ubWljcm9zb2Z0LmNuL0BvcGVudGlueS92dWVAMy4xMi9ydW50aW1lL3RpbnktdnVlLWljb24ubWpzXCIsXCJAb3BlbnRpbnkvdnVlLWxvY2FsZVwiOlwiaHR0cHM6Ly9ucG0ub25taWNyb3NvZnQuY24vQG9wZW50aW55L3Z1ZUAzLjEyL3J1bnRpbWUvdGlueS12dWUtbG9jYWxlLm1qc1wiLFwiQG9wZW50aW55L3Z1ZS1jb21tb25cIjpcImh0dHBzOi8vbnBtLm9ubWljcm9zb2Z0LmNuL0BvcGVudGlueS92dWVAMy4xMi9ydW50aW1lL3RpbnktdnVlLWNvbW1vbi5tanNcIixcIkBvcGVudGlueS92dWUtdGhlbWUvXCI6XCJodHRwczovL25wbS5vbm1pY3Jvc29mdC5jbi9Ab3BlbnRpbnkvdnVlLXRoZW1lQDMuMTIvXCIsXCJzb3J0YWJsZWpzXCI6XCJodHRwczovL25wbS5vbm1pY3Jvc29mdC5jbi9zb3J0YWJsZWpzQDEuMTUuMC9tb2R1bGFyL3NvcnRhYmxlLmVzbS5qc1wifX0iLCJ0c2NvbmZpZy5qc29uIjoie1xyXG4gIFwiY29tcGlsZXJPcHRpb25zXCI6IHtcclxuICAgIFwiYWxsb3dKc1wiOiB0cnVlLFxyXG4gICAgXCJjaGVja0pzXCI6IHRydWUsXHJcbiAgICBcImpzeFwiOiBcInByZXNlcnZlXCIsXHJcbiAgICBcInRhcmdldFwiOiBcIkVTTmV4dFwiLFxyXG4gICAgXCJtb2R1bGVcIjogXCJFU05leHRcIixcclxuICAgIFwibW9kdWxlUmVzb2x1dGlvblwiOiBcIkJ1bmRsZXJcIixcclxuICAgIFwiYWxsb3dJbXBvcnRpbmdUc0V4dGVuc2lvbnNcIjogdHJ1ZVxyXG4gIH0sXHJcbiAgXCJ2dWVDb21waWxlck9wdGlvbnNcIjoge1xyXG4gICAgXCJ0YXJnZXRcIjogMy4zXHJcbiAgfVxyXG59XHJcbiIsImJlZm9yZS1jbG9zZS52dWUiOiI8dGVtcGxhdGU+XG4gIDx0aW55LWNvbGxhcHNlIGNsYXNzPVwiZGVtby1jb2xsYXBzZS13cmFwXCIgdi1tb2RlbD1cImFjdGl2ZU5hbWVcIiBhY2NvcmRpb24gOmJlZm9yZS1jbG9zZT1cImJlZm9yZUNsb3NlXCI+XG4gICAgPHRpbnktY29sbGFwc2UtaXRlbSB0aXRsZT1cIuS4gOiHtOaApyBDb25zaXN0ZW5jeVwiIG5hbWU9XCIxXCI+XG4gICAgICA8ZGl2PuS4jueOsOWunueUn+a0u+S4gOiHtO+8muS4jueOsOWunueUn+a0u+eahOa1geeoi+OAgemAu+i+keS/neaMgeS4gOiHtO+8jOmBteW+queUqOaIt+S5oOaDr+eahOivreiogOWSjOamguW/te+8mzwvZGl2PlxuICAgICAgPGRpdj7lnKjnlYzpnaLkuK3kuIDoh7TvvJrmiYDmnInnmoTlhYPntKDlkoznu5PmnoTpnIDkv53mjIHkuIDoh7TvvIzmr5TlpoLvvJrorr7orqHmoLflvI/jgIHlm77moIflkozmlofmnKzjgIHlhYPntKDnmoTkvY3nva7nrYnjgII8L2Rpdj5cbiAgICA8L3RpbnktY29sbGFwc2UtaXRlbT5cbiAgICA8dGlueS1jb2xsYXBzZS1pdGVtIHRpdGxlPVwi5Y+N6aaIIEZlZWRiYWNrXCIgbmFtZT1cIjJcIj5cbiAgICAgIDxkaXY+5o6n5Yi25Y+N6aaI77ya6YCa6L+H55WM6Z2i5qC35byP5ZKM5Lqk5LqS5Yqo5pWI6K6p55So5oi35Y+v5Lul5riF5pmw55qE5oSf55+l6Ieq5bex55qE5pON5L2c77ybPC9kaXY+XG4gICAgICA8ZGl2PumhtemdouWPjemmiO+8muaTjeS9nOWQju+8jOmAmui/h+mhtemdouWFg+e0oOeahOWPmOWMlua4heaZsOWcsOWxleeOsOW9k+WJjeeKtuaAgeOAgjwvZGl2PlxuICAgIDwvdGlueS1jb2xsYXBzZS1pdGVtPlxuICAgIDx0aW55LWNvbGxhcHNlLWl0ZW0gdGl0bGU9XCLmlYjnjocgRWZmaWNpZW5jeVwiIG5hbWU9XCIzXCI+XG4gICAgICA8ZGl2PueugOWMlua1geeoi++8muiuvuiuoeeugOa0geebtOingueahOaTjeS9nOa1geeoi++8mzwvZGl2PlxuICAgICAgPGRpdj7muIXmmbDmmI7noa7vvJror63oqIDooajovr7muIXmmbDkuJTooajmhI/mmI7noa7vvIzorqnnlKjmiLflv6vpgJ/nkIbop6Pov5vogIzkvZzlh7rlhrPnrZbvvJs8L2Rpdj5cbiAgICAgIDxkaXY+5biu5Yqp55So5oi36K+G5Yir77ya55WM6Z2i566A5Y2V55u055m977yM6K6p55So5oi35b+r6YCf6K+G5Yir6ICM6Z2e5Zue5b+G77yM5YeP5bCR55So5oi36K6w5b+G6LSf5ouF44CCPC9kaXY+XG4gICAgPC90aW55LWNvbGxhcHNlLWl0ZW0+XG4gICAgPHRpbnktY29sbGFwc2UtaXRlbSB0aXRsZT1cIuWPr+aOpyBDb250cm9sbGFiaWxpdHlcIiBuYW1lPVwiNFwiPlxuICAgICAgPGRpdj7nlKjmiLflhrPnrZbvvJrmoLnmja7lnLrmma/lj6/nu5nkuojnlKjmiLfmk43kvZzlu7rorq7miJblronlhajmj5DnpLrvvIzkvYbkuI3og73ku6Pmm7/nlKjmiLfov5vooYzlhrPnrZbvvJs8L2Rpdj5cbiAgICAgIDxkaXY+57uT5p6c5Y+v5o6n77ya55So5oi35Y+v5Lul6Ieq55Sx55qE6L+b6KGM5pON5L2c77yM5YyF5ous5pKk6ZSA44CB5Zue6YCA5ZKM57uI5q2i5b2T5YmN5pON5L2c562J44CCPC9kaXY+XG4gICAgPC90aW55LWNvbGxhcHNlLWl0ZW0+XG4gIDwvdGlueS1jb2xsYXBzZT5cbiAgPGJ1dHRvbiBAY2xpY2s9XCJjbGlja1wiPlxuICAgIGNsaWNrXG4gIDwvYnV0dG9uPlxuPC90ZW1wbGF0ZT5cblxuPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSdcbmltcG9ydCB7IENvbGxhcHNlIGFzIFRpbnlDb2xsYXBzZSwgQ29sbGFwc2VJdGVtIGFzIFRpbnlDb2xsYXBzZUl0ZW0sIE1vZGFsIH0gZnJvbSAnQG9wZW50aW55L3Z1ZSdcblxuY29uc3QgYWN0aXZlTmFtZSA9IHJlZignMScpXG5cbmZ1bmN0aW9uIGJlZm9yZUNsb3NlKGl0ZW0sIGFjdGl2ZU5hbWVzKSB7XG4gIE1vZGFsLm1lc3NhZ2UoeyBtZXNzYWdlOiAn6Zi75q2i6Z2i5p2/5YiH5o2i77yM5b2T5YmN54K55Ye76Z2i5p2/77yaJyArIGl0ZW0ubmFtZSwgc3RhdHVzOiAnZXJyb3InIH0pXG4gIHJldHVybiBmYWxzZVxufVxuICBcbmNvbnN0IGNsaWNrID0gKCk9PntcbiAgYWN0aXZlTmFtZS52YWx1ZSA9ICczJ1xufVxuPC9zY3JpcHQ+XG5cbjxzdHlsZSBzY29wZWQgbGFuZz1cImxlc3NcIj5cbi5kZW1vLWNvbGxhcHNlLXdyYXAge1xuICAudGlueS1jb2xsYXBzZS1pdGVtX19jb250ZW50ID4gKiB7XG4gICAgbGluZS1oZWlnaHQ6IDEuODtcbiAgfVxufVxuPC9zdHlsZT5cbiIsIl9vIjp7fX0=
Step to reproduce
点击click按钮，发现折叠面板仍然可以切换
What is expected
阻止切换功能应该要生效
What is actually happening
阻止切换功能不生效
Any additional comments (optional)
No response