这是在版本（package.json）上测试的：
{
"name": "fast-ui-vuejs-ver-2611-binding-issue",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@microsoft/fast-components": "^2.10.1",
"@microsoft/fast-element": "^1.5.1",
"@vue/cli-plugin-babel": "4.1.1",
"lodash-es": "^4.17.21",
"vue": "^2.6.11",
"vue-selector": "0.0.1"
},
"devDependencies": {
"@vue/cli-plugin-eslint": "4.1.1",
"@vue/cli-service": "4.1.1",
"babel-eslint": "^10.0.3",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.0.1",
"vue-template-compiler": "^2.6.11"
},
}
前提条件
- 使用此 URL打开沙箱；
- 等到一切都安装好；
- 等到您看到屏幕右侧的滑块。
重现问题的步骤：
- 前后拖动滑块的拇指（手柄）；
- 查看值（它已按预期更改）；
- 点击+或-按钮；
- 再次尝试使用滑块；
- 返回+或-按钮，然后单击一个或另一个。
实际结果：
在与不同的组件/元素交互后，绑定停止工作或至少无法按预期工作
预期结果：
它必须在进行任何交互后工作。
我尝试过的事情：
- v-模型；
- 事件的自定义绑定指令（onchange，drag）。
自定义绑定指令的代码示例：
实施文件
Vue.directive("cd-bind", {
bind(el, binding, vnode) {
const inputHandler = (event) =>
(vnode.context.$data[binding.expression] = event.target.value);
el.addEventListener("input", inputHandler);
el.addEventListener("change", inputHandler);
el.addEventListener("slide", inputHandler);
},
});
用法：
<fast-slider
v-cd-bind="value"
:value="value"
:min="0"
:max="20"
></fast-slider>
附加信息：
在一个元素失去焦点并且另一个元素获得焦点后，绑定（或它的某些部分停止工作）。
那提出的建议"EisenbergEffect"可能会帮助某人找到修复它的
方法：
当涉及到输入元素时，它们可能会有所不同并且往往会有所不同。是否： value 设置 value 属性或 value 属性？"
主要组件代码：
<template>
<fast-card>
<span style="color: white"
>Current value:
<b style="color: red; font-size: 150%">{{ value }}</b></span
>
<fast-slider
:value="value"
:max="max"
:min="min"
ref="comp"
@change="change($event)"
>
<div
slot="track"
class="time-seeker__played"
:style="{ width: timePlayedPercentage + '%' }"
></div>
</fast-slider>
<fast-card>
<fast-button @click="value = value > 0 ? value - 1 : value"
>-</fast-button
>
<fast-button @click="value = value < 20 ? value + 1 : value"
>+</fast-button
>
</fast-card>
</fast-card>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
value: 3,
min: 0,
max: 20,
};
},
computed: {
timePlayedPercentage: function () {
let value = Math.round((this.value * 100) / this.max);
// console.log(value, "%");
return value;
},
},
methods: {
change(e) {
this.value = +e.target.value;
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
div {
width: 100%;
}
.time-seeker__played {
transition: width 75ms cubic-bezier(0.86, 0.05, 0.4, 0.96);
background: red;
height: 100%;
border-radius: 15%;
}
fast-card {
margin-block: 1rem;
}
fast-button {
margin-inline-end: 1rem;
}
</style>