如何解决使用滑块 vue 调整字体大小
我正在使用以下项目:https://baianat.github.io/vuse/
该项目用于最终用户将您的 Vue 组件重用为可编辑部分。它提供了一个样式器叠加层作为调整 div 或部分内容的工具。我安装了一个滑块,它出现了。
- 我已经绑定了 Click here to view
- 我知道数据的来源Click here to view
- 举个例子,我可以看到
@click
如何加载样式 Click here to view - 这不起作用只是想显示我一直在尝试的代码 Click here to view
解决方法
当您获得所需的值时,将其保存为数据对象中的反应变量。现在您可以使用 :style
作为样式绑定来直接为您想要的每个元素调整字体大小:
new Vue({
el: '#app',data: {
fontSize: 12
}
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id='app'>
<input type="range" min="10" max="50" v-model="fontSize">
<p :style="`font-size: ${fontSize}px`">font size: {{ fontSize }}px</p>
</div>
如果您想在您的组件中使用更全局的解决方案,您可以在数据对象中编写一个新类,并使用自适应字体大小为每个元素声明它。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。