@dfeidao/fd-wh000012 v4.6.201908311200

评分

• Tag
• Attributes - value - score - min_score - highlight - dark - disabled
• Methods - set_score
• Events - fdwe-change - fdwe-min
• Example - html - js

Tag

<fd-wh000012></fd-wh000012>

Attributes

value

分值的各等级说明【Array】

<fd-wh000012 id='widget' value='["等级一","等级二","等级三","等级四","等级五"]'>
</fd-wh000012>

score

默认分值

min_score

最小分值

highlight

选中时，显示的高亮图标

dark

未选中时，显示的图标

disabled

当控件节点具有disabled属性时, 控件不可点击。可使用widget.removeAttribute('disabled')或widget.setAttribute('disabled', false)来解除此状态

Methods

set_score

设置分值

widget.set_score('4');

Events

fdwe-change

监听评分的变化

返回值

{ score: '分值', v: '分值说明' }

fdwe-min

用户选择的分数低于最小分数时触发

返回值

{ score: '分值', v: '分值说明' }

Example

可以通过getAttribute('score')来获取当前分数

html

<style>
    #widget {
        width: 200px;
        height: 50px;
    }
</style>

<fd-wh000012 id='widget' score='3' min_score='2' value='["等级一","等级二","等级三","等级四","等级五"]'>
</fd-wh000012>
<input id='btn' type='button' value='设置分值为4' />

js

require.config({
    packages: [{
        name: '@dfeidao/core',
        location: './node_modules/@dfeidao/core/umd'
    }, {
        name: 'dot',
        location: './node_modules/dot',
        main: 'doT.js'
    }]
});
require(['fd-wh000012']);

const widget = document.querySelector('#widget');
const btn = document.querySelector('#btn');

widget.addEventListener('fdwe-change', (e) => {
    console.log('---------- change -------', e);
    const score = widget.getAttribute('score');
    console.log(score);
});

btn.addEventListener('click', (e) => {
    console.log(e);
    widget.set_score('4');
});