ant-design-vue/components/vc-rate/demo/simple.jsx

75 lines
1.4 KiB
Vue
Raw Normal View History

2019-01-12 03:33:27 +00:00
import Rate from '../index';
import '../assets/index.less';
2018-03-21 05:06:19 +00:00
export default {
2019-01-12 03:33:27 +00:00
data() {
return {};
2018-03-21 05:06:19 +00:00
},
methods: {
2019-01-12 03:33:27 +00:00
onChange(v) {
console.log('selected star', v);
2018-03-21 05:06:19 +00:00
},
2019-01-12 03:33:27 +00:00
onFocus() {
console.dir('focus');
2018-03-21 05:06:19 +00:00
},
},
2019-01-12 03:33:27 +00:00
render() {
const { onChange, onFocus } = this;
2018-03-21 05:06:19 +00:00
const rateProps = {
props: {
defaultValue: 2.5,
allowHalf: true,
},
on: {
change: onChange,
},
style: {
2019-01-12 03:33:27 +00:00
fontSize: '50px',
marginTop: '24px',
2018-03-21 05:06:19 +00:00
},
2019-01-12 03:33:27 +00:00
};
2018-03-21 05:06:19 +00:00
const rateProps1 = {
props: {
defaultValue: 2,
},
on: {
change: onChange,
},
style: {
2019-01-12 03:33:27 +00:00
fontSize: '50px',
marginTop: '24px',
2018-03-21 05:06:19 +00:00
},
2019-01-12 03:33:27 +00:00
};
2018-03-21 05:06:19 +00:00
return (
2019-01-12 03:33:27 +00:00
<div style="margin: 100px">
2018-03-21 05:06:19 +00:00
<Rate
defaultValue={2.5}
onChange={onChange}
onFocus={onFocus}
2019-01-12 03:33:27 +00:00
style="fontSize: 40px"
2018-03-21 05:06:19 +00:00
allowHalf
allowClear={false}
autoFocus
disabled
/>
<br />
<Rate
defaultValue={2.5}
onChange={onChange}
2019-01-12 03:33:27 +00:00
style="fontSize: 50px; marginTop: 24px"
2018-03-21 05:06:19 +00:00
allowHalf
2019-01-12 03:33:27 +00:00
character="$"
2018-03-21 05:06:19 +00:00
/>
<br />
2019-01-12 03:33:27 +00:00
<Rate {...rateProps}>
<i slot="character" class="anticon anticon-star" />
2018-03-21 05:06:19 +00:00
</Rate>
<br />
2019-01-12 03:33:27 +00:00
<Rate {...rateProps1}>
<i slot="character" class="anticon anticon-star" />
2018-03-21 05:06:19 +00:00
</Rate>
</div>
2019-01-12 03:33:27 +00:00
);
2018-03-21 05:06:19 +00:00
},
2019-01-12 03:33:27 +00:00
};