
如何节省精力地为 input 启用焦点定位?
在项目中经常需要在获取 Input 焦点时将光标置于右侧末尾,一个通用的解决方案可以节省大量的修改工作。
自定义指令
我们可以全局定义一个自定义指令来实现这一功能:
Vue.directive('focus-right', {
inserted: function (el) {
el.addEventListener('focus', function () {
const length = el.value.length;
setTimeout(() => {
el.selectionStart = length;
el.selectionEnd = length;
});
});
}
});然后在组件中使用:
插件
也可以创建一个插件:
const FocusRightPlugin = {
install(Vue) {
Vue.prototype.$inputFocusRight = function (e) {
const input = e.target;
const length = input.value.length;
setTimeout(() => {
input.selectionStart = length;
input.selectionEnd = length;
});
};
}
};
// 在 main.js 中
import FocusRightPlugin from './focusPlugin';
Vue.use(FocusRightPlugin);
// 组件中使用










