Question

<button class="button {{radius ? 'button-radius' : ''}} {{radius || ''}} {{size || '' }}">
   {{ text }}
</button>

输出来自：

<button radius="15px" size="med" text="whatever" />

希望用户能够轻松输入border-radius =＆＃34; #px＆＃34;而不是我使用CSS来改变半径。所以我一直在调整，但只有按钮半径工作，其半径设置为5px。有没有办法能够在半径内输入数值？

帮助表示赞赏

Answer 1

有几种方法可以做到这一点。首先，您可以将<style>标记合并到模板中 - 这样，它就会受到与其他所有标记相同的数据绑定规则的约束：

var ractive = new Ractive({
  el: 'main',
  template: '#template',
  data: {
    radius: 10
  }
});

label { display: block; }
button.large { font-size: 2em; padding: 20px; }

<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>

<main></main>

<script id='template' type='text/html'>
  <style>
    button {
      padding: 10px;
      border-radius: {{radius}}px;
    }

    button.large {
       border-radius: {{radius*2}}px;
    }
  </style>

  <label>
    <input type='range' value='{{radius}}' min='1' max='20'/>
    {{radius}}px
  </label>

  <button>I am a button</button>
  <button class='large'>I am a button</button>
</script>

其次，在这种情况下，使用内联样式是完全合理的：

var ractive = new Ractive({
  el: 'main',
  template: '#template',
  data: {
    radius: 10
  }
});

label { display: block; }
button.large { font-size: 2em; padding: 20px; }

<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>

<main></main>

<script id='template' type='text/html'>
  <label>
    <input type='range' value='{{radius}}' min='1' max='20'/>
    {{radius}}px
  </label>

  <button style='border-radius: {{radius}}px'>I am a button</button>
  <button class='large' style='border-radius: {{radius*2}}px'>I am a button</button>
</script>

ractivejs中半径的输入值

1 个答案: